canrd-outside / order-erp-front · Commits

Commit beb4ae92c190780bbd3bc6bc7547d52e2ccf8cf1

Authored by 无木
1 parent cc46935a

fix: fixed basicButton style 

修正BasicButton的样式
Inline Side-by-side
Showing 4 changed files with 127 additions and 30 deletions
CHANGELOG.zh_CN.md
  View file @beb4ae9
... ... @@ -17,6 +17,7 @@
17 17 - 修复在`editComponentProps`中为编辑组件提供的`size`属性无效的问题
18 18 - **Qrcode** 修复二维码组件在创建时未能及时绘制的问题
19 19 - **BasicModal** 修复`helpMessage`属性不起作用的问题
  20 +- **BasicButton** 修复按钮样式表现与 antd 官方不一致的问题
20 21 - **其它** 修复`useRedo`(重新加载当前路由)会丢失路由`params`数据的问题
21 22  
22 23 ## 2.7.0(2021-08-03)
... ...
src/design/ant/btn.less
  View file @beb4ae9
... ... @@ -20,23 +20,23 @@
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 + // 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 + //}
40 40  
41 41 &-default {
42 42 color: @button-cancel-color;
... ... @@ -86,6 +86,10 @@
86 86 color: @button-success-hover-color;
87 87 border-color: transparent;
88 88 }
  89 +
  90 + &:active {
  91 + color: @button-success-active-color;
  92 + }
89 93 }
90 94  
91 95 &-success.ant-btn-link.ant-btn-loading,
... ... @@ -111,6 +115,11 @@
111 115 border-color: @button-success-hover-color;
112 116 }
113 117  
  118 + &:active {
  119 + background-color: @button-success-active-color;
  120 + border-color: @button-success-active-color;
  121 + }
  122 +
114 123 &[disabled],
115 124 &[disabled]:hover {
116 125 color: @white;
... ... @@ -128,6 +137,10 @@
128 137 color: @button-warn-hover-color;
129 138 border-color: transparent;
130 139 }
  140 +
  141 + &:active {
  142 + color: @button-warn-active-color;
  143 + }
131 144 }
132 145  
133 146 &-warning:not(.ant-btn-link) {
... ... @@ -143,6 +156,11 @@
143 156 border-color: @button-warn-hover-color;
144 157 }
145 158  
  159 + &:active {
  160 + background-color: @button-warn-active-color;
  161 + border-color: @button-warn-active-color;
  162 + }
  163 +
146 164 &[disabled],
147 165 &[disabled]:hover {
148 166 color: @white;
... ... @@ -162,6 +180,10 @@
162 180 color: @button-error-hover-color;
163 181 border-color: transparent;
164 182 }
  183 +
  184 + &:active {
  185 + color: @button-error-active-color;
  186 + }
165 187 }
166 188  
167 189 &-error:not(.ant-btn-link) {
... ... @@ -177,6 +199,11 @@
177 199 border-color: @button-error-hover-color;
178 200 }
179 201  
  202 + &:active {
  203 + background-color: @button-error-active-color;
  204 + border-color: @button-error-active-color;
  205 + }
  206 +
