diff --git a/components/button/style/index.less b/components/button/style/index.less index ef3719775..b3ad44c40 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -9,6 +9,17 @@ @btn-ghost-bg: transparent; @btn-ghost-border: @border-color-base; +.btn-link() { + .button-variant-other(@primary-color, transparent, transparent); + box-shadow: none; + &:hover, + &:focus, + &:active { + border-color: transparent; + } + .button-disabled(@disabled-color; transparent; transparent); +} + // Button styles // ----------------------------- .@{btn-prefix-cls} { @@ -69,6 +80,10 @@ .btn-danger; } + &-link { + .btn-link; + } + &-round { .btn-round(@btn-prefix-cls); } @@ -162,6 +177,11 @@ .button-variant-ghost(@btn-danger-color); } + &-background-ghost&-link { + .button-variant-ghost(@primary-color; transparent); + color: @component-background; + } + &-two-chinese-chars::first-letter { letter-spacing: 0.34em; } diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index b8e0adb68..5a76a85a5 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -7,7 +7,7 @@ border-radius: @border-radius; } -.button-disabled() { +.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) { &-disabled, &.disabled, &[disabled] { @@ -16,7 +16,8 @@ &:focus, &:active, &.active { - .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border); + .button-color(@color; @background; @border); + text-shadow: none; box-shadow: none; } @@ -84,16 +85,26 @@ } .button-disabled(); } -.button-variant-ghost(@color) { - .button-color(@color; transparent; @color); +.button-variant-ghost(@color; @border: @color) { + .button-color(@color; transparent; @border); text-shadow: none; &:hover, &:focus { - .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `); + & when (@border = transparent) { + .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent); + } + & when not(@border = transparent) { + .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `); + } } &:active, &.active { - .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `); + & when (@border = transparent) { + .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent); + } + & when not(@border = transparent) { + .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `); + } } .button-disabled(); }