canrd-outside / order-erp-front · Commits

Commit c420174c1dff8f57cc421ff2882da9800a71d159

Authored by 无木
1 parent b7487675

style: fix `basicButton` style

Inline Side-by-side
Showing 3 changed files with 152 additions and 127 deletions
build/vite/plugin/theme.ts
  View file @c420174
... ... @@ -35,10 +35,11 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
35 35 return s;
36 36 case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
37 37 return s;
38   - case '.ant-btn-primary':
39   - case '.ant-btn:hover':
40   - case '.ant-btn-primary:hover':
41   - return s;
  38 + default:
  39 + if (s.indexOf('.ant-btn') >= -1) {
  40 + // 按钮被重新定制过，需要过滤掉class防止覆盖
  41 + return s;
  42 + }
42 43 }
43 44 return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
44 45 },
... ...
src/design/ant/btn.less
  View file @c420174
... ... @@ -29,18 +29,23 @@
29 29 color: @white;
30 30 background-color: @button-primary-hover-color;
31 31 }
32   -
33   - &[disabled],
34   - &[disabled]:hover {
35   - color: fade(@button-cancel-color, 40%);
36   - background-color: fade(@button-cancel-bg-color, 40%);
37   - }
  32 + //
  33 + //&[disabled],
  34 + //&[disabled]:hover {
  35 + // color: fade(@button-cancel-color, 40%) !important;
  36 + // background-color: fade(@button-cancel-bg-color, 40%) !important;
  37 + // border-color: fade(@button-cancel-border-color, 40%) !important;
  38 + //}