180 207 &[disabled],
181 208 &[disabled]:hover {
182 209 color: @white;
... ... @@ -187,7 +214,7 @@
187 214  
188 215 &-background-ghost.ant-btn-link,
189 216 &.ant-btn-dashed:not([disabled='disabled']) {
190   - color: @text-color-call-out;
  217 + // color: @text-color-call-out;
191 218  
192 219 &:hover {
193 220 color: @button-primary-color;
... ... @@ -209,9 +236,63 @@
209 236  
210 237 &[disabled],
211 238 &[disabled]:hover {
212   - color: @button-ghost-color;
  239 + color: fade(@white, 40%) !important;
213 240 background-color: fade(@white, 40%);
214   - border-color: fade(@button-ghost-color, 40%);
  241 + border-color: fade(@white, 40%) !important;
  242 + }
  243 + }
  244 +
  245 + &-background-ghost&-success:not(.ant-btn-link) {
  246 + color: @button-success-color;
  247 + background-color: transparent;
  248 + border-color: @button-success-color;
  249 + border-width: 1px;
  250 +
  251 + &:hover,
  252 + &:focus {
  253 + color: @button-success-hover-color !important;
  254 + border-color: @button-success-hover-color;
  255 + }
  256 +
  257 + &:active {
  258 + color: @button-success-active-color;
  259 + border-color: @button-success-active-color;
  260 + }
  261 + }
  262 +
  263 + &-background-ghost&-warn:not(.ant-btn-link) {
  264 + color: @button-warn-color;
  265 + background-color: transparent;
  266 + border-color: @button-warn-color;
  267 + border-width: 1px;
  268 +
  269 + &:hover,
  270 + &:focus {
  271 + color: @button-warn-hover-color !important;
  272 + border-color: @button-warn-hover-color;
  273 + }
  274 +
  275 + &:active {
  276 + color: @button-warn-active-color;
  277 + border-color: @button-warn-active-color;
  278 + }
  279 + }
  280 +
  281 + &-background-ghost&-error:not(.ant-btn-link) {
  282 + color: @button-error-color;
  283 + background-color: transparent;
  284 + border-color: @button-error-color;
  285 + border-width: 1px;
  286 +
  287 + &:hover,
  288 + &:focus {
  289 + color: @button-error-hover-color !important;
  290 + border-color: @button-error-hover-color;
  291 + }
  292 +
  293 + &:active {
  294 + color: @button-error-active-color;
  295 + border-color: @button-error-active-color;
215 296 }
216 297 }
217 298  
... ...
src/design/color.less
  View file @beb4ae9
... ... @@ -108,20 +108,24 @@ html {
108 108 // =================================
109 109  
110 110 @button-primary-color: @primary-color;
111   -@button-primary-hover-color: darken(@primary-color, 5%);
  111 +@button-primary-hover-color: lighten(@primary-color, 5%);
  112 +@button-primary-active-color: darken(@primary-color, 5%);
112 113  
113 114 @button-ghost-color: @primary-color;
114 115 @button-ghost-hover-color: lighten(@primary-color, 10%);
115 116 @button-ghost-hover-bg-color: #e1ebf6;
116 117  
117 118 @button-success-color: @success-color;
118   -@button-success-hover-color: darken(@success-color, 10%);
  119 +@button-success-hover-color: lighten(@success-color, 10%);
  120 +@button-success-active-color: darken(@success-color, 10%);
119 121  
120 122 @button-warn-color: @warning-color;
121   -@button-warn-hover-color: darken(@warning-color, 10%);
  123 +@button-warn-hover-color: lighten(@warning-color, 10%);
  124 +@button-warn-active-color: darken(@warning-color, 10%);
122 125  
123 126 @button-error-color: @error-color;
124   -@button-error-hover-color: darken(@error-color, 10%);
  127 +@button-error-hover-color: lighten(@error-color, 10%);
  128 +@button-error-active-color: darken(@error-color, 10%);
125 129  
126 130 @button-cancel-color: @text-color-call-out;
127 131 @button-cancel-bg-color: @white;
... ...
src/views/demo/comp/button/index.vue
  View file @beb4ae9
... ... @@ -40,12 +40,23 @@
40 40  
41 41 <div class="my-2">
42 42 <h3>ghost</h3>
43   - <a-button ghost> 幽灵 </a-button>
44   - <a-button ghost class="ml-2" disabled> 禁用 </a-button>
45   - <a-button ghost class="ml-2" loading> loading </a-button>
46   - <a-button ghost type="link" class="ml-2"> link </a-button>
47   - <a-button ghost type="link" class="ml-2" loading> loading link </a-button>
48   - <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>
  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 +
  47 + <a-button ghost type="dashed" color="warn" class="ml-2"> 幽灵warn-dashed </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 + <a-button ghost type="danger" class="ml-2"> 幽灵危险 </a-button>
  56 + </div>
  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>-->
49 60 </div>
50 61  
51 62 <div class="my-2">
... ...