Skip to content

Commit beb4ae9

Browse files
mynetfanmynetfan
committed
fix: fixed basicButton style
修正BasicButton的样式
1 parent cc46935 commit beb4ae9

File tree

4 files changed

+127
-30
lines changed

4 files changed

+127
-30
lines changed

‎CHANGELOG.zh_CN.md

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
- 修复在`editComponentProps`中为编辑组件提供的`size`属性无效的问题
1818
- **Qrcode** 修复二维码组件在创建时未能及时绘制的问题
1919
- **BasicModal** 修复`helpMessage`属性不起作用的问题
20+
- **BasicButton** 修复按钮样式表现与 antd 官方不一致的问题
2021
- **其它** 修复`useRedo`(重新加载当前路由)会丢失路由`params`数据的问题
2122

2223
## 2.7.0(2021-08-03)

‎src/design/ant/btn.less

+101-20
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,23 @@
2020
border-color: transparent !important;
2121
}
2222

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+
//}
4040

4141
&-default {
4242
color: @button-cancel-color;
@@ -86,6 +86,10 @@
8686
color: @button-success-hover-color;
8787
border-color: transparent;
8888
}
89+
90+
&:active {
91+
color: @button-success-active-color;
92+
}
8993
}
9094

9195
&-success.ant-btn-link.ant-btn-loading,
@@ -111,6 +115,11 @@
111115
border-color: @button-success-hover-color;
112116
}
113117

118+
&:active {
119+
background-color: @button-success-active-color;
120+
border-color: @button-success-active-color;
121+
}
122+
114123
&[disabled],
115124
&[disabled]:hover {
116125
color: @white;
@@ -128,6 +137,10 @@
128137
color: @button-warn-hover-color;
129138
border-color: transparent;
130139
}
140+
141+
&:active {
142+
color: @button-warn-active-color;
143+
}
131144
}
132145

133146
&-warning:not(.ant-btn-link) {
@@ -143,6 +156,11 @@
143156
border-color: @button-warn-hover-color;
144157
}
145158

159+
&:active {
160+
background-color: @button-warn-active-color;
161+
border-color: @button-warn-active-color;
162+
}
163+
146164
&[disabled],
147165
&[disabled]:hover {
148166
color: @white;
@@ -162,6 +180,10 @@
162180
color: @button-error-hover-color;
163181
border-color: transparent;
164182
}
183+
184+
&:active {
185+
color: @button-error-active-color;
186+
}
165187
}
166188

167189
&-error:not(.ant-btn-link) {
@@ -177,6 +199,11 @@
177199
border-color: @button-error-hover-color;
178200
}
179201

202+
&:active {
203+
background-color: @button-error-active-color;
204+
border-color: @button-error-active-color;
205+
}
206+
180207
&[disabled],
181208
&[disabled]:hover {
182209
color: @white;
@@ -187,7 +214,7 @@
187214

188215
&-background-ghost.ant-btn-link,
189216
&.ant-btn-dashed:not([disabled='disabled']) {
190-
color: @text-color-call-out;
217+
// color: @text-color-call-out;
191218

192219
&:hover {
193220
color: @button-primary-color;
@@ -209,9 +236,63 @@
209236

210237
&[disabled],
211238
&[disabled]:hover {
212-
color: @button-ghost-color;
239+
color: fade(@white, 40%) !important;
213240
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;
215296
}
216297
}
217298

‎src/design/color.less

+8-4
Original file line numberDiff line numberDiff line change
@@ -108,20 +108,24 @@ html {
108108
// =================================
109109

110110
@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%);
112113

113114
@button-ghost-color: @primary-color;
114115
@button-ghost-hover-color: lighten(@primary-color, 10%);
115116
@button-ghost-hover-bg-color: #e1ebf6;
116117

117118
@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%);
119121

120122
@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%);
122125

123126
@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%);
125129

126130
@button-cancel-color: @text-color-call-out;
127131
@button-cancel-bg-color: @white;

‎src/views/demo/comp/button/index.vue

+17-6
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,23 @@
4040

4141
<div class="my-2">
4242
<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>-->
4960
</div>
5061

5162
<div class="my-2">

0 commit comments

Comments
 (0)