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

feat: @theme dark, default

Browse Source
This commit is contained in:
ycjcl868 2019-12-01 22:28:35 +08:00
parent 689d9b7ada
commit 327011da77
3 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,17 +32,31 @@
&:hover, &:hover,
&:focus { &:focus {
& when (@theme = dark) {
.button-color(
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
);
}
& when (@theme = default) {
.button-color( .button-color(
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
); );
} }
}
&:active, &:active,
&.active { &.active {
& when (@theme = dark) {
.button-color(
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
);
}
& when (@theme = default) {
.button-color( .button-color(
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
); );
} }
}
.button-disabled(); .button-disabled();
} }
@ -52,18 +66,34 @@
&:hover, &:hover,
&:focus { &:focus {
& when (@theme = dark) {
.button-color(
~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7)
`
);
}
& when (@theme = default) {
.button-color( .button-color(
~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5) ~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5)
` `
); );
} }
}
&:active, &:active,
&.active { &.active {
& when (@theme = default) {
.button-color( .button-color(
~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7) ~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7)
` `
); );
} }
& when (@theme = dark) {
.button-color(
~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5)
`
);
}
}
.button-disabled(); .button-disabled();
} }
.button-variant-ghost(@color; @border: @color) { .button-variant-ghost(@color; @border: @color) {

1
components/style/themes/dark.less
View File

@ -1,5 +1,6 @@
@import './default.less'; @import './default.less';
@theme: dark;
// color palettes // color palettes
@blue-1: mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%); @blue-1: mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%);
@blue-2: mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 30%); @blue-2: mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 30%);

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

@ -1,6 +1,9 @@
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
@import '../color/colors'; @import '../color/colors';
// theme
@theme: default;
// The prefix to use on all css classes from ant. // The prefix to use on all css classes from ant.
@ant-prefix: ant; @ant-prefix: ant;