Skip to content

Commit 3b2e45d

Browse files
xiaoyatongxiaoyatong
xiaoyatong
and
xiaoyatong
authored
fix: button css 简化 和 Demo 调整 (#2375)
* fix: button css * fix: button version --------- Co-authored-by: xiaoyatong <[email protected]>
1 parent 18c1a1d commit 3b2e45d

File tree

16 files changed

+361
-361
lines changed

16 files changed

+361
-361
lines changed

‎src/packages/button/button.harmony.css‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
position: relative;
33
display: flex;
44
display: inline-block;
5-
flex-direction: row;
65
width: auto;
6+
flex-direction: row;
77
justify-content: center;
88
align-items: center;
99
flex-shrink: 0;
@@ -22,9 +22,9 @@
2222
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
2323
color: #1a1a1a;
2424
background: transparent;
25-
width: 100px;
2625
}
2726
.nut-button-text {
27+
color: #1a1a1a;
2828
margin-left: 4px;
2929
}
3030
.nut-button-text.right {
@@ -61,6 +61,9 @@
6161
flex-direction: row;
6262
align-items: center;
6363
justify-content: center;
64+
/* #ifndef rn harmony */
65+
background: initial;
66+
/* #endif */
6467
}
6568
.nut-button-wrap .nut-icon {
6669
font-size: 14px;
@@ -105,19 +108,19 @@
105108
.nut-button-xlarge {
106109
height: 48px;
107110
padding: 0px 24px;
108-
font-size: 20px;
109-
font-weight: 500;
111+
font-size: 24px;
112+
font-weight: 600;
110113
}
111114
.nut-button-xlarge .nut-icon {
112-
font-size: 20px;
113-
width: 20px;
114-
height: 20px;
115+
font-size: 24px;
116+
width: 24px;
117+
height: 24px;
115118
}
116119
.nut-button-large {
117120
height: 40px;
118121
padding: 0px 16px;
119122
font-size: 16px;
120-
font-weight: 500;
123+
font-weight: 600;
121124
}
122125
.nut-button-large .nut-icon {
123126
font-size: 16px;
@@ -146,7 +149,7 @@
146149
}
147150
.nut-button-primary {
148151
color: #ffffff;
149-
background: #fa2c19;
152+
background: #ff0f23;
150153
background-origin: border-box;
151154
border: 1px solid transparent;
152155
}
@@ -179,6 +182,9 @@
179182
color: #ffadbe;
180183
border-color: #ffadbe;
181184
}
185+
.nut-button-primary-children {
186+
color: #ffffff;
187+
}
182188
.nut-button-success {
183189
color: #ffffff;
184190
background: #2aa32a;
@@ -210,6 +216,9 @@
210216
.nut-button-success.nut-button-none {
211217
color: #2aa32a;
212218
}
219+
.nut-button-success-children {
220+
color: #ffffff;
221+
}
213222
.nut-button-info {
214223
color: #ffffff;
215224
background: #0073ff;
@@ -241,6 +250,9 @@
241250
.nut-button-info.nut-button-none {
242251
color: #1988fa;
243252
}
253+
.nut-button-info-children {
254+
color: #ffffff;
255+
}
244256
.nut-button-danger {
245257
color: #ffffff;
246258
background: #ff0f23;
@@ -272,6 +284,9 @@
272284
.nut-button-danger.nut-button-none {
273285
color: #ff0f23;
274286
}
287+
.nut-button-danger-children {
288+
color: #ffffff;
289+
}
275290
.nut-button-warning {
276291
color: #ffffff;
277292
background: #c47600;
@@ -303,6 +318,9 @@
303318
.nut-button-warning.nut-button-none {
304319
color: #c47600;
305320
}
321+
.nut-button-warning-children {
322+
color: #ffffff;
323+
}
306324
.nut-button-block {
307325
display: block;
308326
width: 100%;

‎src/packages/button/button.scss‎

Lines changed: 36 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
position: relative;
33
display: flex;
44
display: inline-block;
5-
flex-direction: row;
65
width: auto;
6+
flex-direction: row;
77
justify-content: center;
88
align-items: center;
99
flex-shrink: 0;
@@ -22,12 +22,10 @@
2222
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
2323
color: $button-default-color;
2424
background: $button-default-background-color;
25-
// TODO:临时限制的宽度，后续适配同学会调整
26-
width: 100px;
25+
border-width: $button-border-width;
2726

2827
&-text {
2928
margin-left: $button-text-icon-margin;
30-
3129
&.right {
3230
margin-right: $button-text-icon-margin;
3331
}
@@ -68,8 +66,9 @@
6866
flex-direction: row;
6967
align-items: center;
7068
justify-content: center;
71-
// RN 不支持
72-
// background: initial;
69+
/* #ifndef rn harmony */
70+
background: initial;
71+
/* #endif */
7372
.nut-icon {
7473
font-size: $button-default-font-size;
7574
width: $button-default-font-size;
@@ -91,27 +90,20 @@
9190

9291
&-default {
9392
padding: $button-default-padding;
94-
border: $button-border-width solid $button-default-border-color;
95-
96-
&.nut-button-disabled {
97-
color: $button-default-disabled-color;
98-
background: transparent;
99-
}
93+
border-style: solid;
94+
border-color: $button-default-border-color;
10095

10196
&.nut-button-none {
102-
background: transparent;
103-
10497
&.nut-button-disabled {
10598
color: $button-default-disabled-color;
10699
}
107100
}
108101

109102
&.nut-button-outline,
110103
&.nut-button-dashed {
111-
background: transparent;
112-
113104
&.nut-button-disabled {
114-
color: $button-default-disabled-color;
105+
background: transparent;
106+
color: $button-default-disabled;
115107
border-color: $button-default-disabled;
116108
}
117109
}
@@ -173,18 +165,16 @@
173165

174166
&-primary {
175167
color: $button-primary-color;
176-
// RN 不支持
177-
background: #fa2c19; //$button-primary-background-color;
168+
background: $button-primary-background-color;
178169
background-origin: border-box;
179-
border: $button-border-width solid transparent;
170+
border-color: transparent;
180171

181172
&.nut-button-disabled {
182173
background: $button-primary-disabled;
183174
border-color: $button-primary-disabled;
184175
}
185176

186177
&.nut-button-none {
187-
background: transparent;
188178
color: $button-primary-border-color;
189179

190180
&.nut-button-disabled {
@@ -193,9 +183,8 @@
193183
}
194184

195185
&.nut-button-outline {
196-
background: transparent;
197186
color: $button-primary-border-color;
198-
border: $button-border-width solid $button-primary-border-color;
187+
border-color: $button-primary-border-color;
199188

200189
&.nut-button-disabled {
201190
color: $button-primary-disabled;
@@ -204,9 +193,8 @@
204193
}
205194

206195
&.nut-button-dashed {
207-
background: transparent;
208196
color: $button-primary-border-color;
209-
border: $button-border-width dashed $button-primary-border-color;
197+
border-color: $button-primary-border-color;
210198

211199
&.nut-button-disabled {
212200
color: $button-primary-disabled;
@@ -219,7 +207,7 @@
219207
color: $button-success-color;
220208
background: $button-success-background-color;
221209
background-origin: border-box;
222-
border: $button-border-width solid transparent;
210+
border-color: transparent;
223211

224212
&.nut-button-disabled {
225213
background: $button-success-disabled;
@@ -230,7 +218,6 @@
230218
&.nut-button-dashed {
231219
color: $button-success-border-color;
232220
border-color: $button-success-border-color;
233-
background: transparent;
234221

235222
&.nut-button-disabled {
236223
color: $button-primary-disabled;
@@ -240,14 +227,17 @@
240227

241228
&.nut-button-none {
242229
color: $button-success-border-color;
230+
&.nut-button-disabled {
231+
color: $button-success-disabled;
232+
}
243233
}
244234
}
245235

246236
&-info {
247237
color: $button-info-color;
248238
background: $button-info-background-color;
249239
background-origin: border-box;
250-
border: $button-border-width solid transparent;
240+
border-color: transparent;
251241

252242
&.nut-button-disabled {
253243
background: $button-info-disabled;
@@ -258,24 +248,26 @@
258248
&.nut-button-dashed {
259249
color: $button-info-border-color;
260250
border-color: $button-info-border-color;
261-
background: transparent;
262251

263252
&.nut-button-disabled {
264-
color: $button-primary-disabled;
265-
border-color: $button-primary-disabled;
253+
color: $button-info-disabled;
254+
border-color: $button-info-disabled;
266255
}
267256
}
268257

269258
&.nut-button-none {
270259
color: $button-info-border-color;
260+
&.nut-button-disabled {
261+
color: $button-info-disabled;
262+
}
271263
}
272264
}
273265

274266
&-danger {
275267
color: $button-danger-color;
276268
background: $button-danger-background-color;
277269
background-origin: border-box;
278-
border: $button-border-width solid transparent;
270+
border-color: transparent;
279271

280272
&.nut-button-disabled {
281273
background: $button-danger-disabled;
@@ -286,7 +278,6 @@
286278
&.nut-button-dashed {
287279
color: $button-danger-border-color;
288280
border-color: $button-danger-border-color;
289-
background: transparent;
290281

291282
&.nut-button-disabled {
292283
color: $button-danger-disabled;
@@ -296,14 +287,17 @@
296287

297288
&.nut-button-none {
298289
color: $button-danger-border-color;
290+
&.nut-button-disabled {
291+
color: $button-danger-disabled;
292+
}
299293
}
300294
}
301295

302296
&-warning {
303297
color: $button-warning-color;
304298
background: $button-warning-background-color;
305299
background-origin: border-box;
306-
border: $button-border-width solid transparent;
300+
border-color: transparent;
307301

308302
&.nut-button-disabled {
309303
background: $button-warning-disabled;
@@ -314,7 +308,6 @@
314308
&.nut-button-dashed {
315309
color: $button-warning-border-color;
316310
border-color: $button-warning-border-color;
317-
background: transparent;
318311

319312
&.nut-button-disabled {
320313
color: $button-warning-disabled;
@@ -324,6 +317,9 @@
324317

325318
&.nut-button-none {
326319
color: $button-warning-border-color;
320+
&.nut-button-disabled {
321+
color: $button-warning-disabled;
322+
}
327323
}
328324
}
329325

@@ -332,28 +328,19 @@
332328
width: 100%;
333329
}
334330

335-
&-solid {
336-
color: $button-primary-color;
337-
// RN 不支持
338-
background: #ff0f23; //$button-primary-background-color;
339-
background-origin: border-box;
340-
border: $button-border-width solid transparent;
341-
342-
&.nut-button-disabled {
343-
color: $button-default-disabled-color;
344-
background: $button-default-disabled;
345-
}
331+
&.nut-button-outline {
332+
background: transparent;
333+
border-style: solid;
346334
}
347335

348-
&.nut-button-outline,
349336
&.nut-button-dashed {
350337
background: transparent;
338+
border-style: dashed;
351339
}
352340

353341
&.nut-button-none {
354342
background: transparent;
355343
border-color: transparent;
356-
background: transparent;
357344
}
358345

359346
&-disabled {
@@ -400,6 +387,7 @@
400387
margin-left: $button-text-icon-margin;
401388
}
402389
}
390+
403391
&::before {
404392
left: auto;
405393
right: 50%;

0 commit comments

Comments
 (0)