mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
Decompose @background-color-base into several variables
This commit is contained in:
parent
ede77a8aa7
commit
5841746ec9
@ -128,12 +128,12 @@
|
||||
&-disabled-cell &-value {
|
||||
cursor: not-allowed;
|
||||
color: @disabled-color;
|
||||
background: @background-color-base;
|
||||
background: @disabled-bg;
|
||||
border-radius: 0;
|
||||
width: auto;
|
||||
|
||||
&:hover {
|
||||
background: @background-color-base;
|
||||
background: @disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -109,10 +109,10 @@
|
||||
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
border-color: @border-color-base!important;
|
||||
background-color: @background-color-base;
|
||||
background-color: @input-disabled-bg;
|
||||
&:after {
|
||||
animation-name: none;
|
||||
border-color: @background-color-base;
|
||||
border-color: @input-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -4,6 +4,7 @@
|
||||
@collapse-prefix-cls: ~"@{ant-prefix}-collapse";
|
||||
|
||||
@collapse-active-bg: @primary-1;
|
||||
@collapse-header-bg: @background-color-base;
|
||||
|
||||
.collapse-close() {
|
||||
.iconfont-size-under-12px(9px, 0);
|
||||
@ -13,7 +14,7 @@
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls} {
|
||||
background-color: @background-color-base;
|
||||
background-color: @collapse-header-bg;
|
||||
border-radius: @border-radius-base;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-bottom: 0;
|
||||
@ -105,7 +106,7 @@
|
||||
&-borderless > &-item > &-header {
|
||||
transition: all .3s;
|
||||
&:hover {
|
||||
background-color: @background-color-base;
|
||||
background-color: @collapse-header-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -219,13 +219,13 @@
|
||||
&-disabled-cell &-date {
|
||||
cursor: not-allowed;
|
||||
color: #bcbcbc;
|
||||
background: @background-color-base;
|
||||
background: @disabled-bg;
|
||||
border-radius: 0;
|
||||
width: auto;
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
|
||||
&:hover {
|
||||
background: @background-color-base;
|
||||
background: @disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -51,7 +51,7 @@
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
color: #bcbcbc;
|
||||
background: @background-color-base;
|
||||
background: @disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -167,7 +167,7 @@
|
||||
.@{input-number-prefix-cls}-input {
|
||||
opacity: 0.72;
|
||||
cursor: not-allowed;
|
||||
background-color: @background-color-base;
|
||||
background-color: @disabled-bg;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler-wrap {
|
||||
display: none;
|
||||
|
@ -26,13 +26,13 @@
|
||||
&-inner {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color: @background-color-base;
|
||||
background-color: @progress-remaining-color;
|
||||
border-radius: 100px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-circle-trail {
|
||||
stroke: @background-color-base;
|
||||
stroke: @progress-remaining-color;
|
||||
}
|
||||
|
||||
&-circle-path {
|
||||
|
@ -95,7 +95,7 @@
|
||||
.@{radio-prefix-cls}-disabled {
|
||||
.@{radio-inner-prefix-cls} {
|
||||
border-color: @border-color-base!important;
|
||||
background-color: @background-color-base;
|
||||
background-color: @input-disabled-bg;
|
||||
&:after {
|
||||
background-color: #ccc;
|
||||
}
|
||||
@ -210,14 +210,14 @@ span.@{radio-prefix-cls} + * {
|
||||
|
||||
&-disabled {
|
||||
border-color: @border-color-base;
|
||||
background-color: @background-color-base;
|
||||
background-color: @input-disabled-bg;
|
||||
cursor: not-allowed;
|
||||
color: @disabled-color;
|
||||
|
||||
&:first-child,
|
||||
&:hover {
|
||||
border-color: @border-color-base;
|
||||
background-color: @background-color-base;
|
||||
background-color: @input-disabled-bg;
|
||||
color: @disabled-color;
|
||||
}
|
||||
&:first-child {
|
||||
|
@ -111,7 +111,7 @@
|
||||
}
|
||||
|
||||
&-disabled &-selection {
|
||||
background: @background-color-base;
|
||||
background: @input-disabled-bg;
|
||||
cursor: not-allowed;
|
||||
&:hover,
|
||||
&:focus,
|
||||
@ -298,7 +298,7 @@
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__choice {
|
||||
background-color: @background-color-base;
|
||||
background-color: @cascader-active-bg;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
float: left;
|
||||
@ -479,7 +479,7 @@
|
||||
&-selected {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: @background-color-base;
|
||||
background-color: @cascader-active-bg;
|
||||
font-weight: bold;
|
||||
color: @text-color;
|
||||
}
|
||||
|
@ -38,11 +38,9 @@
|
||||
@heading-color : fade(#000, 85%);
|
||||
@text-color : fade(#000, 65%);
|
||||
@text-color-secondary : fade(#000, 43%);
|
||||
@disabled-color : fade(#000, 25%);
|
||||
@heading-color-dark : fade(#fff, 97%);
|
||||
@text-color-dark : fade(#fff, 91%);
|
||||
@text-color-secondary-dark: fade(#fff, 67%);
|
||||
@disabled-color-dark : fade(#fff, 35%);
|
||||
@font-size-base : 12px;
|
||||
@font-size-lg : @font-size-base + 2px;
|
||||
@line-height-base : 1.5;
|
||||
@ -87,6 +85,11 @@
|
||||
// Background color
|
||||
@background-color-base : #f7f7f7; // basic gray background
|
||||
|
||||
// Disabled states
|
||||
@disabled-color : fade(#000, 25%);
|
||||
@disabled-bg : @background-color-base;
|
||||
@disabled-color-dark : fade(#fff, 35%);
|
||||
|
||||
// Shadow
|
||||
@shadow-color : rgba(0, 0, 0, .2);
|
||||
@box-shadow-base : @shadow-1-down;
|
||||
@ -108,12 +111,12 @@
|
||||
@btn-default-bg : #fff;
|
||||
@btn-default-border : @border-color-base;
|
||||
|
||||
@btn-danger-color : @error-color;
|
||||
@btn-danger-bg : @background-color-base;
|
||||
@btn-danger-border : @border-color-base;
|
||||
@btn-danger-color : @error-color;
|
||||
@btn-danger-bg : @background-color-base;
|
||||
@btn-danger-border : @border-color-base;
|
||||
|
||||
@btn-disable-color : @disabled-color;
|
||||
@btn-disable-bg : @background-color-base;
|
||||
@btn-disable-bg : @disabled-bg;
|
||||
@btn-disable-border : @border-color-base;
|
||||
|
||||
@btn-padding-base : 0 15px;
|
||||
@ -215,7 +218,7 @@
|
||||
@input-border-color : @border-color-base;
|
||||
@input-bg : #fff;
|
||||
@input-hover-border-color : @primary-color;
|
||||
@input-disabled-bg : @background-color-base;
|
||||
@input-disabled-bg : @disabled-bg;
|
||||
|
||||
// Tooltip
|
||||
// ---
|
||||
@ -254,6 +257,7 @@
|
||||
// Progress
|
||||
// --
|
||||
@process-default-color: @primary-color;
|
||||
@progress-remaining-color: @background-color-base;
|
||||
|
||||
// Menu
|
||||
// ---
|
||||
@ -299,3 +303,7 @@
|
||||
@card-head-height: 48px;
|
||||
@card-head-color: @heading-color;
|
||||
@card-head-background: @component-background;
|
||||
|
||||
// Cascader
|
||||
// ---
|
||||
@cascader-active-color: @background-color-base;
|
||||
|
@ -3,6 +3,8 @@
|
||||
|
||||
@tag-prefix-cls: ~"@{ant-prefix}-tag";
|
||||
|
||||
@tag-default-bg: @background-color-base;
|
||||
|
||||
.@{tag-prefix-cls} {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
@ -10,7 +12,7 @@
|
||||
padding: 0 8px;
|
||||
border-radius: @border-radius-base;
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background: @background-color-base;
|
||||
background: @tag-default-bg;
|
||||
font-size: @font-size-base;
|
||||
transition: all 0.3s @ease-in-out-circ;
|
||||
opacity: 1;
|
||||
|
@ -130,7 +130,7 @@
|
||||
}
|
||||
|
||||
li&-option-selected {
|
||||
background: @background-color-base;
|
||||
background: @cascader-active-bg;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user