1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | $subnav-margin-horizontal: 20px !default;
|
19 |
|
20 | $subnav-item-color: $global-muted-color !default;
|
21 | $subnav-item-hover-color: $global-color !default;
|
22 | $subnav-item-hover-text-decoration: none !default;
|
23 | $subnav-item-active-color: $global-emphasis-color !default;
|
24 |
|
25 | $subnav-divider-margin-horizontal: $subnav-margin-horizontal !default;
|
26 | $subnav-divider-border-height: 1.5em !default;
|
27 | $subnav-divider-border-width: $global-border-width !default;
|
28 | $subnav-divider-border: $global-border !default;
|
29 |
|
30 | $subnav-pill-item-padding-vertical: 5px !default;
|
31 | $subnav-pill-item-padding-horizontal: 10px !default;
|
32 | $subnav-pill-item-background: transparent !default;
|
33 | $subnav-pill-item-color: $subnav-item-color !default;
|
34 | $subnav-pill-item-hover-background: $global-muted-background !default;
|
35 | $subnav-pill-item-hover-color: $global-color !default;
|
36 | $subnav-pill-item-onclick-background: $subnav-pill-item-hover-background !default;
|
37 | $subnav-pill-item-onclick-color: $subnav-pill-item-hover-color !default;
|
38 | $subnav-pill-item-active-background: $global-primary-background !default;
|
39 | $subnav-pill-item-active-color: $global-inverse-color !default;
|
40 |
|
41 | $subnav-item-disabled-color: $global-muted-color !default;
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 | .uk-subnav {
|
55 | display: flex;
|
56 |
|
57 | flex-wrap: wrap;
|
58 |
|
59 | margin-left: (-$subnav-margin-horizontal);
|
60 |
|
61 | padding: 0;
|
62 | list-style: none;
|
63 | @if(mixin-exists(hook-subnav)) {@include hook-subnav();}
|
64 | }
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 | .uk-subnav > * {
|
73 |
|
74 | flex: none;
|
75 |
|
76 | padding-left: $subnav-margin-horizontal;
|
77 |
|
78 | position: relative;
|
79 | }
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 | .uk-subnav > * > :first-child {
|
93 |
|
94 | display: block;
|
95 |
|
96 | color: $subnav-item-color;
|
97 | @if(mixin-exists(hook-subnav-item)) {@include hook-subnav-item();}
|
98 | }
|
99 |
|
100 |
|
101 | .uk-subnav > * > a:hover,
|
102 | .uk-subnav > * > a:focus {
|
103 | color: $subnav-item-hover-color;
|
104 | text-decoration: $subnav-item-hover-text-decoration;
|
105 | outline: none;
|
106 | @if(mixin-exists(hook-subnav-item-hover)) {@include hook-subnav-item-hover();}
|
107 | }
|
108 |
|
109 |
|
110 | .uk-subnav > .uk-active > a {
|
111 | color: $subnav-item-active-color;
|
112 | @if(mixin-exists(hook-subnav-item-active)) {@include hook-subnav-item-active();}
|
113 | }
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 | .uk-subnav-divider > * {
|
124 |
|
125 | display: flex;
|
126 | align-items: center;
|
127 | }
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 | .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
|
135 | content: "";
|
136 | height: $subnav-divider-border-height;
|
137 | margin-left: ($subnav-divider-margin-horizontal - $subnav-margin-horizontal);
|
138 | margin-right: $subnav-divider-margin-horizontal;
|
139 | border-left: $subnav-divider-border-width solid $subnav-divider-border;
|
140 | @if(mixin-exists(hook-subnav-divider)) {@include hook-subnav-divider();}
|
141 | }
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 | .uk-subnav-pill > * > :first-child {
|
148 | padding: $subnav-pill-item-padding-vertical $subnav-pill-item-padding-horizontal;
|
149 | background: $subnav-pill-item-background;
|
150 | color: $subnav-pill-item-color;
|
151 | @if(mixin-exists(hook-subnav-pill-item)) {@include hook-subnav-pill-item();}
|
152 | }
|
153 |
|
154 |
|
155 | .uk-subnav-pill > * > a:hover,
|
156 | .uk-subnav-pill > * > a:focus {
|
157 | background-color: $subnav-pill-item-hover-background;
|
158 | color: $subnav-pill-item-hover-color;
|
159 | @if(mixin-exists(hook-subnav-pill-item-hover)) {@include hook-subnav-pill-item-hover();}
|
160 | }
|
161 |
|
162 |
|
163 | .uk-subnav-pill > * > a:active {
|
164 | background-color: $subnav-pill-item-onclick-background;
|
165 | color: $subnav-pill-item-onclick-color;
|
166 | @if(mixin-exists(hook-subnav-pill-item-onclick)) {@include hook-subnav-pill-item-onclick();}
|
167 | }
|
168 |
|
169 |
|
170 | .uk-subnav-pill > .uk-active > a {
|
171 | background-color: $subnav-pill-item-active-background;
|
172 | color: $subnav-pill-item-active-color;
|
173 | @if(mixin-exists(hook-subnav-pill-item-active)) {@include hook-subnav-pill-item-active();}
|
174 | }
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 | .uk-subnav > .uk-disabled > a {
|
182 | color: $subnav-item-disabled-color;
|
183 | @if(mixin-exists(hook-subnav-item-disabled)) {@include hook-subnav-item-disabled();}
|
184 | }
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 | @if(mixin-exists(hook-subnav-misc)) {@include hook-subnav-misc();}
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 | $inverse-subnav-item-color: $inverse-global-muted-color !default;
|
209 | $inverse-subnav-item-hover-color: $inverse-global-color !default;
|
210 | $inverse-subnav-item-active-color: $inverse-global-emphasis-color !default;
|
211 | $inverse-subnav-divider-border: $inverse-global-border !default;
|
212 | $inverse-subnav-pill-item-background: transparent !default;
|
213 | $inverse-subnav-pill-item-color: $inverse-global-muted-color !default;
|
214 | $inverse-subnav-pill-item-hover-background: $inverse-global-muted-background !default;
|
215 | $inverse-subnav-pill-item-hover-color: $inverse-global-color !default;
|
216 | $inverse-subnav-pill-item-onclick-background: $inverse-subnav-pill-item-hover-background !default;
|
217 | $inverse-subnav-pill-item-onclick-color: $inverse-subnav-pill-item-hover-color !default;
|
218 | $inverse-subnav-pill-item-active-background: $inverse-global-primary-background !default;
|
219 | $inverse-subnav-pill-item-active-color: $inverse-global-inverse-color !default;
|
220 | $inverse-subnav-item-disabled-color: $inverse-global-muted-color !default;
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 |
|
232 |
|