mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

use color definitions insted of numbers

Browse Source
This commit is contained in:
amedora 2018-12-04 14:11:31 +09:00 committed by 偏右
parent 1f3e5f5817
commit 0aeb9a356b
30 changed files with 67 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/alert/style/index.less
View File

@ -74,7 +74,7 @@
color: @alert-close-color;
transition: color .3s;
&:hover {
color: #404040;
color: @icon-color-hover;
}
}
}

8
components/badge/style/index.less
View File

@ -17,18 +17,18 @@
border-radius: @badge-height / 2;
min-width: @badge-height;
background: @highlight-color;
color: #fff;
color: @badge-text-color;
line-height: @badge-height;
text-align: center;
padding: 0 6px;
font-size: @badge-font-size;
font-weight: @badge-font-weight;
white-space: nowrap;
box-shadow: 0 0 0 1px #fff;
box-shadow: 0 0 0 1px @shadow-color-inverse;
z-index: 10;
a,
a:hover {
color: #fff;
color: @badge-text-color;
}
}
@ -43,7 +43,7 @@
border-radius: 100%;
background: @highlight-color;
z-index: 10;
box-shadow: 0 0 0 1px #fff;
box-shadow: 0 0 0 1px @shadow-color-inverse;
}
&-count,

6
components/button/style/index.less
View File

@ -80,7 +80,7 @@
left: -1px;
bottom: -1px;
right: -1px;
background: #fff;
background: @component-background;
opacity: 0.35;
content: "";
border-radius: inherit;
@ -137,8 +137,8 @@
&-background-ghost {
background: transparent !important;
border-color: #fff;
color: #fff;
border-color: @component-background;
color: @component-background;
}
&-background-ghost&-primary {

2
components/button/style/mixin.less
View File

@ -64,7 +64,7 @@
}
&:focus {
.button-color(~`colorPalette("@{color}", 5)`; #fff; ~`colorPalette("@{color}", 5)`);
.button-color(~`colorPalette("@{color}", 5)`; @component-background; ~`colorPalette("@{color}", 5)`);
}
&:active,

4
components/calendar/style/index.less
View File

@ -106,7 +106,7 @@
&:active {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
}
}
@ -122,7 +122,7 @@
&-selected-day &-value,
&-month-panel-selected-cell &-value {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
}
&-disabled-cell-first-of-row &-value {

7
components/card/style/index.less
View File

@ -3,9 +3,12 @@
@card-prefix-cls: ~"@{ant-prefix}-card";
@card-head-height: 48px;
@card-hover-border: rgba(0, 0, 0, 0.09);
@card-hover-border: fade(@black, 9%);
@card-radius: @border-radius-sm;
@gradient-min: fade(@card-background, 20%);
@gradient-max: fade(@card-background, 40%);
.@{card-prefix-cls} {
.reset-component;
background: @component-background;
@ -244,7 +247,7 @@
height: 14px;
margin: 4px 0;
border-radius: @card-radius;
background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2));
background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
animation: card-loading 1.4s ease infinite;
background-size: 600% 600%;
}

4
components/carousel/style/index.less
View File

@ -165,7 +165,7 @@
button {
border: 0;
cursor: pointer;
background: #fff;
background: @component-background;
opacity: 0.3;
display: block;
width: @carousel-dot-width;
@ -182,7 +182,7 @@
}
}
&.slick-active button {
background: #fff;
background: @component-background;
opacity: 1;
width: @carousel-dot-active-width;
&:hover,

10
components/date-picker/style/Calendar.less
View File

@ -86,7 +86,7 @@
position: relative;
outline: none;
width: 280px;
border: @border-width-base @border-style-base #fff;
border: @border-width-base @border-style-base @border-color-inverse;
list-style: none;
font-size: @font-size-base;
text-align: left;
@ -194,7 +194,7 @@
}
&:active {
color: #fff;
color: @text-color-inverse;
background: @primary-5;
}
}
@ -217,7 +217,7 @@
&-selected-date, &-selected-start-date, &-selected-end-date {
.@{calendar-prefix-cls}-date {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
border: @border-width-base @border-style-base transparent;
&:hover {
@ -228,7 +228,7 @@
&-disabled-cell &-date {
cursor: not-allowed;
color: #bcbcbc;
color: @disabled-color;
background: @disabled-bg;
border-radius: 0;
width: auto;
@ -249,7 +249,7 @@
left: 5px;
width: 24px;
height: 24px;
border: @border-width-base @border-style-base #bcbcbc;
border: @border-width-base @border-style-base @disabled-color;
border-radius: @border-radius-sm;
}
}

4
components/date-picker/style/DecadePanel.less
View File

@ -54,11 +54,11 @@
.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
&:hover {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
}
}

6
components/date-picker/style/MonthPanel.less
View File

@ -35,11 +35,11 @@
.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
&:hover {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
}
}
@ -50,7 +50,7 @@
&,
&:hover {
cursor: not-allowed;
color: #bcbcbc;
color: @disabled-color;
background: @disabled-bg;
}
}

