UNPKG

11.2 kBSCSSView Raw
1@charset "UTF-8";
2
3////
4/// @module tab: 选项卡
5/// @tag Tab
6/// @category component
7/// @family navigation
8/// @varPrefix $tab-
9/// @classPrefix {prefix}-tab
10/// @order {"size/nav scroll":10,"size/tab":11,"size/close icon":12,"size/close cion":13,"size/nav":14,"size/content":15,"statement/normal":10,"statement/normal/close icon":100,"statement/normal/nav":101,"statement/normal/tab":102,"statement/normal/content":103,"statement/normal/icon":104,"statement/hover":11,"statement/hover/close icon":110,"statement/hover/nav":111,"statement/hover/tab":112,"statement/selected":12,"statement/selected/close icon":120,"statement/selected/tab":121,"statement/disabled":13,"statement/disabled/close icon":130,"statement/disabled/nav":131,"statement/disabled/tab":132}
11////
12
13// tab variables
14// --------------------------------------------------
15
16$tab-prefix: '.' + $css-prefix + 'tabs';
17
18// animation timing function
19$ease-out-quint: cubic-bezier(.23, 1, .32, 1);
20
21// Size
22
23/// padding (r)
24/// @namespace size/nav scroll
25$tab-nav-scroll-padding-right-m: $s-15 !default;
26
27/// padding (r)
28/// @namespace size/nav scroll
29$tab-nav-scroll-padding-right-s: $s-14 !default;
30
31/// icon
32/// @namespace size/tab
33$tab-nav-tab-icon-size-m: $icon-s !default;
34
35/// icon
36/// @namespace size/tab
37$tab-nav-tab-icon-size-s: $icon-xs !default;
38
39/// icon
40/// @namespace size/close icon
41$tab-nav-close-icon-size-m: $icon-xs !default;
42
43/// icon
44/// @namespace size/close icon
45$tab-nav-close-icon-size-s: $icon-xxs !default;
46
47/// padding (l)
48/// @namespace size/close icon
49$tab-nav-close-icon-padding-l-size-m: $s-2 !default;
50
51/// padding (l)
52/// @namespace size/close icon
53$tab-nav-close-icon-padding-l-size-s: $s-2 !default;
54
55/// arrow left offset (r)
56/// @namespace size/nav
57$tab-nav-arrow-left-positon-right: $s-8 !default;
58
59/// arrow right offset (r)
60/// @namespace size/nav
61$tab-nav-arrow-right-positon-right: $s-2 !default;
62
63/// arrow down offset (r)
64/// @namespace size/nav
65$tab-nav-arrow-down-positon-right: $s-2 !default;
66
67/// padding (t, b)
68/// @namespace size/tab
69$tab-item-padding-tb-size-m: $s-3 !default;
70
71/// padding (t, b)
72/// @namespace size/tab
73$tab-item-padding-tb-size-s: $s-2 !default;
74
75/// padding (l, r)
76/// @namespace size/tab
77$tab-item-padding-lr-size-m: $s-4 !default;
78
79/// padding (l, r)
80/// @namespace size/tab
81$tab-item-padding-lr-size-s: $s-3 !default;
82
83/// text
84/// @namespace size/tab
85$tab-item-text-size-m: $font-size-body-1 !default;
86
87/// text
88/// @namespace size/tab
89$tab-item-text-size-s: $font-size-caption !default;
90
91/// icon
92/// @namespace statement/normal/close icon
93$tab-close-icon-color: $color-text1-3 !default;
94
95/// icon
96/// @namespace statement/hover/close icon
97$tab-close-icon-color-hover: $color-text1-4 !default;
98
99/// icon
100/// @namespace statement/selected/close icon
101$tab-close-icon-color-selected: $color-brand1-6 !default;
102
103/// icon
104/// @namespace statement/disabled/close icon
105$tab-close-icon-color-disabled: $color-line1-2 !default;
106
107/// font weight
108/// @namespace statement/selected/tab
109$tab-item-font-weight-selected: $font-weight-2 !default;
110
111// Common
112// ----------
113
114/// nav icon
115/// @namespace statement/normal/nav
116$tab-nav-arrow-color-normal: $color-text1-3 !default;
117
118/// nav icon
119/// @namespace statement/hover/nav
120$tab-nav-arrow-color-hover: $color-text1-4 !default;
121
122/// nav icon
123/// @namespace statement/disabled/nav
124$tab-nav-arrow-color-disabled: $color-line1-2 !default;
125
126// Shape: Pure
127// -----------------
128
129// Size
130
131/// divider
132/// @namespace size/nav
133$tab-pure-divider-line-width: $line-1 !default;
134
135/// active line
136/// @namespace size/tab
137$tab-pure-ink-bar-width: $line-2 !default;
138
139/// active line padding(l,r)
140/// @namespace size/tab
141$tab-pure-ink-bar-padding-l: $s-zero !default;
142
143// Statement
144
145/// text
146/// @namespace statement/normal/tab
147$tab-pure-text-color-normal: $color-text1-3 !default;
148
149/// background
150/// @namespace statement/normal/tab
151$tab-pure-bg-color: $color-transparent !default;
152
153/// text
154/// @namespace statement/hover/tab
155$tab-pure-text-color-hover: $color-text1-4 !default;
156
157/// text
158/// @namespace statement/selected/tab
159$tab-pure-text-color-selected: $color-brand1-6 !default;
160
161/// text
162/// @namespace statement/disabled/tab
163$tab-pure-text-color-disabled: $color-line1-2 !default;
164
165/// active line
166/// @namespace statement/selected/tab
167$tab-pure-ink-bar-color: $color-brand1-6 !default;
168
169/// divider color
170/// @namespace statement/normal/nav
171$tab-pure-divider-border-color: $color-line1-2 !default;
172
173$tab-pure-divider-border-style: $line-solid !default;
174
175/// divider shadow
176/// @namespace statement/normal/nav
177$tab-pure-divider-shadow: $shadow-zero !default;
178
179// unconfigurable
180// divider line
181$tab-pure-divider-line: $tab-pure-divider-border-style $tab-pure-divider-line-width $tab-pure-divider-border-color;
182
183// Shape: Wrapped
184// -----------------
185
186/// border style
187/// @namespace size/tab
188$tab-wrapped-border-line-style: $line-solid !default;
189
190/// border width (active)
191/// @namespace size/tab
192$tab-wrapped-border-line-width: $line-1 !default;
193
194/// border width (normal)
195/// @namespace size/tab
196$tab-wrapped-border-side-width: $line-1 !default;
197
198/// corner
199/// @namespace size/tab
200$tab-wrapped-tab-corner-radius: $corner-1 !default;
201
202// unconfigurable
203$tab-wrapped-tab-top-border-radius: $tab-wrapped-tab-corner-radius $tab-wrapped-tab-corner-radius 0 0;
204
205// unconfigurable
206$tab-wrapped-tab-bottom-border-radius: 0 0 $tab-wrapped-tab-corner-radius $tab-wrapped-tab-corner-radius;
207
208// unconfigurable
209$tab-wrapped-tab-left-border-radius: $tab-wrapped-tab-corner-radius 0 0 $tab-wrapped-tab-corner-radius;
210
211// unconfigurable
212$tab-wrapped-tab-right-border-radius: 0 $tab-wrapped-tab-corner-radius $tab-wrapped-tab-corner-radius 0;
213
214/// margin (r)
215/// @namespace size/tab
216$tab-wrapped-tab-margin-right: $s-1 !default;
217
218/// margin (b)
219/// @namespace size/tab
220$tab-wrapped-tab-margin-bottom: $s-1 !default;
221
222/// active line
223/// @namespace size/tab
224$tab-wrapped-ink-bar-width: $line-2 !default;
225
226/// active line padding(l,r)
227/// @namespace size/tab
228$tab-wrapped-ink-bar-padding-l: $s-zero !default;
229
230/// background
231/// @namespace statement/normal/nav
232$tab-wrapped-bar-bg-color: $color-transparent !default;
233
234/// active line
235/// @namespace statement/selected/tab
236$tab-wrapped-ink-bar-color: $color-brand1-6 !default;
237
238/// border
239/// @namespace statement/selected/tab
240$tab-wrapped-nav-item-border-color-active: $color-brand1-6 !default;
241
242/// border
243/// @namespace statement/normal/tab
244$tab-wrapped-border-line-color: $color-line1-2 !default;
245
246// unconfigurable
247$tab-wrapped-bar-border: $tab-wrapped-border-line-style $tab-wrapped-border-line-width $tab-wrapped-border-line-color;
248
249/// border width
250/// @namespace size/content
251$tab-wrapped-content-border-line-width: $line-1 !default;
252
253/// border style
254/// @namespace statement/normal/content
255$tab-wrapped-content-border-line-style: $line-solid !default;
256
257/// border
258/// @namespace statement/normal/content
259$tab-wrapped-content-border-line-color: $color-line1-2 !default;
260
261// content border - unconfigurable
262$tab-wrapped-content-border: $tab-wrapped-content-border-line-width $tab-wrapped-content-border-line-style $tab-wrapped-border-line-color;
263
264/// text
265/// @namespace statement/normal/tab
266$tab-wrapped-text-color: $color-text1-3 !default;
267
268/// text
269/// @namespace statement/hover/tab
270$tab-wrapped-text-color-hover: $color-text1-4 !default;
271
272/// background
273/// @namespace statement/normal/tab
274$tab-wrapped-bg-color: $color-fill1-2 !default;
275
276/// background
277/// @namespace statement/hover/tab
278$tab-wrapped-bg-color-hover: $color-fill1-3 !default;
279
280/// border
281/// @namespace statement/hover/tab
282$tab-wrapped-border-line-color-hover: $color-line1-3 !default;
283
284/// border
285/// @namespace statement/normal/tab
286$tab-wrapped-border-line-color: $color-line1-2 !default;
287
288/// text
289/// @namespace statement/selected/tab
290$tab-wrapped-text-color-selected: $color-brand1-6 !default;
291
292/// text
293/// @namespace statement/disabled/tab
294$tab-wrapped-text-color-disabled: $color-text1-1 !default;
295
296/// background
297/// @namespace statement/selected/tab
298$tab-wrapped-bg-color-selected: $color-white !default;
299
300/// background
301/// @namespace statement/disabled/tab
302$tab-wrapped-bg-color-disabled: $color-fill1-1 !default;
303
304// unconfigurable
305$tab-wrapped-content-position-top: $tab-wrapped-border-line-width;
306
307// unconfigurable
308$tab-wrapped-content-position-right: $tab-wrapped-border-line-width;
309
310// Shape: Capsule
311// -----------------
312
313/// text
314/// @namespace statement/normal/tab
315$tab-capsule-text-color: $color-text1-4 !default;
316
317/// text
318/// @namespace statement/hover/tab
319$tab-capsule-text-color-hover: $color-text1-4 !default;
320
321/// text
322/// @namespace statement/selected/tab
323$tab-capsule-text-color-selected: $color-white !default;
324
325/// text
326/// @namespace statement/disabled/tab
327$tab-capsule-text-color-disabled: $color-text1-1 !default;
328
329/// background
330/// @namespace statement/normal/tab
331$tab-capsule-bg-color: $color-fill1-2 !default;
332
333/// background
334/// @namespace statement/hover/tab
335$tab-capsule-bg-color-hover: $color-fill1-3 !default;
336
337/// background
338/// @namespace statement/selected/tab
339$tab-capsule-bg-color-selected: $color-brand1-6 !default;
340
341/// background
342/// @namespace statement/disabled/tab
343$tab-capsule-bg-color-disabled: $color-fill1-1 !default;
344
345/// border
346/// @namespace statement/normal/tab
347$tab-capsule-tab-border-line-color: $color-line1-3 !default;
348
349/// border
350/// @namespace statement/hover/tab
351$tab-capsule-tab-border-line-color-hover: $color-line1-3 !default;
352
353/// border
354/// @namespace statement/selected/tab
355$tab-capsule-tab-border-line-color-active: $color-brand1-6 !default;
356
357/// border
358/// @namespace statement/disabled/tab
359$tab-capsule-tab-border-line-color-disabled: $color-line1-1 !default;
360
361/// corner radius
362/// @namespace size/nav
363$tab-capsule-corner-radius: $corner-1 !default;
364
365/// border
366/// @namespace size/nav
367$tab-capsule-tab-border-line-width: $line-1 !default;
368
369/// border style
370/// @namespace statement/normal/tab
371$tab-capsule-tab-border-line-style: $line-solid !default;
372
373// unconfigurable
374$tab-capsule-tab-border: $tab-capsule-tab-border-line-width $tab-capsule-tab-border-line-style $tab-capsule-tab-border-line-color;
375
376// Shape: Text
377// -----------------
378
379/// separator width
380/// @namespace size/tab
381$tab-text-item-sep-width: $line-1 !default;
382
383/// separator height
384/// @namespace size/tab
385$tab-text-item-sep-height: $s-2 !default;
386
387/// separator
388/// @namespace statement/normal/tab
389$tab-text-item-sep-color: $color-line1-2 !default;
390
391/// text
392/// @namespace statement/normal/tab
393$tab-text-text-color-normal: $color-text1-3 !default;
394
395/// text
396/// @namespace statement/hover/tab
397$tab-text-text-color-hover: $color-text1-4 !default;
398
399/// text
400/// @namespace statement/selected/tab
401$tab-text-text-color-selected: $color-brand1-6 !default;
402
403/// text
404/// @namespace statement/disabled/tab
405$tab-text-text-color-disabled: $color-text1-1 !default;
406
407/// icon dropdown
408/// @namespace statement/normal/icon
409$tab-icon-dropdown-content: $icon-content-arrow-down !default;
410
411/// icon prev
412/// @namespace statement/normal/icon
413$tab-icon-prev-content: $icon-content-arrow-left !default;
414
415/// icon next
416/// @namespace statement/normal/icon
417$tab-icon-next-content: $icon-content-arrow-right !default;