style: fix `basicButton` style

无木
1 parent b7487675
Showing 3 changed files with 152 additions and 127 deletions
build/vite/plugin/theme.ts
src/design/ant/btn.less
src/views/demo/comp/button/index.vue
@@ -35,10 +35,11 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
             return s;
           case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
             return s;
-          case '.ant-btn-primary':
-          case '.ant-btn:hover':
-          case '.ant-btn-primary:hover':
-            return s;
+          default:
+            if (s.indexOf('.ant-btn') >= -1) {
+              // 按钮被重新定制过，需要过滤掉class防止覆盖
+              return s;
+            }
         }
         return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
       },
@@ -29,18 +29,23 @@
       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%);
-    }
+    //
+    //&[disabled],
+    //&[disabled]:hover {
+    //  color: fade(@button-cancel-color, 40%) !important;
+    //  background-color: fade(@button-cancel-bg-color, 40%) !important;
+    //  border-color: fade(@button-cancel-border-color, 40%) !important;
+    //}
   }
-  &-primary:not(&-background-ghost) {
-    border-width: 0;
+  &-primary:not(&-background-ghost):not([disabled]) {
+    color: @white;
   }
+  //&-primary:not(&-background-ghost) {
+  //  border-width: 0;
+  //}
+
   &-default {
     color: @button-cancel-color;
     background-color: @button-cancel-bg-color;
@@ -52,13 +57,13 @@
       background-color: @button-cancel-hover-bg-color;
       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%) !important;
+    //  background: fade(@button-cancel-bg-color, 40%) !important;
+    //  border-color: fade(@button-cancel-border-color, 40%) !important;
+    //}
   }
   [data-theme='light'] &.ant-btn-link.is-disabled {
@@ -105,11 +110,11 @@
     }
   }
-  &-success:not(.ant-btn-link) {
+  &-success:not(.ant-btn-link, .is-disabled) {
     color: @white;
     background-color: @button-success-color;
     border-color: @button-success-color;
-    border-width: 0;
+    //border-width: 0;
     &:hover,
     &:focus {
@@ -123,13 +128,12 @@
       border-color: @button-success-active-color;
     }
-    &[disabled],
-    &[disabled]:hover {
-      color: @white;
-      background-color: fade(@button-success-color, 40%);
-      // background-color: @button-success-disabled-color;
-      border-color: fade(@button-success-color, 40%);
-    }
+    //&[disabled],
+    //&[disabled]:hover {
+    //  color: @white;
+    //  background-color: fade(@button-success-color, 40%);
+    //  border-color: fade(@button-success-color, 40%);
+    //}
   }
   &-warning.ant-btn-link:not([disabled='disabled']) {
@@ -146,11 +150,11 @@
     }
   }
-  &-warning:not(.ant-btn-link) {
+  &-warning:not(.ant-btn-link, .is-disabled) {
     color: @white;
     background-color: @button-warn-color;
     border-color: @button-warn-color;
-    border-width: 0;
+    //border-width: 0;
     &:hover,
     &:focus {
@@ -164,15 +168,12 @@
       border-color: @button-warn-active-color;
     }
-    &[disabled],
-    &[disabled]:hover {
-      color: @white;
-      background-color: fade(@button-warn-color, 40%);
-      border-color: fade(@button-warn-color, 40%);
-
-      // background-color: @button-warn-disabled-color;
-      // border-color: @button-warn-disabled-color ;
-    }
+    //&[disabled],
+    //&[disabled]:hover {
+    //  color: @white;
+    //  background-color: fade(@button-warn-color, 40%);
+    //  border-color: fade(@button-warn-color, 40%);
+    //}
   }
   &-error.ant-btn-link:not([disabled='disabled']) {
@@ -189,11 +190,11 @@
     }
   }
