fix: fixed basicButton ghost style

修正BasicButton幽灵状态的样式

fix: fixed basicButton ghost style
修正BasicButton幽灵状态的样式
无木
1 parent beb4ae92
Showing 3 changed files with 44 additions and 42 deletions
src/design/ant/btn.less
src/design/color.less
src/views/demo/comp/button/index.vue
@@ -20,23 +20,26 @@
     border-color: transparent !important;
   }
-  //&-primary {
-  //  color: @white;
-  //  background-color: @button-primary-color;
-  //  border-width: 0;
-  //
-  //  &:hover,
-  //  &:focus {
-  //    color: @white !important;
-  //    background-color: @button-primary-hover-color;
-  //  }
-  //
-  //  &[disabled],
-  //  &[disabled]:hover {
-  //    color: @white;
-  //    background-color: fade(@button-primary-color, 40%);
-  //  }
-  //}
+  &-primary {
+    color: @white;
+    background-color: @button-primary-color;
+
+    &:hover,
+    &:focus {
+      color: @white;
+      background-color: @button-primary-hover-color;
+    }
+
+    &[disabled],
+    &[disabled]:hover {
+      color: fade(@button-cancel-color, 40%);
+      background-color: fade(@button-cancel-bg-color, 40%);
+    }
+  }
+
+  &-primary:not(&-background-ghost) {
+    border-width: 0;
+  }
   &-default {
     color: @button-cancel-color;
@@ -50,12 +53,12 @@
       border-color: @button-cancel-hover-border-color;
     }
-    //&[disabled],
-    //&[disabled]:hover {
-    //  color: fade(@button-cancel-color, 40%);
-    //  background: fade(@button-cancel-bg-color, 40%);
-    //  border-color: fade(@button-cancel-border-color, 40%);
-    //}
+    &[disabled],
+    &[disabled]:hover {
+      color: fade(@button-cancel-color, 40%);
+      background: fade(@button-cancel-bg-color, 40%);
+      border-color: fade(@button-cancel-border-color, 40%);
+    }
   }
   [data-theme='light'] &.ant-btn-link.is-disabled {
@@ -212,33 +215,31 @@
     }
   }
-  &-background-ghost.ant-btn-link,
-  &.ant-btn-dashed:not([disabled='disabled']) {
-    // color: @text-color-call-out;
-
-    &:hover {
-      color: @button-primary-color;
-    }
+  &-background-ghost {
+    border-width: 1px;
   }
-  &-background-ghost {
+  &-dashed&-background-ghost,
+  &-default&-background-ghost {
     color: @button-ghost-color;
     background-color: transparent;
     border-color: @button-ghost-color;
-    border-width: 1px;
     &:hover,
     &:focus {
-      color: @button-ghost-hover-color !important;
-      background-color: @button-ghost-hover-bg-color;
+      color: @button-ghost-hover-color;
       border-color: @button-ghost-hover-color;
     }
+    &:active {
+      color: @button-ghost-active-color;
+      border-color: @button-ghost-active-color;
+    }
+
     &[disabled],
     &[disabled]:hover {
-      color: fade(@white, 40%) !important;
-      background-color: fade(@white, 40%);
-      border-color: fade(@white, 40%) !important;
+      color: fade(@white, 40%);
+      border-color: fade(@white, 40%);
     }
   }
@@ -111,9 +111,10 @@ html {
 @button-primary-hover-color: lighten(@primary-color, 5%);
 @button-primary-active-color: darken(@primary-color, 5%);
-@button-ghost-color: @primary-color;
-@button-ghost-hover-color: lighten(@primary-color, 10%);
+@button-ghost-color: @white;
+@button-ghost-hover-color: lighten(@white, 10%);
 @button-ghost-hover-bg-color: #e1ebf6;
+@button-ghost-active-color: darken(@white, 10%);
 @button-success-color: @success-color;
 @button-success-hover-color: lighten(@success-color, 10%);
@@ -43,8 +43,8 @@
       <a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
       <a-button ghost color="warn" class="ml-2"> 幽灵警告 </a-button>
       <a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
-
-      <a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵warn-dashed </a-button>
+      <a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵警告dashed </a-button>
+      <a-button ghost type="danger" class="ml-2"> 幽灵危险 </a-button>
       <div class="bg-gray-400 p-2 m-2">
         <h3 class="text-white">常规幽灵按钮通常用于有色背景下</h3>
         <a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
@@ -52,8 +52,8 @@
         <a-button ghost type="primary" class="ml-2" disabled> 禁用 </a-button>
         <a-button ghost type="primary" class="ml-2" loading> loading </a-button>
         <a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
-        <a-button ghost type="danger" class="ml-2"> 幽灵危险 </a-button>
       </div>
+      <!-- antd 按钮不能同时使用ghost和link -->
       <!--      <a-button ghost type="link" class="ml-2"> link </a-button>-->
       <!--      <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
       <!--      <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->