4
components/date-picker/style/YearPanel.less
View File

@ -57,11 +57,11 @@
.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
&:hover {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
}
}

2
components/drawer/style/drawer.less
View File

@ -143,7 +143,7 @@
&:focus,
&:hover {
color: #444;
color: @icon-color-hover;
text-decoration: none;
}
}

4
components/dropdown/style/index.less
View File

@ -218,7 +218,7 @@
color: @text-color-secondary-dark;
}
&:hover {
color: #fff;
color: @text-color-inverse;
background: transparent;
}
}
@ -227,7 +227,7 @@
&:hover,
> a {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
}
}
}

2
components/form/style/index.less
View File

@ -282,7 +282,7 @@ form {
.@{ant-prefix}-select-selection--single {
margin-left: -1px;
height: @input-height-lg;
background-color: #eee;
background-color: fade(@black, 7%);
.@{ant-prefix}-select-selection__rendered {
padding-left: 8px;
padding-right: 25px;

2
components/input-number/style/index.less
View File

@ -26,7 +26,7 @@
width: 100%;
font-weight: bold;
&:active {
background: #f4f4f4;
background: @input-number-handler-active-bg;
}
&:hover &-up-inner,
&:hover &-down-inner {

2
components/input/style/search-input.less
View File

@ -11,7 +11,7 @@
cursor: pointer;
transition: all .3s;
&:hover {
color: #333;
color: fade(@black, 80%);
}
}

2
components/menu/style/dark.less
View File

@ -20,7 +20,7 @@
&-dark &-inline&-sub {
background: @menu-dark-submenu-bg;
box-shadow: 0 2px 8px rgba(0, 0, 0, .45) inset;
box-shadow: 0 2px 8px fade(@black, 45%) inset;
}
&-dark&-horizontal {

2
components/menu/style/index.less
View File

@ -220,7 +220,7 @@
content: "";
position: absolute;
vertical-align: baseline;
background: #fff;
background: @menu-bg;
background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
width: 6px;
height: 1.5px;

2
components/modal/style/modal.less
View File

@ -69,7 +69,7 @@
&:focus,
&:hover {
color: #444;
color: @icon-color-hover;
text-decoration: none;
}
}

10
components/popover/style/index.less
View File

@ -18,7 +18,7 @@
&:after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.01);
background: fade(@white, 1%);
}
&-hidden {
@ -114,7 +114,7 @@
&-placement-topLeft > &-content > &-arrow,
&-placement-topRight > &-content > &-arrow {
bottom: @popover-distance - @popover-arrow-width + 1.5px;
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
box-shadow: 3px 3px 7px fade(@black, 7%);
}
&-placement-top > &-content > &-arrow {
left: 50%;
@ -131,7 +131,7 @@
&-placement-rightTop > &-content > &-arrow,
&-placement-rightBottom > &-content > &-arrow {
left: @popover-distance - @popover-arrow-width + 2px;
box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
box-shadow: -3px 3px 7px fade(@black, 7%);
}
&-placement-right > &-content > &-arrow {
top: 50%;
@ -148,7 +148,7 @@
&-placement-bottomLeft > &-content > &-arrow,
&-placement-bottomRight > &-content > &-arrow {
top: @popover-distance - @popover-arrow-width + 2px;
box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
box-shadow: -2px -2px 5px fade(@black, 6%);
}
&-placement-bottom > &-content > &-arrow {
left: 50%;
@ -165,7 +165,7 @@
&-placement-leftTop > &-content > &-arrow,
&-placement-leftBottom > &-content > &-arrow {
right: @popover-distance - @popover-arrow-width + 2px;
box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
box-shadow: 3px -3px 7px fade(@black, 7%);
}
&-placement-left > &-content > &-arrow {
top: 50%;

12
components/radio/style/index.less
View File

@ -117,7 +117,7 @@
border-color: @border-color-base !important;
background-color: @input-disabled-bg;
&:after {
background-color: #ccc;
background-color: fade(@black, 20%);
}
}
@ -246,16 +246,16 @@ span.@{radio-prefix-cls} + * {
.@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
background: @radio-dot-color;
border-color: @radio-dot-color;
color: #fff;
color: @component-background;
&:hover {
border-color: @radio-button-hover-color;
background: @radio-button-hover-color;
color: #fff;
color: @component-background;
}
&:active {
border-color: @radio-button-active-color;
background: @radio-button-active-color;
color: #fff;
color: @component-background;
}
}
@ -277,8 +277,8 @@ span.@{radio-prefix-cls} + * {
}
&-disabled&-checked {
color: #fff;
background-color: #e6e6e6;
color: @text-color-inverse;
background-color: fade(@black, 90%);
border-color: @border-color-base;
box-shadow: none;
}

6
components/select/style/index.less
View File

@ -138,7 +138,7 @@
&-disabled &-selection--multiple &-selection__choice {
background: @background-color-base;
color: #aaa;
color: fade(@black, 33%);
padding-right: 10px;
&__remove {
display: none;
@ -359,7 +359,7 @@
position: absolute;
right: 4px;
&:hover {
color: #404040;
color: @icon-color-hover;
}
}
@ -559,7 +559,7 @@
}
&:hover .@{select-prefix-cls}-selected-icon {
color: #ddd;
color: fade(@black, 87%);
}
&-disabled .@{select-prefix-cls}-selected-icon {

4
components/spin/style/index.less
View File

@ -40,7 +40,7 @@
top: 50%;
width: 100%;
padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px;
text-shadow: 0 1px 2px #fff;
text-shadow: 0 1px 2px @shadow-color-inverse;
}
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
margin-top: -@spin-dot-size / 2 - 10px;
@ -96,7 +96,7 @@
right: 0;
top: 0;
bottom: 0;
background: #fff;
background: @component-background;
opacity: 0.3;
transition: all .3s;
z-index: 10;

2
components/steps/style/index.less
View File

@ -6,7 +6,7 @@
@process-title-color: @heading-color;
@process-description-color: @text-color;
@process-tail-color: @border-color-split;
@process-icon-text-color: #fff;
@process-icon-text-color: @text-color-inverse;
@wait-icon-color: @disabled-color;
@wait-title-color: @text-color-secondary;
@wait-description-color: @wait-title-color;

2
components/steps/style/progress-dot.less
View File

@ -35,7 +35,7 @@
/* expand hover area */
&:after {
content: "";
background: rgba(0, 0, 0, .001);
background: fade(@black, 0.1%);
width: 60px;
height: 32px;
position: absolute;

4
components/style/core/base.less
View File

@ -45,7 +45,7 @@ html {
-webkit-text-size-adjust: 100%; // 4
-ms-text-size-adjust: 100%; // 4
-ms-overflow-style: scrollbar; // 5
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
-webkit-tap-highlight-color: fade(@black, 0%); // 6
}
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
@ -487,7 +487,7 @@ mark {
::selection {
background: @primary-color;
color: #fff;
color: @text-color-inverse;
}
// Utility classes

4
components/switch/style/index.less
View File

@ -21,7 +21,7 @@
user-select: none;
&-inner {
color: #fff;
color: @text-color-inverse;
font-size: @font-size-sm;
margin-left: 24px;
margin-right: 6px;
@ -43,7 +43,7 @@
}
&:after {
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, .2);
box-shadow: 0 2px 4px 0 @switch-shadow-color;
}
&:active:before,

2
components/table/style/index.less
View File

@ -501,7 +501,7 @@
display: inline-block;
line-height: 1;
&:hover .@{iconfont-css-prefix}-down {
color: #666;
color: fade(@black, 60%);
}
}
}

6
components/tag/style/index.less
View File

@ -55,7 +55,7 @@
a:hover,
.@{iconfont-css-prefix}-close,
.@{iconfont-css-prefix}-close:hover {
color: #fff;
color: @text-color-inverse;
}
}
@ -67,7 +67,7 @@
}
&:active,
&-checked {
color: #fff;
color: @text-color-inverse;
}
&-checked {
background-color: @primary-6;
@ -111,7 +111,7 @@
&-@{color}-inverse {
background: @@darkColor;
border-color: @@darkColor;
color: #fff;
color: @text-color-inverse;
}
}

4
components/upload/style/index.less
View File

@ -313,7 +313,7 @@
content: ' ';
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
background-color: fade(@black, 50%);
transition: all .3s;
width: 100%;
height: 100%;
@ -345,7 +345,7 @@
color: @text-color-dark;
margin: 0 4px;
&:hover {
color: #fff;
color: @text-color-inverse;
}
}
}