Browse Source

BI-41691 refactor: 视觉加一组深色边框线

es6
windy 6 years ago
parent
commit
508379e3f0
  1. 6
      src/base/single/input/checkbox/checkbox.js
  2. 45
      src/css/core/utils/common.css
  3. 58
      src/less/core/utils/common.less
  4. 4
      src/less/lib/colors.less
  5. 2
      src/less/lib/constant.less

6
src/base/single/input/checkbox/checkbox.js

@ -24,7 +24,7 @@ BI.Checkbox = BI.inherit(BI.BasicButton, {
ref: function (_ref) { ref: function (_ref) {
self.checkbox = _ref; self.checkbox = _ref;
}, },
cls: "checkbox-context bi-border", cls: "checkbox-context bi-dark-border",
width: o.iconWidth - 2, width: o.iconWidth - 2,
height: o.iconHeight - 2 height: o.iconHeight - 2
}] }]
@ -50,9 +50,9 @@ BI.Checkbox = BI.inherit(BI.BasicButton, {
setSelected: function (b) { setSelected: function (b) {
BI.Checkbox.superclass.setSelected.apply(this, arguments); BI.Checkbox.superclass.setSelected.apply(this, arguments);
if (b) { 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 { } 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");
} }
} }
}); });

45
src/css/core/utils/common.css

@ -174,6 +174,51 @@ textarea {
.bi-border-left.disabled { .bi-border-left.disabled {
border-color: #d0d4da !important; 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 { .bi-theme-dark .bi-border {
border: 1px solid #3a3c53; border: 1px solid #3a3c53;
} }

58
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-theme-dark {
.bi-border { .bi-border {
border: 1px solid @color-bi-border-line-theme-dark; border: 1px solid @color-bi-border-line-theme-dark;

4
src/less/lib/colors.less

@ -89,6 +89,10 @@
@color-bi-border-line: @border-color-line; @color-bi-border-line: @border-color-line;
//深色系边框线色 //深色系边框线色
@color-bi-border-line-theme-dark: @border-color-line-theme-dark; @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; @color-bi-border-disabled: @border-color-disabled;
//成功边框色 //成功边框色

2
src/less/lib/constant.less

@ -85,6 +85,8 @@
@border-color-line-theme-dark: #3a3c53; @border-color-line-theme-dark: #3a3c53;
@border-color-light-line: #f2f4f7; @border-color-light-line: #f2f4f7;
@border-color-light-line-theme-dark: #2F3149; @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-highlight: #3685f2;
@border-color-warning: #fbb03b; @border-color-warning: #fbb03b;

Loading…
Cancel
Save