canrd-outside / order-erp-front · Commits

Commit 3ba8a67647d35fb9639a5af66f33d43eff493d15

Authored by 无木
1 parent beb4ae92

fix: fixed basicButton ghost style 

修正BasicButton幽灵状态的样式
Inline Side-by-side
Showing 3 changed files with 44 additions and 42 deletions
src/design/ant/btn.less
  View file @3ba8a67
... ... @@ -20,23 +20,26 @@
20 20 border-color: transparent !important;
21 21 }
22 22  
23   - //&-primary {
24   - // color: @white;
25   - // background-color: @button-primary-color;
26   - // border-width: 0;
27   - //
28   - // &:hover,
29   - // &:focus {
30   - // color: @white !important;
31   - // background-color: @button-primary-hover-color;
32   - // }
33   - //
34   - // &[disabled],
35   - // &[disabled]:hover {
36   - // color: @white;
37   - // background-color: fade(@button-primary-color, 40%);
38   - // }
39   - //}
  23 + &-primary {
  24 + color: @white;
  25 + background-color: @button-primary-color;
  26 +
  27 + &:hover,
  28 + &:focus {
  29 + color: @white;
  30 + background-color: @button-primary-hover-color;
  31 + }
  32 +
  33 + &[disabled],
  34 + &[disabled]:hover {
  35 + color: fade(@button-cancel-color, 40%);
  36 + background-color: fade(@button-cancel-bg-color, 40%);
  37 + }
  38 + }
  39 +
  40 + &-primary:not(&-background-ghost) {
  41 + border-width: 0;
  42 + }
40 43  
41 44 &-default {
42 45 color: @button-cancel-color;
... ... @@ -50,12 +53,12 @@
50 53 border-color: @button-cancel-hover-border-color;
51 54 }
52 55  
53   - //&[disabled],
54   - //&[disabled]:hover {
55   - // color: fade(@button-cancel-color, 40%);
56   - // background: fade(@button-cancel-bg-color, 40%);
57   - // border-color: fade(@button-cancel-border-color, 40%);
58   - //}
  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 + }
59 62 }
60 63  
61 64 [data-theme='light'] &.ant-btn-link.is-disabled {
... ... @@ -212,33 +215,31 @@
212 215 }
213 216 }
214 217  
215   - &-background-ghost.ant-btn-link,
216   - &.ant-btn-dashed:not([disabled='disabled']) {
217   - // color: @text-color-call-out;
218   -
219   - &:hover {
220   - color: @button-primary-color;
221   - }
  218 + &-background-ghost {
  219 + border-width: 1px;
222 220 }
223 221  
224   - &-background-ghost {
  222 + &-dashed&-background-ghost,
  223 + &-default&-background-ghost {
225 224 color: @button-ghost-color;
226 225 background-color: transparent;
227 226 border-color: @button-ghost-color;
228   - border-width: 1px;
229 227  
230 228 &:hover,
231 229 &:focus {
232   - color: @button-ghost-hover-color !important;
233   - background-color: @button-ghost-hover-bg-color;
  230 + color: @button-ghost-hover-color;
234 231 border-color: @button-ghost-hover-color;
235 232 }
236 233  
  234 + &:active {
  235 + color: @button-ghost-active-color;
  236 + border-color: @button-ghost-active-color;
  237 + }
  238 +
237 239 &[disabled],
238 240 &[disabled]:hover {
239   - color: fade(@white, 40%) !important;
240   - background-color: fade(@white, 40%);
241   - border-color: fade(@white, 40%) !important;
  241 + color: fade(@white, 40%);
  242 + border-color: fade(@white, 40%);
242 243 }
243 244 }
244 245  
... ...
src/design/color.less
  View file @3ba8a67
... ... @@ -111,9 +111,10 @@ html {
111 111 @button-primary-hover-color: lighten(@primary-color, 5%);
112 112 @button-primary-active-color: darken(@primary-color, 5%);
113 113  
114   -@button-ghost-color: @primary-color;
115   -@button-ghost-hover-color: lighten(@primary-color, 10%);
  114 +@button-ghost-color: @white;
  115 +@button-ghost-hover-color: lighten(@white, 10%);
116 116 @button-ghost-hover-bg-color: #e1ebf6;
  117 +@button-ghost-active-color: darken(@white, 10%);
117 118  
118 119 @button-success-color: @success-color;
119 120 @button-success-hover-color: lighten(@success-color, 10%);
... ...
src/views/demo/comp/button/index.vue
  View file @3ba8a67
... ... @@ -43,8 +43,8 @@
43 43 <a-button ghost color="success" class="ml-2"> 幽灵成功 </a-button>
44 44 <a-button ghost color="warn" class="ml-2"> 幽灵警告 </a-button>
45 45 <a-button ghost color="error" class="ml-2"> 幽灵错误 </a-button>
46   -
47   - <a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵warn-dashed </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 48 <div class="bg-gray-400 p-2 m-2">
49 49 <h3 class="text-white">常规幽灵按钮通常用于有色背景下</h3>
50 50 <a-button ghost type="primary" class="ml-2"> 幽灵主要 </a-button>
... ... @@ -52,8 +52,8 @@
52 52 <a-button ghost type="primary" class="ml-2" disabled> 禁用 </a-button>
53 53 <a-button ghost type="primary" class="ml-2" loading> loading </a-button>
54 54 <a-button ghost type="default" class="ml-2"> 幽灵默认 </a-button>
55   - <a-button ghost type="danger" class="ml-2"> 幽灵危险 </a-button>
56 55 </div>
  56 + <!-- antd 按钮不能同时使用ghost和link -->
57 57 <!-- <a-button ghost type="link" class="ml-2"> link </a-button>-->
58 58 <!-- <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
59 59 <!-- <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->
... ...