From e37c4111879abd80c629ee6df022a865d1e1efde Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 4 Aug 2021 18:35:37 +0800
Subject: [PATCH] style: remove duplicated css rule of ghost button (#31659)

close #31474
---
 components/button/style/index.less |  7 ++++++-
 components/button/style/mixin.less | 24 +++++++++++++-----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/components/button/style/index.less b/components/button/style/index.less
index 2ea7e01a39..f1c8bd0002 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -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 {
diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
index b02434fd3e..f34c991a87 100644
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -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;