UNPKG

16.4 kBSCSSView Raw
1////
2/// @module button: 按钮
3/// @tag Button
4/// @category component
5/// @family general
6/// @varPrefix $btn-
7/// @classPrefix {prefix}-btn
8/// @order {"statement/normal":10,"statement/hover":11,"statement/disabled":12,"statement/active":13,"statement/loading":14,"size/bounding":10,"size/text":11,"size/icon":12,"size/normal":13}
9////
10
11$btn-prefix: '.' + $css-prefix + 'btn';
12
13$btn-icon-prefix: '.' + $css-prefix + 'icon';
14
15// Global
16// ----------------------------------------
17
18/// shadow
19/// @namespace statement/normal
20$btn-shadow: $shadow-zero !default;
21
22/// shadow
23/// @namespace statement/hover
24$btn-shadow-hover: $shadow-zero !default;
25
26// Small
27// ----------------------------------------
28
29/// height
30/// @namespace size/bounding
31$btn-size-s-height: $s-5 !default;
32
33/// padding
34/// @namespace size/bounding
35$btn-size-s-padding: $s-2 !default;
36
37/// border width
38/// @namespace size/bounding
39$btn-size-s-border-width: $line-1 !default;
40
41/// size
42/// @namespace size/text
43$btn-size-s-font: $font-size-caption !default;
44
45/// size
46/// @namespace size/icon
47$btn-size-s-icon-size: $icon-xs !default;
48
49/// margin
50/// @namespace size/icon
51$btn-size-s-icon-margin: $s-1 !default;
52
53/// split icon
54/// @namespace size/icon
55$btn-size-s-icon-split-size: $icon-xs !default;
56
57/// corner
58/// @namespace size/normal
59$btn-size-s-corner: $corner-1 !default;
60
61// Medium
62// ----------------------------------------
63
64/// height
65/// @namespace size/bounding
66$btn-size-m-height: $s-7 !default;
67
68/// padding
69/// @namespace size/bounding
70$btn-size-m-padding: $s-3 !default;
71
72/// border width
73/// @namespace size/bounding
74$btn-size-m-border-width: $line-1 !default;
75
76/// size
77/// @namespace size/text
78$btn-size-m-font: $font-size-body-1 !default;
79
80/// size
81/// @namespace size/icon
82$btn-size-m-icon-size: $icon-xs !default;
83
84/// margin
85/// @namespace size/icon
86$btn-size-m-icon-margin: $s-1 !default;
87
88/// split icon
89/// @namespace size/icon
90$btn-size-m-icon-split-size: $icon-xs !default;
91
92/// corner
93/// @namespace size/normal
94$btn-size-m-corner: $corner-1 !default;
95
96// Large
97// ----------------------------------------
98
99/// height
100/// @namespace size/bounding
101$btn-size-l-height: $s-10 !default;
102
103/// padding
104/// @namespace size/bounding
105$btn-size-l-padding: $s-4 !default;
106
107/// border width
108/// @namespace size/bounding
109$btn-size-l-border-width: $line-1 !default;
110
111/// size
112/// @namespace size/text
113$btn-size-l-font: $font-size-subhead !default;
114
115/// size
116/// @namespace size/icon
117$btn-size-l-icon-size: $icon-s !default;
118
119/// margin
120/// @namespace size/icon
121$btn-size-l-icon-margin: $s-1 !default;
122
123/// split icon
124/// @namespace size/icon
125$btn-size-l-icon-split-size: $icon-s !default;
126
127/// corner
128/// @namespace size/normal
129$btn-size-l-corner: $corner-1 !default;
130
131// Pure
132// ----------------------------------------
133
134/// text
135/// @namespace statement/disabled
136$btn-pure-color-disabled: $color-text1-1 !default;
137/// background
138/// @namespace statement/disabled
139$btn-pure-bg-disabled: $color-fill1-1 !default;
140/// border color
141/// @namespace statement/disabled
142$btn-pure-border-color-disabled: $color-line1-1 !default;
143
144/// text
145/// @namespace statement/disabled
146$btn-pure-normal-color-disabled: $color-text1-1 !default;
147/// background
148/// @namespace statement/disabled
149$btn-pure-normal-bg-disabled: $color-fill1-1 !default;
150/// border color
151/// @namespace statement/disabled
152$btn-pure-normal-border-color-disabled: $color-line1-1 !default;
153/// text
154/// @namespace statement/normal
155$btn-pure-normal-color: $color-text1-4 !default;
156/// text
157/// @namespace statement/hover
158$btn-pure-normal-color-hover: $color-text1-4 !default;
159/// text
160/// @namespace statement/active
161$btn-pure-normal-color-active: $color-text1-4 !default;
162/// background
163/// @namespace statement/normal
164$btn-pure-normal-bg: $color-white !default;
165/// background
166/// @namespace statement/hover
167$btn-pure-normal-bg-hover: $color-fill1-2 !default;
168/// background
169/// @namespace statement/active
170$btn-pure-normal-bg-active: $color-fill1-2 !default;
171/// border color
172/// @namespace statement/normal
173$btn-pure-normal-border-color: $color-line1-3 !default;
174/// border color
175/// @namespace statement/hover
176$btn-pure-normal-border-color-hover: $color-line1-4 !default;
177/// border color
178/// @namespace statement/active
179$btn-pure-normal-border-color-active: $color-line1-4 !default;
180/// border style
181/// @namespace statement/normal
182$btn-pure-normal-border-style: $line-solid !default;
183
184// Secondary
185// ----------------------------------------
186/// text
187/// @namespace statement/disabled
188$btn-pure-secondary-color-disabled: $color-text1-1 !default;
189/// background
190/// @namespace statement/disabled
191$btn-pure-secondary-bg-disabled: $color-fill1-1 !default;
192/// border color
193/// @namespace statement/disabled
194$btn-pure-secondary-border-color-disabled: $color-line1-1 !default;
195/// text
196/// @namespace statement/normal
197$btn-pure-secondary-color: $color-brand1-6 !default;
198/// text
199/// @namespace statement/hover
200$btn-pure-secondary-color-hover: $color-white !default;
201/// text
202/// @namespace statement/active
203$btn-pure-secondary-color-active: $color-white !default;
204/// background
205/// @namespace statement/normal
206$btn-pure-secondary-bg: $color-white !default;
207/// background
208/// @namespace statement/hover
209$btn-pure-secondary-bg-hover: $color-brand1-9 !default;
210/// background
211/// @namespace statement/active
212$btn-pure-secondary-bg-active: $color-brand1-9 !default;
213/// border color
214/// @namespace statement/normal
215$btn-pure-secondary-border-color: $color-brand1-6 !default;
216/// border color
217/// @namespace statement/hover
218$btn-pure-secondary-border-color-hover: $color-brand1-9 !default;
219/// border color
220/// @namespace statement/active
221$btn-pure-secondary-border-color-active: $color-brand1-9 !default;
222/// border style
223/// @namespace statement/normal
224$btn-pure-secondary-border-style: $line-solid !default;
225
226// Primary
227// ----------------------------------------
228/// text
229/// @namespace statement/disabled
230$btn-pure-primary-color-disabled: $color-text1-1 !default;
231/// background
232/// @namespace statement/disabled
233$btn-pure-primary-bg-disabled: $color-fill1-1 !default;
234/// border color
235/// @namespace statement/disabled
236$btn-pure-primary-border-color-disabled: $color-line1-1 !default;
237/// text
238/// @namespace statement/normal
239$btn-pure-primary-color: $color-white !default;
240/// text
241/// @namespace statement/hover
242$btn-pure-primary-color-hover: $color-white !default;
243/// text
244/// @namespace statement/active
245$btn-pure-primary-color-active: $color-white !default;
246/// background
247/// @supportGradient
248/// @namespace statement/normal
249$btn-pure-primary-bg: $color-brand1-6 !default;
250/// background
251/// @supportGradient
252/// @namespace statement/hover
253$btn-pure-primary-bg-hover: $color-brand1-9 !default;
254/// background
255/// @supportGradient
256/// @namespace statement/active
257$btn-pure-primary-bg-active: $color-brand1-9 !default;
258/// border color
259/// @namespace statement/normal
260$btn-pure-primary-border-color: $color-transparent !default;
261/// border color
262/// @namespace statement/hover
263$btn-pure-primary-border-color-hover: $color-transparent !default;
264/// border color
265/// @namespace statement/active
266$btn-pure-primary-border-color-active: $color-transparent !default;
267/// border style
268/// @namespace statement/normal
269$btn-pure-primary-border-style: $line-solid !default;
270
271// Ghost Dark
272// ----------------------------------------
273
274/// border style
275/// @namespace statement/normal
276$btn-ghost-border-style: $line-solid !default;
277
278/// text
279/// @namespace statement/normal
280$btn-ghost-dark-color: $color-white !default;
281
282/// border color
283/// @namespace statement/normal
284$btn-ghost-dark-border-color: $color-white !default;
285
286/// text
287/// @namespace statement/hover
288$btn-ghost-dark-color-hover: $color-white !default;
289
290/// background
291/// @namespace statement/normal
292$btn-ghost-dark-bg: $color-transparent !default;
293
294/// bg opacity
295/// @namespace statement/normal
296/// @type alpha
297$btn-ghost-dark-bg-opacity: 0 !default;
298$btn-ghost-dark-bg-normal: rgba(get-compiling-value($btn-ghost-dark-bg), get-compiling-value($btn-ghost-dark-bg-opacity)) !default;
299
300/// background
301/// @namespace statement/hover
302$btn-ghost-dark-bg-hover-rgb: $color-white !default;
303
304/// bg opacity
305/// @namespace statement/hover
306/// @type alpha
307$btn-ghost-dark-bg-hover-opacity: .8 !default;
308$btn-ghost-dark-bg-hover: rgba(get-compiling-value($btn-ghost-dark-bg-hover-rgb), get-compiling-value($btn-ghost-dark-bg-hover-opacity)) !default;
309
310/// border
311/// @namespace statement/hover
312$btn-ghost-dark-border-color-hover: $color-white !default;
313
314/// color
315/// @namespace statement/disabled
316$btn-ghost-dark-color-disabled-rgb: $color-white !default;
317
318/// color opacity
319/// @namespace statement/disabled
320/// @type alpha
321$btn-ghost-dark-color-disabled-opacity: .4 !default;
322$btn-ghost-dark-color-disabled: rgba(get-compiling-value($btn-ghost-dark-color-disabled-rgb), get-compiling-value($btn-ghost-dark-color-disabled-opacity)) !default;
323
324/// background
325/// @namespace statement/disabled
326$btn-ghost-dark-bg-disabled: $color-transparent !default;
327
328/// border
329/// @namespace statement/disabled
330$btn-ghost-dark-border-color-disabled-rgb: $color-white !default;
331
332/// border opacity
333/// @namespace statement/disabled
334/// @type alpha
335$btn-ghost-dark-border-color-disabled-opacity: .4 !default;
336$btn-ghost-dark-border-color-disabled: rgba(get-compiling-value($btn-ghost-dark-border-color-disabled-rgb), get-compiling-value($btn-ghost-dark-border-color-disabled-opacity)) !default;
337
338// Ghost Light
339// ----------------------------------------
340
341/// text
342/// @namespace statement/normal
343$btn-ghost-light-color: $color-text1-4 !default;
344
345/// border
346/// @namespace statement/normal
347$btn-ghost-light-border-color: $color-text1-4 !default;
348
349/// background
350/// @namespace statement/normal
351$btn-ghost-light-bg: $color-transparent !default;
352
353/// bg opacity
354/// @namespace statement/normal
355/// @type alpha
356$btn-ghost-light-bg-opacity: 0 !default;
357$btn-ghost-light-bg-normal: rgba(get-compiling-value($btn-ghost-light-bg), get-compiling-value($btn-ghost-light-bg-opacity)) !default;
358
359/// text
360/// @namespace statement/hover
361$btn-ghost-light-color-hover: $color-text1-2 !default;
362
363/// border
364/// @namespace statement/hover
365$btn-ghost-light-border-color-hover: $color-text1-4 !default;
366
367/// background
368/// @namespace statement/hover
369$btn-ghost-light-bg-hover-rgb: $color-black !default;
370
371/// bg opacity
372/// @namespace statement/hover
373/// @type alpha
374$btn-ghost-light-bg-hover-opacity: .92 !default;
375$btn-ghost-light-bg-hover: rgba(get-compiling-value($btn-ghost-light-bg-hover-rgb), get-compiling-value($btn-ghost-light-bg-hover-opacity)) !default;
376
377/// text
378/// @namespace statement/disabled
379$btn-ghost-light-color-disabled-rgb: $color-black !default;
380
381/// text opacity
382/// @namespace statement/disabled
383/// @type alpha
384$btn-ghost-light-color-disabled-opacity: .1 !default;
385$btn-ghost-light-color-disabled: rgba(get-compiling-value($btn-ghost-light-color-disabled-rgb), get-compiling-value($btn-ghost-light-color-disabled-opacity)) !default;
386
387/// background
388/// @namespace statement/disabled
389$btn-ghost-light-bg-disabled: $color-transparent !default;
390
391/// border
392/// @namespace statement/disabled
393$btn-ghost-light-border-color-disabled-rgb: $color-black !default;
394
395/// border opacity
396/// @namespace statement/disabled
397/// @type alpha
398$btn-ghost-light-border-color-disabled-opacity: .1 !default;
399$btn-ghost-light-border-color-disabled: rgba(get-compiling-value($btn-ghost-light-border-color-disabled-rgb), get-compiling-value($btn-ghost-light-border-color-disabled-opacity)) !default;
400
401// Warning Primary
402// ----------------------------------------
403
404/// border style
405/// @namespace statement/normal
406$btn-warning-border-style: $line-solid !default;
407
408/// text
409/// @namespace statement/normal
410$btn-warning-primary-color: $color-white !default;
411
412/// text
413/// @namespace statement/hover
414$btn-warning-primary-color-hover: $color-white !default;
415/// text
416/// @namespace statement/active
417$btn-warning-primary-color-active: $color-white !default;
418
419/// border color
420/// @namespace statement/normal
421$btn-warning-primary-border-color: $color-error-3 !default;
422
423/// border color
424/// @namespace statement/hover
425$btn-warning-primary-border-color-hover: $color-error-4 !default;
426/// border color
427/// @namespace statement/active
428$btn-warning-primary-border-color-active: $color-error-4 !default;
429
430/// background
431/// @namespace statement/normal
432$btn-warning-primary-bg: $color-error-3 !default;
433
434/// background
435/// @namespace statement/hover
436$btn-warning-primary-bg-hover: $color-error-4 !default;
437/// background
438/// @namespace statement/active
439$btn-warning-primary-bg-active: $color-error-4 !default;
440
441/// text
442/// @namespace statement/disabled
443$btn-warning-primary-color-disabled: $color-text1-1 !default;
444
445/// border
446/// @namespace statement/disabled
447$btn-warning-primary-border-color-disabled: $color-line1-2 !default;
448
449/// background
450/// @namespace statement/disabled
451$btn-warning-primary-bg-disabled: $color-fill1-1 !default;
452
453// Warning Normal
454// ----------------------------------------
455
456/// text
457/// @namespace statement/normal
458$btn-warning-normal-color: $color-error-3 !default;
459
460/// text
461/// @namespace statement/hover
462$btn-warning-normal-color-hover: $color-white !default;
463
464/// text
465/// @namespace statement/active
466$btn-warning-normal-color-active: $color-white !default;
467
468/// border
469/// @namespace statement/normal
470$btn-warning-normal-border-color: $color-error-3 !default;
471
472/// border
473/// @namespace statement/hover
474$btn-warning-normal-border-color-hover: $color-error-4 !default;
475/// border
476/// @namespace statement/active
477$btn-warning-normal-border-color-active: $color-error-4 !default;
478
479/// background
480/// @namespace statement/normal
481$btn-warning-normal-bg: $color-white !default;
482
483/// background
484/// @namespace statement/hover
485$btn-warning-normal-bg-hover: $color-error-4 !default;
486
487/// background
488/// @namespace statement/active
489$btn-warning-normal-bg-active: $color-error-4 !default;
490
491/// text
492/// @namespace statement/disabled
493$btn-warning-normal-color-disabled: $color-text1-1 !default;
494
495/// border
496/// @namespace statement/disabled
497$btn-warning-normal-border-color-disabled: $color-line1-1 !default;
498
499/// background
500/// @namespace statement/disabled
501$btn-warning-normal-bg-disabled: $color-fill1-1 !default;
502
503// Text primary & disabled & loading
504// ----------------------------------------
505
506/// text
507/// @namespace statement/normal
508$btn-text-primary-color: $color-link-1 !default;
509
510/// text
511/// @namespace statement/hover
512$btn-text-primary-color-hover: $color-brand1-9 !default;
513
514/// text
515/// @namespace statement/disabled
516$btn-text-disabled-color: $color-text1-1 !default;
517
518/// text
519/// @namespace statement/loading
520$btn-text-loading-color: $color-text1-4 !default;
521
522// Text secondary
523// ----------------------------------------
524
525/// text
526/// @namespace statement/normal
527$btn-text-secondary-color: $color-text1-3 !default;
528
529/// text
530/// @namespace statement/hover
531$btn-text-secondary-color-hover: $color-brand1-6 !default;
532
533// Text normal
534// ----------------------------------------
535
536/// text
537/// @namespace statement/normal
538$btn-text-normal-color: $color-text1-4 !default;
539
540/// text
541/// @namespace statement/hover
542$btn-text-normal-color-hover: $color-brand1-6 !default;
543
544// Text small
545// ----------------------------------------
546
547/// height
548/// @namespace size/bounding
549$btn-text-size-s-height: $s-4 !default;
550
551/// text
552/// @namespace size/text
553$btn-text-size-s-font: $font-size-caption !default;
554
555/// icon
556/// @namespace size/icon
557$btn-text-icon-size-s: $icon-s !default;
558
559/// margin
560/// @namespace size/icon
561$btn-text-icon-s-margin: $s-1 !default;
562
563// Text medium
564// ----------------------------------------
565
566/// height
567/// @namespace size/bounding
568$btn-text-size-m-height: $s-5 !default;
569
570/// text
571/// @namespace size/text
572$btn-text-size-m-font: $font-size-body-1 !default;
573
574/// icon
575/// @namespace size/icon
576$btn-text-icon-size-m: $icon-m !default;
577
578/// margin
579/// @namespace size/icon
580$btn-text-icon-m-margin: $s-1 !default;
581
582// Text large
583// ----------------------------------------
584
585/// height
586/// @namespace size/bounding
587$btn-text-size-l-height: $s-6 !default;
588
589/// text
590/// @namespace size/text
591$btn-text-size-l-font: $font-size-body-2 !default;
592
593/// icon
594/// @namespace size/icon
595$btn-text-icon-size-l: $icon-l !default;
596
597/// margin
598/// @namespace size/icon
599$btn-text-icon-l-margin: $s-1 !default;