mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 05:29:37 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

new style of danger button (#5815)

Browse Source 
* new style for danger button

* improve
This commit is contained in:
ddcat1115 2017-04-22 10:44:17 +08:00 committed by GitHub
parent b236d73348
commit 75e9e44a2f
3 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -138,7 +138,7 @@
} }
&-danger&-clicked:after { &-danger&-clicked:after {
border-color: @btn-danger-bg; border-color: @btn-danger-color;
} }
&-background-ghost { &-background-ghost {
@ -152,7 +152,7 @@
} }
&-background-ghost&-danger { &-background-ghost&-danger {
.button-variant-ghost(@btn-danger-bg); .button-variant-ghost(@btn-danger-color);
} }
} }

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

@ -51,6 +51,22 @@
.button-disabled(); .button-disabled();
} }
.button-variant-danger(@color; @background; @border) {
.button-color(@color; @background; @border);
&:hover,
&:focus {
.button-color(@btn-primary-color; @color; @color;);
}
&:active,
&.active {
.button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`;);
}
.button-disabled();
}
.button-variant-ghost(@color) { .button-variant-ghost(@color) {
.button-color(@color; transparent; @color); .button-color(@color; transparent; @color);
@ -202,7 +218,7 @@
// danger button style // danger button style
.btn-danger() { .btn-danger() {
.button-variant-primary(@btn-danger-color, @btn-danger-bg); .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
} }
// circle button: the content only contains icon // circle button: the content only contains icon

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

@ -108,8 +108,9 @@
@btn-default-bg : #fff; @btn-default-bg : #fff;
@btn-default-border : @border-color-base; @btn-default-border : @border-color-base;
@btn-danger-color : #fff; @btn-danger-color : @error-color;
@btn-danger-bg : @red-6; @btn-danger-bg : @background-color-base;
@btn-danger-border : @border-color-base;
@btn-disable-color : @disabled-color; @btn-disable-color : @disabled-color;
@btn-disable-bg : @background-color-base; @btn-disable-bg : @background-color-base;