-  &-error:not(.ant-btn-link) {
+  &-error:not(.ant-btn-link, .is-disabled) {
     color: @white;
     background-color: @button-error-color;
     border-color: @button-error-color;
-    border-width: 0;
+    //border-width: 0;
     &:hover,
     &:focus {
@@ -207,22 +208,29 @@
       border-color: @button-error-active-color;
     }
-    &[disabled],
-    &[disabled]:hover {
-      color: @white;
-      background-color: fade(@button-error-color, 40%);
-      border-color: fade(@button-error-color, 40%);
-    }
+    //&[disabled],
+    //&[disabled]:hover {
+    //  color: @white;
+    //  background-color: fade(@button-error-color, 40%);
+    //  border-color: fade(@button-error-color, 40%);
+    //}
   }
   &-background-ghost {
     border-width: 1px;
+    background-color: transparent !important;
+
+    &[disabled],
+    &[disabled]:hover {
+      color: fade(@white, 40%) !important;
+      background-color: transparent !important;
+      border-color: fade(@white, 40%) !important;
+    }
   }
   &-dashed&-background-ghost,
   &-default&-background-ghost {
     color: @button-ghost-color;
-    background-color: transparent;
     border-color: @button-ghost-color;
     &:hover,
@@ -238,8 +246,8 @@
     &[disabled],
     &[disabled]:hover {
-      color: fade(@white, 40%);
-      border-color: fade(@white, 40%);
+      color: fade(@white, 40%) !important;
+      border-color: fade(@white, 40%) !important;
     }
   }
@@ -261,7 +269,7 @@
     }
   }
