Browse Source

BI-50015 refactor: 按钮灰化背景视觉修改

es6
windy 5 years ago
parent
commit
38f2b7529c
  1. 22
      src/css/base/single/button/button.css
  2. 14
      src/less/base/single/button/button.less
  3. 4
      src/less/lib/colors.less
  4. 2
      src/less/lib/constant.less

22
src/css/base/single/button/button.css

@ -187,7 +187,8 @@ body .bi-button.button-error.disabled.base-disabled,
#body .bi-button.button-error.disabled.base-disabled,
body .bi-button.button-warning.disabled.base-disabled,
#body .bi-button.button-warning.disabled.base-disabled {
background: #f2f4f7 !important;
background-color: rgba(158, 166, 178, 0.2) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#339ea6b2,endColorstr=#339ea6b2);
border-color: #d0d4da !important;
}
body .bi-button.button-common.disabled,
@ -479,3 +480,22 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
.bi-theme-dark #body .bi-button.button-common.disabled.ghost .b-font:before {
color: #ffffff !important;
}
.bi-theme-dark body .bi-button.button-success.disabled,
.bi-theme-dark #body .bi-button.button-success.disabled,
.bi-theme-dark body .bi-button.button-error.disabled,
.bi-theme-dark #body .bi-button.button-error.disabled,
.bi-theme-dark body .bi-button.button-warning.disabled,
.bi-theme-dark #body .bi-button.button-warning.disabled,
.bi-theme-dark body .bi-button.button-ignore.disabled,
.bi-theme-dark #body .bi-button.button-ignore.disabled,
.bi-theme-dark body .bi-button.button-success.disabled.base-disabled,
.bi-theme-dark #body .bi-button.button-success.disabled.base-disabled,
.bi-theme-dark body .bi-button.button-error.disabled.base-disabled,
.bi-theme-dark #body .bi-button.button-error.disabled.base-disabled,
.bi-theme-dark body .bi-button.button-warning.disabled.base-disabled,
.bi-theme-dark #body .bi-button.button-warning.disabled.base-disabled,
.bi-theme-dark body .bi-button.button-ignore.disabled.base-disabled,
.bi-theme-dark #body .bi-button.button-ignore.disabled.base-disabled {
background-color: rgba(135, 141, 159, 0.2) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33878d9f,endColorstr=#33878d9f);
}

14
src/less/base/single/button/button.less

@ -125,7 +125,9 @@ body .bi-button, #body .bi-button {
&, & .b-font:before {
color: @color-bi-text-disabled !important;
}
background: @color-bi-background-disabled !important;
background-color: fade(@color-bi-background-light-disabled, 20%) !important;
@ieColor: argb(fade(@color-bi-background-light-disabled, 20%));
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
border-color: @color-bi-border-disabled !important;
}
&:after {
@ -270,5 +272,15 @@ body .bi-button, #body .bi-button {
.opacity(0.5);
}
}
&.button-success.disabled,
&.button-error.disabled,
&.button-warning.disabled,
&.button-ignore.disabled {
&, &.base-disabled {
background-color: fade(@color-bi-background-light-disabled-theme-dark, 20%) !important;
@ieColor: argb(fade(@color-bi-background-light-disabled-theme-dark, 20%));
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
}
}
}
}

4
src/less/lib/colors.less

@ -66,6 +66,10 @@
@color-bi-background-disabled: @background-color-disabled;
//深色主题灰化背景
@color-bi-background-disabled-theme-dark: @background-color-disabled-theme-dark;
//浅灰化背景
@color-bi-background-light-disabled: @background-color-light-disabled;
//深色主题浅灰化背景
@color-bi-background-light-disabled-theme-dark: @background-color-light-disabled-theme-dark;
//成功背景色
@color-bi-background-success: @background-color-dark-success;
//成功背景色(浅)

2
src/less/lib/constant.less

@ -68,6 +68,8 @@
@background-color-dark-gray-theme-dark: #606479;
@background-color-disabled: #f2f4f7;
@background-color-disabled-theme-dark: #292f45;
@background-color-light-disabled: #9ea6b2;
@background-color-light-disabled-theme-dark: #878d9f;
@background-color-yellow: #ffc101;
@background-color-negative: #e65251;

Loading…
Cancel
Save