style: remove duplicated css rule of ghost button (#31659)

close #31474
This commit is contained in:
afc163 2021-08-04 18:35:37 +08:00 committed by GitHub
parent 3da2cca529
commit e37c411187
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 12 deletions

View File

@ -192,8 +192,13 @@
&-background-ghost {
color: @btn-default-ghost-color;
background: @btn-default-ghost-bg !important;
border-color: @btn-default-ghost-border;
&,
&:hover,
&:active,
&:focus {
background: @btn-default-ghost-bg;
}
}
&-background-ghost&-primary {

View File

@ -90,27 +90,27 @@
.button-disabled();
}
.button-variant-ghost(@color; @border: @color) {
.button-color(@color; transparent; @border);
.button-color(@color; null; @border);
text-shadow: none;
&:hover,
&:focus {
& when (@border = transparent) {
& when (@theme = dark) {
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
.button-color(~`colorPalette('@{color}', 7) `; null; transparent);
}
& when not (@theme = dark) {
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
.button-color(~`colorPalette('@{color}', 5) `; null; transparent);
}
}
& when not (@border = transparent) {
& when (@theme = dark) {
.button-color(
~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
);
}
& when not (@theme = dark) {
.button-color(
~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
);
}
}
@ -118,21 +118,21 @@
&:active {
& when (@border = transparent) {
& when (@theme = dark) {
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
.button-color(~`colorPalette('@{color}', 5) `; null; transparent);
}
& when not (@theme = dark) {
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
.button-color(~`colorPalette('@{color}', 7) `; null; transparent);
}
}
& when not(@border = transparent) {
& when not (@border = transparent) {
& when (@theme = dark) {
.button-color(
~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `
~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
);
}
& when not (@theme = dark) {
.button-color(
~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `
~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
);
}
}
@ -141,8 +141,10 @@
}
.button-color(@color; @background; @border) {
color: @color;
background: @background;
border-color: @border; // a inside Button which only work in Chrome
& when not(@background = null) {
background: @background;
}
// http://stackoverflow.com/a/17253457
> a:only-child {
color: currentColor;