From 508379e3f0a079e1bbfc0dd1f0f17a5c3182d1ab Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 14 Mar 2019 17:08:38 +0800 Subject: [PATCH] =?UTF-8?q?BI-41691=20refactor:=20=E8=A7=86=E8=A7=89?= =?UTF-8?q?=E5=8A=A0=E4=B8=80=E7=BB=84=E6=B7=B1=E8=89=B2=E8=BE=B9=E6=A1=86?= =?UTF-8?q?=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/single/input/checkbox/checkbox.js | 6 +-- src/css/core/utils/common.css | 45 +++++++++++++++++ src/less/core/utils/common.less | 58 ++++++++++++++++++++++ src/less/lib/colors.less | 4 ++ src/less/lib/constant.less | 2 + 5 files changed, 112 insertions(+), 3 deletions(-) diff --git a/src/base/single/input/checkbox/checkbox.js b/src/base/single/input/checkbox/checkbox.js index de10270c0..6c30a4bd0 100644 --- a/src/base/single/input/checkbox/checkbox.js +++ b/src/base/single/input/checkbox/checkbox.js @@ -24,7 +24,7 @@ BI.Checkbox = BI.inherit(BI.BasicButton, { ref: function (_ref) { self.checkbox = _ref; }, - cls: "checkbox-context bi-border", + cls: "checkbox-context bi-dark-border", width: o.iconWidth - 2, height: o.iconHeight - 2 }] @@ -50,9 +50,9 @@ BI.Checkbox = BI.inherit(BI.BasicButton, { setSelected: function (b) { BI.Checkbox.superclass.setSelected.apply(this, arguments); if (b) { - this.checkbox.element.removeClass("bi-border").addClass("bi-high-light-background bi-high-light-border"); + this.checkbox.element.removeClass("bi-dark-border").addClass("bi-high-light-background bi-high-light-border"); } else { - this.checkbox.element.removeClass("bi-high-light-background bi-high-light-border").addClass("bi-border"); + this.checkbox.element.removeClass("bi-high-light-background bi-high-light-border").addClass("bi-dark-border"); } } }); diff --git a/src/css/core/utils/common.css b/src/css/core/utils/common.css index 3661b1b2a..b0c8e0d26 100644 --- a/src/css/core/utils/common.css +++ b/src/css/core/utils/common.css @@ -174,6 +174,51 @@ textarea { .bi-border-left.disabled { border-color: #d0d4da !important; } +.bi-dark-border { + border: 1px solid #9EA6B2; +} +.bi-dark-border.disabled { + border-color: #d0d4da !important; +} +.bi-dark-border-top { + border-top: 1px solid #9EA6B2; +} +.bi-dark-border-top.disabled { + border-color: #d0d4da !important; +} +.bi-dark-border-right { + border-right: 1px solid #9EA6B2; +} +.bi-dark-border-right.disabled { + border-color: #d0d4da !important; +} +.bi-dark-border-bottom { + border-bottom: 1px solid #9EA6B2; +} +.bi-dark-border-bottom.disabled { + border-color: #d0d4da !important; +} +.bi-dark-border-left { + border-left: 1px solid #9EA6B2; +} +.bi-dark-border-left.disabled { + border-color: #d0d4da !important; +} +.bi-theme-dark .bi-dark-border { + border: 1px solid #9EA6B2; +} +.bi-theme-dark .bi-dark-border-top { + border-top: 1px solid #9EA6B2; +} +.bi-theme-dark .bi-dark-border-right { + border-right: 1px solid #9EA6B2; +} +.bi-theme-dark .bi-dark-border-bottom { + border-bottom: 1px solid #9EA6B2; +} +.bi-theme-dark .bi-dark-border-left { + border-left: 1px solid #9EA6B2; +} .bi-theme-dark .bi-border { border: 1px solid #3a3c53; } diff --git a/src/less/core/utils/common.less b/src/less/core/utils/common.less index 40ed96b0f..0b832f2be 100644 --- a/src/less/core/utils/common.less +++ b/src/less/core/utils/common.less @@ -213,6 +213,64 @@ textarea { } } +//深色边框 +.bi-dark-border { + border: 1px solid @color-bi-border-dark-line; + &.disabled { + border-color: @color-bi-border-disabled !important; + } +} + +.bi-dark-border-top { + border-top: 1px solid @color-bi-border-dark-line; + &.disabled { + border-color: @color-bi-border-disabled !important; + } +} + +.bi-dark-border-right { + border-right: 1px solid @color-bi-border-dark-line; + &.disabled { + border-color: @color-bi-border-disabled !important; + } +} + +.bi-dark-border-bottom { + border-bottom: 1px solid @color-bi-border-dark-line; + &.disabled { + border-color: @color-bi-border-disabled !important; + } +} + +.bi-dark-border-left { + border-left: 1px solid @color-bi-border-dark-line; + &.disabled { + border-color: @color-bi-border-disabled !important; + } +} + +.bi-theme-dark { + .bi-dark-border { + border: 1px solid @color-bi-border-dark-line-theme-dark; + } + + .bi-dark-border-top { + border-top: 1px solid @color-bi-border-dark-line-theme-dark; + } + + .bi-dark-border-right { + border-right: 1px solid @color-bi-border-dark-line-theme-dark; + } + + .bi-dark-border-bottom { + border-bottom: 1px solid @color-bi-border-dark-line-theme-dark; + } + + .bi-dark-border-left { + border-left: 1px solid @color-bi-border-dark-line-theme-dark; + } +} + .bi-theme-dark { .bi-border { border: 1px solid @color-bi-border-line-theme-dark; diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less index 1140e5a30..1b49e843a 100644 --- a/src/less/lib/colors.less +++ b/src/less/lib/colors.less @@ -89,6 +89,10 @@ @color-bi-border-line: @border-color-line; //深色系边框线色 @color-bi-border-line-theme-dark: @border-color-line-theme-dark; +//深色边框线 +@color-bi-border-dark-line: @border-color-dark-line; +//深色系深色边框线 +@color-bi-border-dark-line-theme-dark: @border-color-dark-line-theme-dark; //灰化边框 @color-bi-border-disabled: @border-color-disabled; //成功边框色 diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less index a1b86983f..5b5d4123d 100644 --- a/src/less/lib/constant.less +++ b/src/less/lib/constant.less @@ -85,6 +85,8 @@ @border-color-line-theme-dark: #3a3c53; @border-color-light-line: #f2f4f7; @border-color-light-line-theme-dark: #2F3149; +@border-color-dark-line: #9EA6B2; +@border-color-dark-line-theme-dark: #9EA6B2; @border-color-highlight: #3685f2; @border-color-warning: #fbb03b;