38 39 }
39 40  
40   - &-primary:not(&-background-ghost) {
41   - border-width: 0;
  41 + &-primary:not(&-background-ghost):not([disabled]) {
  42 + color: @white;
42 43 }
43 44  
  45 + //&-primary:not(&-background-ghost) {
  46 + // border-width: 0;
  47 + //}
  48 +
44 49 &-default {
45 50 color: @button-cancel-color;
46 51 background-color: @button-cancel-bg-color;
... ... @@ -52,13 +57,13 @@
52 57 background-color: @button-cancel-hover-bg-color;
53 58 border-color: @button-cancel-hover-border-color;
54 59 }
55   -
56   - &[disabled],
57   - &[disabled]:hover {
58   - color: fade(@button-cancel-color, 40%);
59   - background: fade(@button-cancel-bg-color, 40%);
60   - border-color: fade(@button-cancel-border-color, 40%);
61   - }
  60 + //
  61 + //&[disabled],
  62 + //&[disabled]:hover {
  63 + // color: fade(@button-cancel-color, 40%) !important;
  64 + // background: fade(@button-cancel-bg-color, 40%) !important;
  65 + // border-color: fade(@button-cancel-border-color, 40%) !important;
  66 + //}
62 67 }
63 68  
64 69 [data-theme='light'] &.ant-btn-link.is-disabled {
... ... @@ -105,11 +110,11 @@
105 110 }
106 111 }
107 112  
108   - &-success:not(.ant-btn-link) {
  113 + &-success:not(.ant-btn-link, .is-disabled) {
109 114 color: @white;
110 115 background-color: @button-success-color;
111 116 border-color: @button-success-color;
112   - border-width: 0;
  117 + //border-width: 0;
113 118  
114 119 &:hover,
115 120 &:focus {
... ... @@ -123,13 +128,12 @@
123 128 border-color: @button-success-active-color;
124 129 }
125 130  
126   - &[disabled],
127   - &[disabled]:hover {
128   - color: @white;
129   - background-color: fade(@button-success-color, 40%);
130   - // background-color: @button-success-disabled-color;
131   - border-color: fade(@button-success-color, 40%);
132   - }
  131 + //&[disabled],
  132 + //&[disabled]:hover {
  133 + // color: @white;
  134 + // background-color: fade(@button-success-color, 40%);
  135 + // border-color: fade(@button-success-color, 40%);
  136 + //}
133 137 }
134 138  
135 139 &-warning.ant-btn-link:not([disabled='disabled']) {
... ... @@ -146,11 +150,11 @@
146 150 }
147 151 }
148 152  
149   - &-warning:not(.ant-btn-link) {
  153 + &-warning:not(.ant-btn-link, .is-disabled) {
150 154 color: @white;
151 155 background-color: @button-warn-color;
152 156 border-color: @button-warn-color;
153   - border-width: 0;
  157 + //border-width: 0;
154 158  
155 159 &:hover,
156 160 &:focus {
... ... @@ -164,15 +168,12 @@
164 168 border-color: @button-warn-active-color;
165 169 }
166 170  
167   - &[disabled],
168   - &[disabled]:hover {
169   - color: @white;
170   - background-color: fade(@button-warn-color, 40%);
171   - border-color: fade(@button-warn-color, 40%);
172   -
173   - // background-color: @button-warn-disabled-color;
174   - // border-color: @button-warn-disabled-color ;
175   - }
  171 + //&[disabled],
  172 + //&[disabled]:hover {
  173 + // color: @white;
  174 + // background-color: fade(@button-warn-color, 40%);
  175 + // border-color: fade(@button-warn-color, 40%);
  176 + //}
176 177 }
177 178  
178 179 &-error.ant-btn-link:not([disabled='disabled']) {
... ... @@ -189,11 +190,11 @@
189 190 }
190 191 }
191 192  
192   - &-error:not(.ant-btn-link) {
  193 + &-error:not(.ant-btn-link, .is-disabled) {
193 194 color: @white;
194 195 background-color: @button-error-color;
195 196 border-color: @button-error-color;
196   - border-width: 0;
  197 + //border-width: 0;
197 198  
198 199 &:hover,
199 200 &:focus {
... ... @@ -207,22 +208,29 @@
207 208 border-color: @button-error-active-color;
208 209 }
209 210  
210   - &[disabled],
211   - &[disabled]:hover {
212   - color: @white;
213   - background-color: fade(@button-error-color, 40%);
214   - border-color: fade(@button-error-color, 40%);
215   - }
  211 + //&[disabled],
  212 + //&[disabled]:hover {
  213 + // color: @white;
  214 + // background-color: fade(@button-error-color, 40%);
  215 + // border-color: fade(@button-error-color, 40%);
  216 + //}
216 217 }
217 218  
218 219 &-background-ghost {
219 220 border-width: 1px;
  221 + background-color: transparent !important;
  222 +
  223 + &[disabled],
  224 + &[disabled]:hover {
  225 + color: fade(@white, 40%) !important;
  226 + background-color: transparent !important;
  227 + border-color: fade(@white, 40%) !important;
  228 + }
220 229 }
221 230  
222 231 &-dashed&-background-ghost,
223 232 &-default&-background-ghost {
224 233 color: @button-ghost-color;
225   - background-color: transparent;
226 234 border-color: @button-ghost-color;
227 235  
228 236 &:hover,
... ... @@ -238,8 +246,8 @@
238 246  
239 247 &[disabled],
240 248 &[disabled]:hover {
241   - color: fade(@white, 40%);
242   - border-color: fade(@white, 40%);
  249 + color: fade(@white, 40%) !important;
  250 + border-color: fade(@white, 40%) !important;
243 251 }
244 252 }
245 253  
... ... @@ -261,7 +269,7 @@
261 269 }
262 270 }
263 271  
264   - &-background-ghost&-warn:not(.ant-btn-link) {
  272 + &-background-ghost&-warning:not(.ant-btn-link) {
265 273 color: @button-warn-color;
266 274 background-color: transparent;
267 275 border-color: @button-warn-color;
... ...
src/views/demo/comp/button/index.vue
  View file @c420174
... ... @@ -4,93 +4,109 @@
4 4 title="基础组件"
5 5 content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
6 6 >
7   - <template #rightFooter>
8   - <a-button type="primary"> 确认 </a-button>
9   - </template>
  7 + <a-row :gutter="[20, 20]">
  8 + <a-col :xl="10" :lg="24">
  9 + <a-card title="BasicButton Color">
  10 + <div class="my-2">
  11 + <h3>success</h3>
  12 + <div class="py-2">
  13 + <a-button color="success"> 成功 </a-button>
  14 + <a-button color="success" class="ml-2" disabled> 禁用 </a-button>
  15 + <a-button color="success" class="ml-2" loading> loading </a-button>
  16 + <a-button color="success" type="link" class="ml-2"> link </a-button>
  17 + <a-button color="success" type="link" class="ml-2" loading> loading link </a-button>
  18 + <a-button color="success" type="link" class="ml-2" disabled> disabled link </a-button>
  19 + </div>
  20 + </div>
10 21  
11   - <div class="my-2">
12   - <h3>success</h3>
13   - <a-button color="success"> 成功 </a-button>
14   - <a-button color="success" class="ml-2" disabled> 禁用 </a-button>
15   - <a-button color="success" class="ml-2" loading> loading </a-button>
16   - <a-button color="success" type="link" class="ml-2"> link </a-button>
17   - <a-button color="success" type="link" class="ml-2" loading> loading link </a-button>
18   - <a-button color="success" type="link" class="ml-2" disabled> disabled link </a-button>
19   - </div>
  22 + <div class="my-2">
  23 + <h3>warning</h3>
  24 + <a-button color="warning"> 警告 </a-button>
  25 + <a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
  26 + <a-button color="warning" class="ml-2" loading> loading </a-button>
  27 + <a-button color="warning" type="link" class="ml-2"> link </a-button>
  28 + <a-button color="warning" type="link" class="ml-2" loading> loading link </a-button>
  29 + <a-button color="warning" type="link" class="ml-2" disabled> disabled link </a-button>
  30 + </div>
20 31  
21   - <div class="my-2">
22   - <h3>warning</h3>
23   - <a-button color="warning"> 警告 </a-button>
24   - <a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
25   - <a-button color="warning" class="ml-2" loading> loading </a-button>
26   - <a-button color="warning" type="link" class="ml-2"> link </a-button>
27   - <a-button color="warning" type="link" class="ml-2" loading> loading link </a-button>
28   - <a-button color="warning" type="link" class="ml-2" disabled> disabled link </a-button>
29   - </div>
  32 + <div class="my-2">
  33 + <h3>error</h3>
  34 + <a-button color="error"> 错误 </a-button>
  35 + <a-button color="error" class="ml-2" disabled> 禁用 </a-button>
  36 + <a-button color="error" class="ml-2" loading> loading </a-button>
  37 + <a-button color="error" type="link" class="ml-2"> link </a-button>
  38 + <a-button color="error" type="link" class="ml-2" loading> loading link </a-button>
  39 + <a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button>
  40 + </div>
30 41  
31   - <div class="my-2">
32   - <h3>error</h3>
33   - <a-button color="error"> 错误 </a-button>
34   - <a-button color="error" class="ml-2" disabled> 禁用 </a-button>
35   - <a-button color="error" class="ml-2" loading> loading </a-button>
36   - <a-button color="error" type="link" class="ml-2"> link </a-button>
37   - <a-button color="error" type="link" class="ml-2" loading> loading link </a-button>
38   - <a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button>
39   - </div>
  42 + <div class="my-2">
  43 + <h3>ghost</h3>
  44 + <a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
  45 + <a-button ghost color="warning" class="ml-2"> 幽灵警告 </a-button>
  46 + <a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
  47 + <a-button ghost type="dashed" color="warning" class="ml-2"> 幽灵警告dashed </a-button>
  48 + <a-button ghost danger class="ml-2"> 幽灵危险 </a-button>
  49 + </div>
  50 + </a-card>
  51 + </a-col>
  52 + <a-col :xl="14" :lg="24">
  53 + <a-card title="BasicButton Types">
  54 + <div class="my-2">
  55 + <h3>primary</h3>
  56 + <a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button>
  57 + <a-button type="primary" class="ml-2" disabled> 禁用 </a-button>
  58 + <a-button type="primary" class="ml-2" danger preIcon="mdi:page-next-outline">
  59 + 危险
  60 + </a-button>
  61 + <a-button type="primary" class="ml-2" loading> loading </a-button>
  62 + <a-button type="link" class="ml-2"> link </a-button>
  63 + <a-button type="link" class="ml-2" loading> loading link </a-button>
  64 + <a-button type="link" class="ml-2" disabled> disabled link </a-button>
  65 + </div>
40 66  
41   - <div class="my-2">
42   - <h3>ghost</h3>
43   - <a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
44   - <a-button ghost color="warn" class="ml-2"> 幽灵警告 </a-button>
45   - <a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
46   - <a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵警告dashed </a-button>
47   - <a-button ghost type="danger" class="ml-2"> 幽灵危险 </a-button>
48   - <div class="bg-gray-400 p-2 m-2">
49   - <h3 class="text-white">常规幽灵按钮通常用于有色背景下</h3>
50   - <a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
51   - <a-button ghost type="dashed" class="ml-2"> 幽灵dashed </a-button>
52   - <a-button ghost type="primary" class="ml-2" disabled> 禁用 </a-button>
53   - <a-button ghost type="primary" class="ml-2" loading> loading </a-button>
54   - <a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
55   - </div>
56   - <!-- antd 按钮不能同时使用ghost和link -->
57   - <!-- <a-button ghost type="link" class="ml-2"> link </a-button>-->
58   - <!-- <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
59   - <!-- <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->
60   - </div>
  67 + <div class="my-2">
  68 + <h3>default</h3>
  69 + <a-button type="default"> 默认 </a-button>
  70 + <a-button type="default" class="ml-2" disabled> 禁用 </a-button>
  71 + <a-button type="default" class="ml-2" danger> 危险 </a-button>
  72 + <a-button type="default" class="ml-2" loading> loading </a-button>
  73 + <a-button type="link" class="ml-2"> link </a-button>
  74 + <a-button type="link" class="ml-2" loading> loading link </a-button>
  75 + <a-button type="link" class="ml-2" disabled> disabled link </a-button>
  76 + </div>
61 77  
62   - <div class="my-2">
63   - <h3>primary</h3>
64   - <a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button>
65   - <a-button type="primary" class="ml-2" disabled> 禁用 </a-button>
66   - <a-button type="primary" class="ml-2" loading> loading </a-button>
67   - <a-button type="link" class="ml-2"> link </a-button>
68   - <a-button type="link" class="ml-2" loading> loading link </a-button>
69   - <a-button type="link" class="ml-2" disabled> disabled link </a-button>
70   - </div>
  78 + <div class="my-2">
  79 + <h3>dashed</h3>
  80 + <a-button type="dashed"> dashed </a-button>
  81 + <a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
  82 + <a-button type="dashed" class="ml-2" danger> 危险 </a-button>
  83 + <a-button type="dashed" class="ml-2" loading> loading </a-button>
  84 + </div>
71 85  
72   - <div class="my-2">
73   - <h3>default</h3>
74   - <a-button type="default"> 默认 </a-button>
75   - <a-button type="default" class="ml-2" disabled> 禁用 </a-button>
76   - <a-button type="default" class="ml-2" loading> loading </a-button>
77   - <a-button type="link" class="ml-2"> link </a-button>
78   - <a-button type="link" class="ml-2" loading> loading link </a-button>
79   - <a-button type="link" class="ml-2" disabled> disabled link </a-button>
80   - </div>
81   -
82   - <div class="my-2">
83   - <h3>dashed</h3>
84   - <a-button type="dashed"> dashed </a-button>
85   - <a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
86   - <a-button type="dashed" class="ml-2" loading> loading </a-button>
87   - </div>
  86 + <div class="my-2">
  87 + <h3>ghost 常规幽灵按钮通常用于有色背景下</h3>
  88 + <div class="bg-gray-400 py-2">
  89 + <a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
  90 + <a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
  91 + <a-button ghost type="dashed" class="ml-2"> 幽灵dashed </a-button>
  92 + <a-button ghost type="primary" class="ml-2" disabled> 禁用 </a-button>
  93 + <a-button ghost type="primary" class="ml-2" loading> loading </a-button>
  94 + </div>
  95 + <!-- antd 按钮不能同时使用ghost和link -->
  96 + <!-- <a-button ghost type="link" class="ml-2"> link </a-button>-->
  97 + <!-- <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
  98 + <!-- <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->
  99 + </div>
  100 + </a-card>
  101 + </a-col>
  102 + </a-row>
88 103 </PageWrapper>
89 104 </template>
90 105 <script lang="ts">
91 106 import { defineComponent } from 'vue';
92 107 import { PageWrapper } from '/@/components/Page';
  108 + import { Card, Row, Col } from 'ant-design-vue';
93 109 export default defineComponent({
94   - components: { PageWrapper },
  110 + components: { PageWrapper, ACard: Card, ARow: Row, ACol: Col },
95 111 });
96 112 </script>
... ...