UNPKG

16.7 kBSCSSView Raw
1@charset "UTF-8";
2
3////
4/// @module nav: 导航
5/// @tag Nav
6/// @category component
7/// @family navigation
8/// @varPrefix $nav-
9/// @classPrefix {prefix}-nav
10/// @order {"size/bounding":10,"size/item":11,"size/sub nav":12,"size/group":13,"size/icon":14,"statement/normal":10,"statement/normal/sub nav":100,"statement/normal/group":101,"statement/hover":11,"statement/hover/sub nav":110,"statement/selected":12,"statement/selected/sub nav":120,"statement/open":13}
11////
12
13
14// nav variables
15// --------------------------------------------------
16
17$nav-prefix: '.#{$css-prefix}nav';
18$menu-prefix: '.#{$css-prefix}menu';
19
20// Size:Hoz
21// ----------------------------------------
22/// height
23/// @namespace size/bounding
24$nav-hoz-height: $s-11 !default;
25/// text
26/// @namespace size/bounding
27$nav-hoz-font-size: $font-size-body-1 !default;
28/// margin (t, b)
29/// @namespace size/item
30$nav-hoz-item-margin-tb: $s-zero !default;
31/// margin (l, r)
32/// @namespace size/item
33$nav-hoz-item-margin-lr: $s-zero !default;
34/// padding (l, r)
35/// @namespace size/item
36$nav-hoz-item-padding-lr: $s-5 !default;
37/// corner
38/// @namespace size/item
39$nav-hoz-item-corner: $corner-zero !default;
40/// active line width
41/// @namespace size/item
42$nav-hoz-item-selected-active-line: $line-2 !default;
43/// hover line width
44/// @namespace size/item
45$nav-hoz-item-hover-active-line: $line-zero !default;
46
47// Size:Ver
48// ----------------------------------------
49/// height
50/// @namespace size/bounding
51$nav-ver-height: $s-10 !default;
52/// text
53/// @namespace size/bounding
54$nav-ver-font-size: $font-size-body-1 !default;
55/// margin (t, b)
56/// @namespace size/item
57$nav-ver-item-margin-tb: $s-zero !default;
58/// margin (l, r)
59/// @namespace size/item
60$nav-ver-item-margin-lr: $s-zero !default;
61/// padding (l, r)
62/// @namespace size/item
63$nav-ver-item-padding-lr: $s-5 !default;
64/// corner
65/// @namespace size/item
66$nav-ver-item-corner: $corner-zero !default;
67/// active line width
68/// @namespace size/item
69$nav-ver-item-selected-active-line: $line-2 !default;
70/// hover line width
71/// @namespace size/item
72$nav-ver-item-hover-active-line: $line-zero !default;
73/// height
74/// @namespace size/sub nav
75$nav-ver-sub-nav-height: $s-10 !default;
76/// text
77/// @namespace size/sub nav
78$nav-ver-sub-nav-font-size: $font-size-caption !default;
79/// height
80/// @namespace size/group
81$nav-group-height: $s-10 !default;
82/// text
83/// @namespace size/group
84$nav-group-font-size: $font-size-body-1 !default;
85
86// Size:Common
87// ----------------------------------------
88/// size
89/// @namespace size/icon
90$nav-icon-self-size: $icon-xs !default;
91/// margin (r)
92/// @namespace size/icon
93$nav-icon-self-margin: $s-1 !default;
94/// size
95/// @namespace size/icon
96$nav-icon-only-font-size: $icon-s !default;
97
98// Statement:Primary
99// ----------------------------------------
100/// background
101/// @namespace statement/normal
102$nav-primary-bg-color: $color-text1-4 !default;
103
104/// border
105/// @namespace size/normal
106$nav-primary-border-width: $line-zero !default;
107
108/// border
109/// @namespace statement/normal
110$nav-primary-border-color: $color-text1-4 !default;
111/// text
112/// @namespace statement/normal
113$nav-primary-text-color: $color-white !default;
114/// text style
115/// @namespace statement/normal
116$nav-primary-text-style: $font-weight-2 !default;
117/// shadow
118/// @namespace statement/normal
119$nav-primary-shadow: $shadow-2 !default;
120/// background
121/// @namespace statement/normal/sub nav
122/// @supportGradient
123$nav-primary-sub-nav-bg-color: $color-text1-4 !default;
124/// text
125/// @namespace statement/normal/sub nav
126$nav-primary-sub-nav-text-color: $color-white !default;
127/// text style
128/// @namespace statement/normal/sub nav
129$nav-primary-sub-nav-text-style: $font-weight-2 !default;
130/// text
131/// @namespace statement/normal/group
132$nav-primary-group-text-color: $color-text1-2 !default;
133/// text style
134/// @namespace statement/normal/group
135$nav-primary-group-text-style: $font-weight-2 !default;
136/// background
137/// @namespace statement/hover
138/// @supportGradient
139$nav-primary-item-hover-bg-color: $color-black !default;
140/// text
141/// @namespace statement/hover
142$nav-primary-item-hover-text-color: $color-white !default;
143/// text style
144/// @namespace statement/hover
145$nav-primary-item-hover-text-style: $font-weight-2 !default;
146/// hover line color
147/// @namespace statement/hover
148$nav-primary-item-hover-active-color: $color-brand1-6 !default;
149/// background
150/// @namespace statement/hover/sub nav
151/// @supportGradient
152$nav-primary-sub-nav-hover-bg-color: $color-black !default;
153/// text
154/// @namespace statement/hover/sub nav
155$nav-primary-sub-nav-hover-text-color: $color-white !default;
156/// background
157/// @namespace statement/selected
158/// @supportGradient
159$nav-primary-item-selected-bg-color: $color-black !default;
160/// text color
161/// @namespace statement/selected
162$nav-primary-item-selected-text-color: $color-white !default;
163/// text style
164/// @namespace statement/selected
165$nav-primary-item-selected-text-style: $font-weight-3 !default;
166/// background
167/// @namespace statement/child selected
168/// @supportGradient
169$nav-primary-item-childselected-bg-color: $color-transparent !default;
170/// text color
171/// @namespace statement/child selected
172$nav-primary-item-childselected-text-color: $color-white !default;
173/// text style
174/// @namespace statement/child selected
175$nav-primary-item-childselected-text-style: $font-weight-3 !default;
176/// active line color
177/// @namespace statement/selected
178$nav-primary-item-selected-active-color: $color-brand1-6 !default;
179/// background
180/// @namespace statement/selected/sub nav
181/// @supportGradient
182$nav-primary-sub-nav-selected-bg-color: $color-black !default;
183/// text color
184/// @namespace statement/selected/sub nav
185$nav-primary-sub-nav-selected-text-color: $color-white !default;
186/// active line color
187/// @namespace statement/selected/sub nav
188$nav-primary-sub-nav-active-color: $color-brand1-6 !default;
189/// text
190/// @namespace statement/disabled
191$nav-primary-item-disabled-text-color: $color-text1-1 !default;
192/// background
193/// @namespace statement/open
194/// @supportGradient
195$nav-primary-item-opened-bg-color: $color-transparent !default;
196/// text
197/// @namespace statement/open
198$nav-primary-item-opened-text-color: $color-white !default;
199
200// Statement:Secondary
201// ----------------------------------------
202/// background
203/// @namespace statement/normal
204$nav-secondary-bg-color: $color-brand1-6 !default;
205/// border
206/// @namespace size/normal
207$nav-secondary-border-width: $line-zero !default;
208/// border
209/// @namespace statement/normal
210$nav-secondary-border-color: $color-brand1-6 !default;
211/// text
212/// @namespace statement/normal
213$nav-secondary-text-color: $color-white !default;
214/// text style
215/// @namespace statement/normal
216$nav-secondary-text-style: $font-weight-2 !default;
217/// shadow
218/// @namespace statement/normal
219$nav-secondary-shadow: $shadow-2 !default;
220/// background
221/// @namespace statement/normal/sub nav
222/// @supportGradient
223$nav-secondary-sub-nav-bg-color: $color-brand1-6 !default;
224/// text
225/// @namespace statement/normal/sub nav
226$nav-secondary-sub-nav-text-color: $color-white !default;
227/// text style
228/// @namespace statement/normal/sub nav
229$nav-secondary-sub-nav-text-style: $font-weight-2 !default;
230/// text
231/// @namespace statement/normal/group
232$nav-secondary-group-text-color: $color-white !default;
233/// text style
234/// @namespace statement/normal/group
235$nav-secondary-group-text-style: $font-weight-2 !default;
236/// background
237/// @namespace statement/hover
238/// @supportGradient
239$nav-secondary-item-hover-bg-color: $color-brand1-9 !default;
240/// text
241/// @namespace statement/hover
242$nav-secondary-item-hover-text-color: $color-white !default;
243/// text style
244/// @namespace statement/hover
245$nav-secondary-item-hover-text-style: $font-weight-2 !default;
246/// hover line color
247/// @namespace statement/hover
248$nav-secondary-item-hover-active-color: $color-brand1-9 !default;
249/// background
250/// @namespace statement/hover/sub nav
251/// @supportGradient
252$nav-secondary-sub-nav-hover-bg-color: $color-brand1-9 !default;
253/// text
254/// @namespace statement/hover/sub nav
255$nav-secondary-sub-nav-hover-text-color: $color-white !default;
256/// background
257/// @namespace statement/selected
258/// @supportGradient
259$nav-secondary-item-selected-bg-color: $color-brand1-9 !default;
260/// text color
261/// @namespace statement/selected
262$nav-secondary-item-selected-text-color: $color-white !default;
263/// text style
264/// @namespace statement/selected
265$nav-secondary-item-selected-text-style: $font-weight-3 !default;
266/// background
267/// @namespace statement/child selected
268/// @supportGradient
269$nav-secondary-item-childselected-bg-color: $color-transparent !default;
270/// text color
271/// @namespace statement/child selected
272$nav-secondary-item-childselected-text-color: $color-white !default;
273/// text style
274/// @namespace statement/child selected
275$nav-secondary-item-childselected-text-style: $font-weight-3 !default;
276/// active line color
277/// @namespace statement/selected
278$nav-secondary-item-selected-active-color: $color-brand1-9 !default;
279/// background
280/// @namespace statement/selected/sub nav
281/// @supportGradient
282$nav-secondary-sub-nav-selected-bg-color: $color-brand1-9 !default;
283/// text color
284/// @namespace statement/selected/sub nav
285$nav-secondary-sub-nav-selected-text-color: $color-white !default;
286/// active line color
287/// @namespace statement/selected/sub nav
288$nav-secondary-sub-nav-active-color: $color-brand1-6 !default;
289/// text
290/// @namespace statement/disabled
291$nav-secondary-item-disabled-text-color: $color-brand1-1 !default;
292/// background
293/// @namespace statement/open
294/// @supportGradient
295$nav-secondary-item-opened-bg-color: $color-transparent !default;
296/// text
297/// @namespace statement/open
298$nav-secondary-item-opened-text-color: $color-white !default;
299
300// Statement:Normal
301// ----------------------------------------
302/// background
303/// @namespace statement/normal
304$nav-normal-bg-color: $color-white !default;
305/// border
306/// @namespace statement/normal
307$nav-normal-border-color: $color-line1-2 !default;
308/// text
309/// @namespace statement/normal
310$nav-normal-text-color: $color-text1-4 !default;
311/// text style
312/// @namespace statement/normal
313$nav-normal-text-style: $font-weight-2 !default;
314/// border
315/// @namespace statement/normal
316$nav-normal-border-color: $color-line1-1 !default;
317/// border
318/// @namespace statement/normal
319$nav-normal-border-line: $line-1 !default;
320/// shadow
321/// @namespace statement/normal
322$nav-normal-shadow: $shadow-2 !default;
323/// background
324/// @namespace statement/normal/sub nav
325/// @supportGradient
326$nav-normal-sub-nav-bg-color: $color-white !default;
327/// text
328/// @namespace statement/normal/sub nav
329$nav-normal-sub-nav-text-color: $color-text1-4 !default;
330/// text style
331/// @namespace statement/normal/sub nav
332$nav-normal-sub-nav-text-style: $font-weight-2 !default;
333/// text
334/// @namespace statement/normal/group
335$nav-normal-group-text-color: $color-text1-2 !default;
336/// text style
337/// @namespace statement/normal/group
338$nav-normal-group-text-style: $font-weight-2 !default;
339/// background
340/// @namespace statement/hover
341/// @supportGradient
342$nav-normal-item-hover-bg-color: $color-white !default;
343/// text
344/// @namespace statement/hover
345$nav-normal-item-hover-text-color: $color-brand1-6 !default;
346/// text style
347/// @namespace statement/hover
348$nav-normal-item-hover-text-style: $font-weight-2 !default;
349/// hover line color
350/// @namespace statement/hover
351$nav-normal-item-hover-active-color: $color-brand1-6 !default;
352/// background
353/// @namespace statement/hover/sub nav
354/// @supportGradient
355$nav-normal-sub-nav-hover-bg-color: $color-fill1-2 !default;
356/// text
357/// @namespace statement/hover/sub nav
358$nav-normal-sub-nav-hover-text-color: $color-brand1-6 !default;
359/// background
360/// @namespace statement/selected
361/// @supportGradient
362$nav-normal-item-selected-bg-color: $color-fill1-2 !default;
363/// text color
364/// @namespace statement/selected
365$nav-normal-item-selected-text-color: $color-brand1-6 !default;
366/// text style
367/// @namespace statement/selected
368$nav-normal-item-selected-text-style: $font-weight-3 !default;
369/// background
370/// @namespace statement/child selected
371/// @supportGradient
372$nav-normal-item-childselected-bg-color: $color-transparent !default;
373/// text color
374/// @namespace statement/child selected
375$nav-normal-item-childselected-text-color: $color-brand1-6 !default;
376/// text style
377/// @namespace statement/child selected
378$nav-normal-item-childselected-text-style: $font-weight-2 !default;
379/// active line color
380/// @namespace statement/selected
381$nav-normal-item-selected-active-color: $color-brand1-6 !default;
382/// background
383/// @namespace statement/selected/sub nav
384/// @supportGradient
385$nav-normal-sub-nav-selected-bg-color: $color-fill1-2 !default;
386/// text color
387/// @namespace statement/selected/sub nav
388$nav-normal-sub-nav-selected-text-color: $color-brand1-6 !default;
389/// active line color
390/// @namespace statement/selected/sub nav
391$nav-normal-sub-nav-active-color: $color-brand1-6 !default;
392/// text
393/// @namespace statement/disabled
394$nav-normal-item-disabled-text-color: $color-text1-2 !default;
395/// background
396/// @namespace statement/open
397/// @supportGradient
398$nav-normal-item-opened-bg-color: $color-transparent !default;
399/// text
400/// @namespace statement/open
401$nav-normal-item-opened-text-color: $color-brand1-6 !default;
402
403// Statement:Line
404// ----------------------------------------
405/// background
406/// @namespace statement/normal
407$nav-line-bg-color: $color-transparent !default;
408/// border
409/// @namespace statement/normal
410$nav-line-border-color: $color-line1-2 !default;
411/// text
412/// @namespace statement/normal
413$nav-line-text-color: $color-text1-4 !default;
414/// text style
415/// @namespace statement/normal
416$nav-line-text-style: $font-weight-2 !default;
417/// border
418/// @namespace statement/normal
419$nav-line-border-color: $color-line1-2 !default;
420/// border
421/// @namespace statement/normal
422$nav-line-border-line: $line-1 !default;
423/// background
424/// @namespace statement/normal/sub nav
425/// @supportGradient
426$nav-line-sub-nav-bg-color: $color-transparent !default;
427/// text
428/// @namespace statement/normal/sub nav
429$nav-line-sub-nav-text-color: $color-text1-4 !default;
430/// text style
431/// @namespace statement/normal/sub nav
432$nav-line-sub-nav-text-style: $font-weight-2 !default;
433/// background
434/// @namespace statement/hover
435/// @supportGradient
436$nav-line-item-hover-bg-color: $color-transparent !default;
437/// text
438/// @namespace statement/hover
439$nav-line-item-hover-text-color: $color-brand1-6 !default;
440/// text style
441/// @namespace statement/hover
442$nav-line-item-hover-text-style: $font-weight-2 !default;
443/// hover line color
444/// @namespace statement/hover
445$nav-line-item-hover-active-color: $color-brand1-6 !default;
446/// background
447/// @namespace statement/hover/sub nav
448/// @supportGradient
449$nav-line-sub-nav-hover-bg-color: $color-transparent !default;
450/// text
451/// @namespace statement/hover/sub nav
452$nav-line-sub-nav-hover-text-color: $color-brand1-6 !default;
453/// background
454/// @namespace statement/selected
455/// @supportGradient
456$nav-line-item-selected-bg-color: $color-transparent !default;
457/// text color
458/// @namespace statement/selected
459$nav-line-item-selected-text-color: $color-brand1-6 !default;
460/// text style
461/// @namespace statement/selected
462$nav-line-item-selected-text-style: $font-weight-3 !default;
463/// background
464/// @namespace statement/child selected
465/// @supportGradient
466$nav-line-item-childselected-bg-color: $color-transparent !default;
467/// text color
468/// @namespace statement/child selected
469$nav-line-item-childselected-text-color: $color-brand1-6 !default;
470/// text style
471/// @namespace statement/child selected
472$nav-line-item-childselected-text-style: $font-weight-2 !default;
473/// active line color
474/// @namespace statement/selected
475$nav-line-item-selected-active-color: $color-brand1-6 !default;
476/// background
477/// @namespace statement/selected/sub nav
478/// @supportGradient
479$nav-line-sub-nav-selected-bg-color: $color-transparent !default;
480/// text color
481/// @namespace statement/selected/sub nav
482$nav-line-sub-nav-selected-text-color: $color-brand1-6 !default;
483/// active line color
484/// @namespace statement/selected/sub nav
485$nav-line-sub-nav-active-color: $color-brand1-6 !default;
486/// text
487/// @namespace statement/disabled
488$nav-line-item-disabled-text-color: $color-text1-2 !default;
489/// background
490/// @namespace statement/open
491/// @supportGradient
492$nav-line-item-opened-bg-color: $color-transparent !default;
493/// text
494/// @namespace statement/open
495$nav-line-item-opened-text-color: $color-brand1-6 !default;
496/// text
497/// @namespace statement/normal/group
498$nav-line-group-text-color: $color-text1-2 !default;
499/// text style
500/// @namespace statement/normal/group
501$nav-line-group-text-style: $font-weight-2 !default;