-  &-background-ghost&-warn:not(.ant-btn-link) {
+  &-background-ghost&-warning:not(.ant-btn-link) {
     color: @button-warn-color;
     background-color: transparent;
     border-color: @button-warn-color;
@@ -4,93 +4,109 @@
     title="基础组件"
     content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
   >
-    <template #rightFooter>
-      <a-button type="primary"> 确认 </a-button>
-    </template>
+    <a-row :gutter="[20, 20]">
+      <a-col :xl="10" :lg="24">
+        <a-card title="BasicButton Color">
+          <div class="my-2">
+            <h3>success</h3>
+            <div class="py-2">
+              <a-button color="success"> 成功 </a-button>
+              <a-button color="success" class="ml-2" disabled> 禁用 </a-button>
+              <a-button color="success" class="ml-2" loading> loading </a-button>
+              <a-button color="success" type="link" class="ml-2"> link </a-button>
+              <a-button color="success" type="link" class="ml-2" loading> loading link </a-button>
+              <a-button color="success" type="link" class="ml-2" disabled> disabled link </a-button>
+            </div>
+          </div>
-    <div class="my-2">
-      <h3>success</h3>
-      <a-button color="success"> 成功 </a-button>
-      <a-button color="success" class="ml-2" disabled> 禁用 </a-button>
-      <a-button color="success" class="ml-2" loading> loading </a-button>
-      <a-button color="success" type="link" class="ml-2"> link </a-button>
-      <a-button color="success" type="link" class="ml-2" loading> loading link </a-button>
-      <a-button color="success" type="link" class="ml-2" disabled> disabled link </a-button>
-    </div>
+          <div class="my-2">
+            <h3>warning</h3>
+            <a-button color="warning"> 警告 </a-button>
+            <a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
+            <a-button color="warning" class="ml-2" loading> loading </a-button>
+            <a-button color="warning" type="link" class="ml-2"> link </a-button>
+            <a-button color="warning" type="link" class="ml-2" loading> loading link </a-button>
+            <a-button color="warning" type="link" class="ml-2" disabled> disabled link </a-button>
+          </div>
-    <div class="my-2">
-      <h3>warning</h3>
-      <a-button color="warning"> 警告 </a-button>
-      <a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
-      <a-button color="warning" class="ml-2" loading> loading </a-button>
-      <a-button color="warning" type="link" class="ml-2"> link </a-button>
-      <a-button color="warning" type="link" class="ml-2" loading> loading link </a-button>
-      <a-button color="warning" type="link" class="ml-2" disabled> disabled link </a-button>
-    </div>
+          <div class="my-2">
+            <h3>error</h3>
+            <a-button color="error"> 错误 </a-button>
+            <a-button color="error" class="ml-2" disabled> 禁用 </a-button>
+            <a-button color="error" class="ml-2" loading> loading </a-button>
+            <a-button color="error" type="link" class="ml-2"> link </a-button>
+            <a-button color="error" type="link" class="ml-2" loading> loading link </a-button>
+            <a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button>
+          </div>
-    <div class="my-2">
-      <h3>error</h3>
-      <a-button color="error"> 错误 </a-button>
-      <a-button color="error" class="ml-2" disabled> 禁用 </a-button>
-      <a-button color="error" class="ml-2" loading> loading </a-button>
-      <a-button color="error" type="link" class="ml-2"> link </a-button>
-      <a-button color="error" type="link" class="ml-2" loading> loading link </a-button>
-      <a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button>
-    </div>
+          <div class="my-2">
+            <h3>ghost</h3>
+            <a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
+            <a-button ghost color="warning" class="ml-2"> 幽灵警告 </a-button>
+            <a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
+            <a-button ghost type="dashed" color="warning" class="ml-2"> 幽灵警告dashed </a-button>
+            <a-button ghost danger class="ml-2"> 幽灵危险 </a-button>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :xl="14" :lg="24">
+        <a-card title="BasicButton Types">
+          <div class="my-2">
+            <h3>primary</h3>
+            <a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button>
+            <a-button type="primary" class="ml-2" disabled> 禁用 </a-button>
+            <a-button type="primary" class="ml-2" danger preIcon="mdi:page-next-outline">
+              危险
+            </a-button>
+            <a-button type="primary" class="ml-2" loading> loading </a-button>
+            <a-button type="link" class="ml-2"> link </a-button>
+            <a-button type="link" class="ml-2" loading> loading link </a-button>
+            <a-button type="link" class="ml-2" disabled> disabled link </a-button>
+          </div>
-    <div class="my-2">
-      <h3>ghost</h3>
-      <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"> 幽灵警告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>
-        <a-button ghost type="dashed" class="ml-2"> 幽灵dashed </a-button>
-        <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>
-      </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>-->
-    </div>
+          <div class="my-2">
+            <h3>default</h3>
+            <a-button type="default"> 默认 </a-button>
+            <a-button type="default" class="ml-2" disabled> 禁用 </a-button>
+            <a-button type="default" class="ml-2" danger> 危险 </a-button>
+            <a-button type="default" class="ml-2" loading> loading </a-button>
+            <a-button type="link" class="ml-2"> link </a-button>
+            <a-button type="link" class="ml-2" loading> loading link </a-button>
+            <a-button type="link" class="ml-2" disabled> disabled link </a-button>
+          </div>
-    <div class="my-2">
-      <h3>primary</h3>
-      <a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button>
-      <a-button type="primary" class="ml-2" disabled> 禁用 </a-button>
-      <a-button type="primary" class="ml-2" loading> loading </a-button>
-      <a-button type="link" class="ml-2"> link </a-button>
-      <a-button type="link" class="ml-2" loading> loading link </a-button>
-      <a-button type="link" class="ml-2" disabled> disabled link </a-button>
-    </div>
+          <div class="my-2">
+            <h3>dashed</h3>
+            <a-button type="dashed"> dashed </a-button>
+            <a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
+            <a-button type="dashed" class="ml-2" danger> 危险 </a-button>
+            <a-button type="dashed" class="ml-2" loading> loading </a-button>
+          </div>
-    <div class="my-2">
-      <h3>default</h3>
-      <a-button type="default"> 默认 </a-button>
-      <a-button type="default" class="ml-2" disabled> 禁用 </a-button>
-      <a-button type="default" class="ml-2" loading> loading </a-button>
-      <a-button type="link" class="ml-2"> link </a-button>
-      <a-button type="link" class="ml-2" loading> loading link </a-button>
-      <a-button type="link" class="ml-2" disabled> disabled link </a-button>
-    </div>
-
-    <div class="my-2">
-      <h3>dashed</h3>
-      <a-button type="dashed"> dashed </a-button>
-      <a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
-      <a-button type="dashed" class="ml-2" loading> loading </a-button>
-    </div>
+          <div class="my-2">
+            <h3>ghost 常规幽灵按钮通常用于有色背景下</h3>
+            <div class="bg-gray-400 py-2">
+              <a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
+              <a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
+              <a-button ghost type="dashed" class="ml-2"> 幽灵dashed </a-button>
+              <a-button ghost type="primary" class="ml-2" disabled> 禁用 </a-button>
+              <a-button ghost type="primary" class="ml-2" loading> loading </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>-->
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
   </PageWrapper>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { PageWrapper } from '/@/components/Page';
+  import { Card, Row, Col } from 'ant-design-vue';
   export default defineComponent({
-    components: { PageWrapper },
+    components: { PageWrapper, ACard: Card, ARow: Row, ACol: Col },
   });
 </script>