Decompose @background-color-base into several variables

This commit is contained in:
Graeme Yeates 2017-04-28 16:04:41 -04:00
parent ede77a8aa7
commit 5841746ec9
12 changed files with 38 additions and 27 deletions

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}
}

View File

@ -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;
}
}

View File

@ -51,7 +51,7 @@
&:hover {
cursor: not-allowed;
color: #bcbcbc;
background: @background-color-base;
background: @disabled-bg;
}
}
}

View File

@ -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;

View File

@ -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 {

View File

@ -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 {

View File

@ -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;
}

View File

@ -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;

View File

@ -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;

View File

@ -130,7 +130,7 @@
}
li&-option-selected {
background: @background-color-base;
background: @cascader-active-bg;
font-weight: bold;
}