mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-02 05:46:55 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

replace components colors

Browse Source
This commit is contained in:
zombiej 2018-12-11 22:45:03 +08:00
parent ee128020e7
commit 2029762297
3 changed files with 28 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,16 +29,12 @@
&:hover, &:hover,
&:focus { &:focus {
.button-color( .button-color(@color; color-palette(@background, 5) ; color-palette(@background, 5));
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
);
} }
&:active, &:active,
&.active { &.active {
.button-color( .button-color(@color; color-palette(@background, 7) ; color-palette(@background, 7));
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
);
} }
.button-disabled(); .button-disabled();
@ -64,20 +60,16 @@
.button-color(@color; @background; @border); .button-color(@color; @background; @border);
&:hover { &:hover {
.button-color( .button-color(@btn-primary-color; color-palette(@color, 5) ; color-palette(@color, 5));
@btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) `
);
} }
&:focus { &:focus {
.button-color(~`colorPalette('@{color}', 5) `; #fff; ~`colorPalette('@{color}', 5) `); .button-color(color-palette(@color, 5) ; #fff; color-palette(@color, 5));
} }
&:active, &:active,
&.active { &.active {
.button-color( .button-color(@btn-primary-color; color-palette(@color, 7) ; color-palette(@color, 7));
@btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) `
);
} }
.button-disabled(); .button-disabled();
@ -89,12 +81,12 @@
&:hover, &:hover,
&:focus { &:focus {
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `); .button-color(color-palette(@color, 5) ; transparent; color-palette(@color, 5));
} }
&:active, &:active,
&.active { &.active {
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `); .button-color(color-palette(@color, 7) ; transparent; color-palette(@color, 7));
} }
.button-disabled(); .button-disabled();

4
components/input/style/mixin.less
View File

@ -18,7 +18,7 @@
// input status // input status
// == when focus or actived // == when focus or actived
.active(@color: @outline-color) { .active(@color: @outline-color) {
border-color: ~`colorPalette('@{color}', 5) `; border-color: color-palette(@color, 5);
outline: 0; outline: 0;
box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%); box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
border-right-width: @border-width-base !important; border-right-width: @border-width-base !important;
@ -26,7 +26,7 @@
// == when hoverd // == when hoverd
.hover(@color: @input-hover-border-color) { .hover(@color: @input-hover-border-color) {
border-color: ~`colorPalette('@{color}', 5) `; border-color: color-palette(@color, 5);
border-right-width: @border-width-base !important; border-right-width: @border-width-base !important;
} }

37
components/style/themes/default.less
View File

@ -16,18 +16,19 @@
// Color used by default to control hover and active backgrounds and for // Color used by default to control hover and active backgrounds and for
// alert info backgrounds. // alert info backgrounds.
@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%) @primary-1: color-palette(@primary-color, 1); // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%) @primary-2: color-palette(@primary-color, 2); // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused @primary-3: color-palette(@primary-color, 3); // unused
@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused @primary-4: color-palette(@primary-color, 4); // unused
@primary-5: color( @primary-5: color-palette(
~`colorPalette('@{primary-color}', 5) ` @primary-color,
5
); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) ); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%) @primary-7: color-palette(@primary-color, 7); // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused @primary-8: color-palette(@primary-color, 8); // unused
@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused @primary-9: color-palette(@primary-color, 9); // unused
@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused @primary-10: color-palette(@primary-color, 10); // unused
// Base Scaffolding Variables // Base Scaffolding Variables
// --- // ---
@ -520,17 +521,17 @@
// Alert // Alert
// --- // ---
@alert-success-border-color: ~`colorPalette('@{success-color}', 3) `; @alert-success-border-color: color-palette(@success-color, 3);
@alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `; @alert-success-bg-color: color-palette(@success-color, 1);
@alert-success-icon-color: @success-color; @alert-success-icon-color: @success-color;
@alert-info-border-color: ~`colorPalette('@{info-color}', 3) `; @alert-info-border-color: color-palette(@info-color, 3);
@alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `; @alert-info-bg-color: color-palette(@info-color, 1);
@alert-info-icon-color: @info-color; @alert-info-icon-color: @info-color;
@alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `; @alert-warning-border-color: color-palette(@warning-color, 3);
@alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `; @alert-warning-bg-color: color-palette(@warning-color, 1);
@alert-warning-icon-color: @warning-color; @alert-warning-icon-color: @warning-color;
@alert-error-border-color: ~`colorPalette('@{error-color}', 3) `; @alert-error-border-color: color-palette(@error-color, 3);
@alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `; @alert-error-bg-color: color-palette(@error-color, 1);
@alert-error-icon-color: @error-color; @alert-error-icon-color: @error-color;
// List // List