]>
Commit | Line | Data |
---|---|---|
59c06b17 CS |
1 | // |
2 | // Navs | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | // BASE CLASS | |
7 | // ---------- | |
8 | ||
9 | .nav { | |
10 | margin-left: 0; | |
11 | margin-bottom: @baseLineHeight; | |
12 | list-style: none; | |
13 | } | |
14 | ||
15 | // Make links block level | |
16 | .nav > li > a { | |
17 | display: block; | |
18 | } | |
19 | .nav > li > a:hover { | |
20 | text-decoration: none; | |
21 | background-color: @grayLighter; | |
22 | } | |
23 | ||
24 | // Redeclare pull classes because of specifity | |
25 | .nav > .pull-right { | |
26 | float: right; | |
27 | } | |
28 | ||
29 | // Nav headers (for dropdowns and lists) | |
30 | .nav-header { | |
31 | display: block; | |
32 | padding: 3px 15px; | |
33 | font-size: 11px; | |
34 | font-weight: bold; | |
35 | line-height: @baseLineHeight; | |
36 | color: @grayLight; | |
37 | text-shadow: 0 1px 0 rgba(255,255,255,.5); | |
38 | text-transform: uppercase; | |
39 | } | |
40 | // Space them out when they follow another list item (link) | |
41 | .nav li + .nav-header { | |
42 | margin-top: 9px; | |
43 | } | |
44 | ||
45 | ||
46 | ||
47 | // NAV LIST | |
48 | // -------- | |
49 | ||
50 | .nav-list { | |
51 | padding-left: 15px; | |
52 | padding-right: 15px; | |
53 | margin-bottom: 0; | |
54 | } | |
55 | .nav-list > li > a, | |
56 | .nav-list .nav-header { | |
57 | margin-left: -15px; | |
58 | margin-right: -15px; | |
59 | text-shadow: 0 1px 0 rgba(255,255,255,.5); | |
60 | } | |
61 | .nav-list > li > a { | |
62 | padding: 3px 15px; | |
63 | } | |
64 | .nav-list > .active > a, | |
65 | .nav-list > .active > a:hover { | |
66 | color: @white; | |
67 | text-shadow: 0 -1px 0 rgba(0,0,0,.2); | |
68 | background-color: @linkColor; | |
69 | } | |
70 | .nav-list [class^="icon-"] { | |
71 | margin-right: 2px; | |
72 | } | |
73 | // Dividers (basically an hr) within the dropdown | |
74 | .nav-list .divider { | |
75 | .nav-divider(); | |
76 | } | |
77 | ||
78 | ||
79 | ||
80 | // TABS AND PILLS | |
81 | // ------------- | |
82 | ||
83 | // Common styles | |
84 | .nav-tabs, | |
85 | .nav-pills { | |
86 | .clearfix(); | |
87 | } | |
88 | .nav-tabs > li, | |
89 | .nav-pills > li { | |
90 | float: left; | |
91 | } | |
92 | .nav-tabs > li > a, | |
93 | .nav-pills > li > a { | |
94 | padding-right: 12px; | |
95 | padding-left: 12px; | |
96 | margin-right: 2px; | |
97 | line-height: 14px; // keeps the overall height an even number | |
98 | } | |
99 | ||
100 | // TABS | |
101 | // ---- | |
102 | ||
103 | // Give the tabs something to sit on | |
104 | .nav-tabs { | |
105 | border-bottom: 1px solid #ddd; | |
106 | } | |
107 | // Make the list-items overlay the bottom border | |
108 | .nav-tabs > li { | |
109 | margin-bottom: -1px; | |
110 | } | |
111 | // Actual tabs (as links) | |
112 | .nav-tabs > li > a { | |
113 | padding-top: 8px; | |
114 | padding-bottom: 8px; | |
115 | line-height: @baseLineHeight; | |
116 | border: 1px solid transparent; | |
117 | .border-radius(4px 4px 0 0); | |
118 | &:hover { | |
119 | border-color: @grayLighter @grayLighter #ddd; | |
120 | } | |
121 | } | |
122 | // Active state, and it's :hover to override normal :hover | |
123 | .nav-tabs > .active > a, | |
124 | .nav-tabs > .active > a:hover { | |
125 | color: @gray; | |
126 | background-color: @white; | |
127 | border: 1px solid #ddd; | |
128 | border-bottom-color: transparent; | |
129 | cursor: default; | |
130 | } | |
131 | ||
132 | ||
133 | // PILLS | |
134 | // ----- | |
135 | ||
136 | // Links rendered as pills | |
137 | .nav-pills > li > a { | |
138 | padding-top: 8px; | |
139 | padding-bottom: 8px; | |
140 | margin-top: 2px; | |
141 | margin-bottom: 2px; | |
142 | .border-radius(5px); | |
143 | } | |
144 | ||
145 | // Active state | |
146 | .nav-pills > .active > a, | |
147 | .nav-pills > .active > a:hover { | |
148 | color: @white; | |
149 | background-color: @linkColor; | |
150 | } | |
151 | ||
152 | ||
153 | ||
154 | // STACKED NAV | |
155 | // ----------- | |
156 | ||
157 | // Stacked tabs and pills | |
158 | .nav-stacked > li { | |
159 | float: none; | |
160 | } | |
161 | .nav-stacked > li > a { | |
162 | margin-right: 0; // no need for the gap between nav items | |
163 | } | |
164 | ||
165 | // Tabs | |
166 | .nav-tabs.nav-stacked { | |
167 | border-bottom: 0; | |
168 | } | |
169 | .nav-tabs.nav-stacked > li > a { | |
170 | border: 1px solid #ddd; | |
171 | .border-radius(0); | |
172 | } | |
173 | .nav-tabs.nav-stacked > li:first-child > a { | |
174 | .border-top-radius(4px); | |
175 | } | |
176 | .nav-tabs.nav-stacked > li:last-child > a { | |
177 | .border-bottom-radius(4px); | |
178 | } | |
179 | .nav-tabs.nav-stacked > li > a:hover { | |
180 | border-color: #ddd; | |
181 | z-index: 2; | |
182 | } | |
183 | ||
184 | // Pills | |
185 | .nav-pills.nav-stacked > li > a { | |
186 | margin-bottom: 3px; | |
187 | } | |
188 | .nav-pills.nav-stacked > li:last-child > a { | |
189 | margin-bottom: 1px; // decrease margin to match sizing of stacked tabs | |
190 | } | |
191 | ||
192 | ||
193 | ||
194 | // DROPDOWNS | |
195 | // --------- | |
196 | ||
197 | .nav-tabs .dropdown-menu { | |
198 | .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu | |
199 | } | |
200 | .nav-pills .dropdown-menu { | |
201 | .border-radius(6px); // make rounded corners match the pills | |
202 | } | |
203 | ||
204 | // Default dropdown links | |
205 | // ------------------------- | |
206 | // Make carets use linkColor to start | |
207 | .nav .dropdown-toggle .caret { | |
208 | border-top-color: @linkColor; | |
209 | border-bottom-color: @linkColor; | |
210 | margin-top: 6px; | |
211 | } | |
212 | .nav .dropdown-toggle:hover .caret { | |
213 | border-top-color: @linkColorHover; | |
214 | border-bottom-color: @linkColorHover; | |
215 | } | |
216 | /* move down carets for tabs */ | |
217 | .nav-tabs .dropdown-toggle .caret { | |
218 | margin-top: 8px; | |
219 | } | |
220 | ||
221 | // Active dropdown links | |
222 | // ------------------------- | |
223 | .nav .active .dropdown-toggle .caret { | |
224 | border-top-color: #fff; | |
225 | border-bottom-color: #fff; | |
226 | } | |
227 | .nav-tabs .active .dropdown-toggle .caret { | |
228 | border-top-color: @gray; | |
229 | border-bottom-color: @gray; | |
230 | } | |
231 | ||
232 | // Active:hover dropdown links | |
233 | // ------------------------- | |
234 | .nav > .dropdown.active > a:hover { | |
235 | cursor: pointer; | |
236 | } | |
237 | ||
238 | // Open dropdowns | |
239 | // ------------------------- | |
240 | .nav-tabs .open .dropdown-toggle, | |
241 | .nav-pills .open .dropdown-toggle, | |
242 | .nav > li.dropdown.open.active > a:hover { | |
243 | color: @white; | |
244 | background-color: @grayLight; | |
245 | border-color: @grayLight; | |
246 | } | |
247 | .nav li.dropdown.open .caret, | |
248 | .nav li.dropdown.open.active .caret, | |
249 | .nav li.dropdown.open a:hover .caret { | |
250 | border-top-color: @white; | |
251 | border-bottom-color: @white; | |
252 | .opacity(100); | |
253 | } | |
254 | ||
255 | // Dropdowns in stacked tabs | |
256 | .tabs-stacked .open > a:hover { | |
257 | border-color: @grayLight; | |
258 | } | |
259 | ||
260 | ||
261 | ||
262 | // TABBABLE | |
263 | // -------- | |
264 | ||
265 | ||
266 | // COMMON STYLES | |
267 | // ------------- | |
268 | ||
269 | // Clear any floats | |
270 | .tabbable { | |
271 | .clearfix(); | |
272 | } | |
273 | .tab-content { | |
274 | overflow: auto; // prevent content from running below tabs | |
275 | } | |
276 | ||
277 | // Remove border on bottom, left, right | |
278 | .tabs-below > .nav-tabs, | |
279 | .tabs-right > .nav-tabs, | |
280 | .tabs-left > .nav-tabs { | |
281 | border-bottom: 0; | |
282 | } | |
283 | ||
284 | // Show/hide tabbable areas | |
285 | .tab-content > .tab-pane, | |
286 | .pill-content > .pill-pane { | |
287 | display: none; | |
288 | } | |
289 | .tab-content > .active, | |
290 | .pill-content > .active { | |
291 | display: block; | |
292 | } | |
293 | ||
294 | ||
295 | // BOTTOM | |
296 | // ------ | |
297 | ||
298 | .tabs-below > .nav-tabs { | |
299 | border-top: 1px solid #ddd; | |
300 | } | |
301 | .tabs-below > .nav-tabs > li { | |
302 | margin-top: -1px; | |
303 | margin-bottom: 0; | |
304 | } | |
305 | .tabs-below > .nav-tabs > li > a { | |
306 | .border-radius(0 0 4px 4px); | |
307 | &:hover { | |
308 | border-bottom-color: transparent; | |
309 | border-top-color: #ddd; | |
310 | } | |
311 | } | |
312 | .tabs-below > .nav-tabs > .active > a, | |
313 | .tabs-below > .nav-tabs > .active > a:hover { | |
314 | border-color: transparent #ddd #ddd #ddd; | |
315 | } | |
316 | ||
317 | // LEFT & RIGHT | |
318 | // ------------ | |
319 | ||
320 | // Common styles | |
321 | .tabs-left > .nav-tabs > li, | |
322 | .tabs-right > .nav-tabs > li { | |
323 | float: none; | |
324 | } | |
325 | .tabs-left > .nav-tabs > li > a, | |
326 | .tabs-right > .nav-tabs > li > a { | |
327 | min-width: 74px; | |
328 | margin-right: 0; | |
329 | margin-bottom: 3px; | |
330 | } | |
331 | ||
332 | // Tabs on the left | |
333 | .tabs-left > .nav-tabs { | |
334 | float: left; | |
335 | margin-right: 19px; | |
336 | border-right: 1px solid #ddd; | |
337 | } | |
338 | .tabs-left > .nav-tabs > li > a { | |
339 | margin-right: -1px; | |
340 | .border-radius(4px 0 0 4px); | |
341 | } | |
342 | .tabs-left > .nav-tabs > li > a:hover { | |
343 | border-color: @grayLighter #ddd @grayLighter @grayLighter; | |
344 | } | |
345 | .tabs-left > .nav-tabs .active > a, | |
346 | .tabs-left > .nav-tabs .active > a:hover { | |
347 | border-color: #ddd transparent #ddd #ddd; | |
348 | *border-right-color: @white; | |
349 | } | |
350 | ||
351 | // Tabs on the right | |
352 | .tabs-right > .nav-tabs { | |
353 | float: right; | |
354 | margin-left: 19px; | |
355 | border-left: 1px solid #ddd; | |
356 | } | |
357 | .tabs-right > .nav-tabs > li > a { | |
358 | margin-left: -1px; | |
359 | .border-radius(0 4px 4px 0); | |
360 | } | |
361 | .tabs-right > .nav-tabs > li > a:hover { | |
362 | border-color: @grayLighter @grayLighter @grayLighter #ddd; | |
363 | } | |
364 | .tabs-right > .nav-tabs .active > a, | |
365 | .tabs-right > .nav-tabs .active > a:hover { | |
366 | border-color: #ddd #ddd #ddd transparent; | |
367 | *border-left-color: @white; | |
368 | } | |
369 | ||
370 | ||
371 | ||
372 | // DISABLED STATES | |
373 | // --------------- | |
374 | ||
375 | // Gray out text | |
376 | .nav > .disabled > a { | |
377 | color: @grayLight; | |
378 | } | |
379 | // Nuke hover effects | |
380 | .nav > .disabled > a:hover { | |
381 | text-decoration: none; | |
382 | background-color: transparent; | |
383 | cursor: default; | |
384 | } |