]>
Commit | Line | Data |
---|---|---|
7b869721 S |
1 | // |
2 | // Navbars | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | // Wrapper and base class | |
7 | // | |
8 | // Provide a static navbar from which we expand to create full-width, fixed, and | |
9 | // other navbar variations. | |
10 | ||
11 | .navbar { | |
12 | position: relative; | |
13 | min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) | |
14 | margin-bottom: @navbar-margin-bottom; | |
15 | border: 1px solid transparent; | |
16 | ||
17 | // Prevent floats from breaking the navbar | |
18 | .clearfix(); | |
19 | ||
20 | @media (min-width: @grid-float-breakpoint) { | |
21 | border-radius: @navbar-border-radius; | |
22 | } | |
23 | } | |
24 | ||
25 | ||
26 | // Navbar heading | |
27 | // | |
28 | // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy | |
29 | // styling of responsive aspects. | |
30 | ||
31 | .navbar-header { | |
32 | .clearfix(); | |
33 | ||
34 | @media (min-width: @grid-float-breakpoint) { | |
35 | float: left; | |
36 | } | |
37 | } | |
38 | ||
39 | ||
40 | // Navbar collapse (body) | |
41 | // | |
42 | // Group your navbar content into this for easy collapsing and expanding across | |
43 | // various device sizes. By default, this content is collapsed when <768px, but | |
44 | // will expand past that for a horizontal display. | |
45 | // | |
46 | // To start (on mobile devices) the navbar links, forms, and buttons are stacked | |
47 | // vertically and include a `max-height` to overflow in case you have too much | |
48 | // content for the user's viewport. | |
49 | ||
50 | .navbar-collapse { | |
51 | max-height: 340px; | |
52 | overflow-x: visible; | |
53 | padding-right: @navbar-padding-horizontal; | |
54 | padding-left: @navbar-padding-horizontal; | |
55 | border-top: 1px solid transparent; | |
56 | box-shadow: inset 0 1px 0 rgba(255,255,255,.1); | |
57 | .clearfix(); | |
58 | -webkit-overflow-scrolling: touch; | |
59 | ||
60 | &.in { | |
61 | overflow-y: auto; | |
62 | } | |
63 | ||
64 | @media (min-width: @grid-float-breakpoint) { | |
65 | width: auto; | |
66 | border-top: 0; | |
67 | box-shadow: none; | |
68 | ||
69 | &.collapse { | |
70 | display: block !important; | |
71 | height: auto !important; | |
72 | padding-bottom: 0; // Override default setting | |
73 | overflow: visible !important; | |
74 | } | |
75 | ||
76 | &.in { | |
77 | overflow-y: auto; | |
78 | } | |
79 | ||
80 | // Account for first and last children spacing | |
81 | .navbar-nav.navbar-left:first-child { | |
82 | margin-left: -@navbar-padding-horizontal; | |
83 | } | |
84 | .navbar-nav.navbar-right:last-child { | |
85 | margin-right: -@navbar-padding-horizontal; | |
86 | } | |
87 | .navbar-text:last-child { | |
88 | margin-right: 0; | |
89 | } | |
90 | } | |
91 | } | |
92 | ||
93 | ||
94 | // Both navbar header and collapse | |
95 | // | |
96 | // When a container is present, change the behavior of the header and collapse. | |
97 | ||
98 | .container > .navbar-header, | |
99 | .container > .navbar-collapse { | |
100 | margin-right: -@navbar-padding-horizontal; | |
101 | margin-left: -@navbar-padding-horizontal; | |
102 | ||
103 | @media (min-width: @grid-float-breakpoint) { | |
104 | margin-right: 0; | |
105 | margin-left: 0; | |
106 | } | |
107 | } | |
108 | ||
109 | ||
110 | // | |
111 | // Navbar alignment options | |
112 | // | |
113 | // Display the navbar across the entirety of the page or fixed it to the top or | |
114 | // bottom of the page. | |
115 | ||
116 | // Static top (unfixed, but 100% wide) navbar | |
117 | .navbar-static-top { | |
118 | z-index: @zindex-navbar; | |
119 | border-width: 0 0 1px; | |
120 | ||
121 | @media (min-width: @grid-float-breakpoint) { | |
122 | border-radius: 0; | |
123 | } | |
124 | } | |
125 | ||
126 | // Fix the top/bottom navbars when screen real estate supports it | |
127 | .navbar-fixed-top, | |
128 | .navbar-fixed-bottom { | |
129 | position: fixed; | |
130 | right: 0; | |
131 | left: 0; | |
132 | z-index: @zindex-navbar-fixed; | |
133 | ||
134 | // Undo the rounded corners | |
135 | @media (min-width: @grid-float-breakpoint) { | |
136 | border-radius: 0; | |
137 | } | |
138 | } | |
139 | .navbar-fixed-top { | |
140 | top: 0; | |
141 | border-width: 0 0 1px; | |
142 | } | |
143 | .navbar-fixed-bottom { | |
144 | bottom: 0; | |
145 | margin-bottom: 0; // override .navbar defaults | |
146 | border-width: 1px 0 0; | |
147 | } | |
148 | ||
149 | ||
150 | // Brand/project name | |
151 | ||
152 | .navbar-brand { | |
153 | float: left; | |
154 | padding: @navbar-padding-vertical @navbar-padding-horizontal; | |
155 | font-size: @font-size-large; | |
156 | line-height: @line-height-computed; | |
157 | ||
158 | &:hover, | |
159 | &:focus { | |
160 | text-decoration: none; | |
161 | } | |
162 | ||
163 | @media (min-width: @grid-float-breakpoint) { | |
164 | .navbar > .container & { | |
165 | margin-left: -@navbar-padding-horizontal; | |
166 | } | |
167 | } | |
168 | } | |
169 | ||
170 | ||
171 | // Navbar toggle | |
172 | // | |
173 | // Custom button for toggling the `.navbar-collapse`, powered by the collapse | |
174 | // JavaScript plugin. | |
175 | ||
176 | .navbar-toggle { | |
177 | position: relative; | |
178 | float: right; | |
179 | margin-right: @navbar-padding-horizontal; | |
180 | padding: 9px 10px; | |
181 | .navbar-vertical-align(34px); | |
182 | background-color: transparent; | |
183 | border: 1px solid transparent; | |
184 | border-radius: @border-radius-base; | |
185 | ||
186 | // Bars | |
187 | .icon-bar { | |
188 | display: block; | |
189 | width: 22px; | |
190 | height: 2px; | |
191 | border-radius: 1px; | |
192 | } | |
193 | .icon-bar + .icon-bar { | |
194 | margin-top: 4px; | |
195 | } | |
196 | ||
197 | @media (min-width: @grid-float-breakpoint) { | |
198 | display: none; | |
199 | } | |
200 | } | |
201 | ||
202 | ||
203 | // Navbar nav links | |
204 | // | |
205 | // Builds on top of the `.nav` components with it's own modifier class to make | |
206 | // the nav the full height of the horizontal nav (above 768px). | |
207 | ||
208 | .navbar-nav { | |
209 | margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal; | |
210 | ||
211 | > li > a { | |
212 | padding-top: 10px; | |
213 | padding-bottom: 10px; | |
214 | line-height: @line-height-computed; | |
215 | } | |
216 | ||
217 | @media (max-width: @screen-xs-max) { | |
218 | // Dropdowns get custom display when collapsed | |
219 | .open .dropdown-menu { | |
220 | position: static; | |
221 | float: none; | |
222 | width: auto; | |
223 | margin-top: 0; | |
224 | background-color: transparent; | |
225 | border: 0; | |
226 | box-shadow: none; | |
227 | > li > a, | |
228 | .dropdown-header { | |
229 | padding: 5px 15px 5px 25px; | |
230 | } | |
231 | > li > a { | |
232 | line-height: @line-height-computed; | |
233 | &:hover, | |
234 | &:focus { | |
235 | background-image: none; | |
236 | } | |
237 | } | |
238 | } | |
239 | } | |
240 | ||
241 | // Uncollapse the nav | |
242 | @media (min-width: @grid-float-breakpoint) { | |
243 | float: left; | |
244 | margin: 0; | |
245 | ||
246 | > li { | |
247 | float: left; | |
248 | > a { | |
249 | padding-top: ((@navbar-height - @line-height-computed) / 2); | |
250 | padding-bottom: ((@navbar-height - @line-height-computed) / 2); | |
251 | } | |
252 | } | |
253 | } | |
254 | ||
255 | } | |
256 | ||
257 | ||
258 | // Component alignment | |
259 | // | |
260 | // Repurpose the pull utilities as their own navbar utilities to avoid specificity | |
261 | // issues with parents and chaining. Only do this when the navbar is uncollapsed | |
262 | // though so that navbar contents properly stack and align in mobile. | |
263 | ||
264 | @media (min-width: @grid-float-breakpoint) { | |
265 | .navbar-left { .pull-left(); } | |
266 | .navbar-right { .pull-right(); } | |
267 | } | |
268 | ||
269 | ||
270 | // Navbar form | |
271 | // | |
272 | // Extension of the `.form-inline` with some extra flavor for optimum display in | |
273 | // our navbars. | |
274 | ||
275 | .navbar-form { | |
276 | margin-left: -@navbar-padding-horizontal; | |
277 | margin-right: -@navbar-padding-horizontal; | |
278 | padding: 10px @navbar-padding-horizontal; | |
279 | border-top: 1px solid transparent; | |
280 | border-bottom: 1px solid transparent; | |
281 | @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); | |
282 | .box-shadow(@shadow); | |
283 | ||
284 | // Mixin behavior for optimum display | |
285 | .form-inline(); | |
286 | ||
287 | .form-group { | |
288 | @media (max-width: @screen-xs-max) { | |
289 | margin-bottom: 5px; | |
290 | } | |
291 | } | |
292 | ||
293 | // Vertically center in expanded, horizontal navbar | |
294 | .navbar-vertical-align(@input-height-base); | |
295 | ||
296 | // Undo 100% width for pull classes | |
297 | @media (min-width: @grid-float-breakpoint) { | |
298 | width: auto; | |
299 | border: 0; | |
300 | margin-left: 0; | |
301 | margin-right: 0; | |
302 | padding-top: 0; | |
303 | padding-bottom: 0; | |
304 | .box-shadow(none); | |
305 | } | |
306 | } | |
307 | ||
308 | ||
309 | // Dropdown menus | |
310 | ||
311 | // Menu position and menu carets | |
312 | .navbar-nav > li > .dropdown-menu { | |
313 | margin-top: 0; | |
314 | .border-top-radius(0); | |
315 | } | |
316 | // Menu position and menu caret support for dropups via extra dropup class | |
317 | .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { | |
318 | .border-bottom-radius(0); | |
319 | } | |
320 | ||
321 | // Right aligned menus need alt position | |
322 | .navbar-nav.pull-right > li > .dropdown-menu, | |
323 | .navbar-nav > li > .dropdown-menu.pull-right { | |
324 | left: auto; | |
325 | right: 0; | |
326 | } | |
327 | ||
328 | ||
329 | // Buttons in navbars | |
330 | // | |
331 | // Vertically center a button within a navbar (when *not* in a form). | |
332 | ||
333 | .navbar-btn { | |
334 | .navbar-vertical-align(@input-height-base); | |
335 | } | |
336 | ||
337 | ||
338 | // Text in navbars | |
339 | // | |
340 | // Add a class to make any element properly align itself vertically within the navbars. | |
341 | ||
342 | .navbar-text { | |
343 | float: left; | |
344 | .navbar-vertical-align(@line-height-computed); | |
345 | ||
346 | @media (min-width: @grid-float-breakpoint) { | |
347 | margin-left: @navbar-padding-horizontal; | |
348 | margin-right: @navbar-padding-horizontal; | |
349 | } | |
350 | } | |
351 | ||
352 | // Alternate navbars | |
353 | // -------------------------------------------------- | |
354 | ||
355 | // Default navbar | |
356 | .navbar-default { | |
357 | background-color: @navbar-default-bg; | |
358 | border-color: @navbar-default-border; | |
359 | ||
360 | .navbar-brand { | |
361 | color: @navbar-default-brand-color; | |
362 | &:hover, | |
363 | &:focus { | |
364 | color: @navbar-default-brand-hover-color; | |
365 | background-color: @navbar-default-brand-hover-bg; | |
366 | } | |
367 | } | |
368 | ||
369 | .navbar-text { | |
370 | color: @navbar-default-color; | |
371 | } | |
372 | ||
373 | .navbar-nav { | |
374 | > li > a { | |
375 | color: @navbar-default-link-color; | |
376 | ||
377 | &:hover, | |
378 | &:focus { | |
379 | color: @navbar-default-link-hover-color; | |
380 | background-color: @navbar-default-link-hover-bg; | |
381 | } | |
382 | } | |
383 | > .active > a { | |
384 | &, | |
385 | &:hover, | |
386 | &:focus { | |
387 | color: @navbar-default-link-active-color; | |
388 | background-color: @navbar-default-link-active-bg; | |
389 | } | |
390 | } | |
391 | > .disabled > a { | |
392 | &, | |
393 | &:hover, | |
394 | &:focus { | |
395 | color: @navbar-default-link-disabled-color; | |
396 | background-color: @navbar-default-link-disabled-bg; | |
397 | } | |
398 | } | |
399 | } | |
400 | ||
401 | .navbar-toggle { | |
402 | border-color: @navbar-default-toggle-border-color; | |
403 | &:hover, | |
404 | &:focus { | |
405 | background-color: @navbar-default-toggle-hover-bg; | |
406 | } | |
407 | .icon-bar { | |
408 | background-color: @navbar-default-toggle-icon-bar-bg; | |
409 | } | |
410 | } | |
411 | ||
412 | .navbar-collapse, | |
413 | .navbar-form { | |
414 | border-color: @navbar-default-border; | |
415 | } | |
416 | ||
417 | // Dropdown menu items and carets | |
418 | .navbar-nav { | |
419 | // Caret should match text color on hover | |
420 | > .dropdown > a:hover .caret, | |
421 | > .dropdown > a:focus .caret { | |
422 | border-top-color: @navbar-default-link-hover-color; | |
423 | border-bottom-color: @navbar-default-link-hover-color; | |
424 | } | |
425 | ||
426 | // Remove background color from open dropdown | |
427 | > .open > a { | |
428 | &, | |
429 | &:hover, | |
430 | &:focus { | |
431 | background-color: @navbar-default-link-active-bg; | |
432 | color: @navbar-default-link-active-color; | |
433 | .caret { | |
434 | border-top-color: @navbar-default-link-active-color; | |
435 | border-bottom-color: @navbar-default-link-active-color; | |
436 | } | |
437 | } | |
438 | } | |
439 | > .dropdown > a .caret { | |
440 | border-top-color: @navbar-default-link-color; | |
441 | border-bottom-color: @navbar-default-link-color; | |
442 | } | |
443 | ||
444 | ||
445 | @media (max-width: @screen-xs-max) { | |
446 | // Dropdowns get custom display when collapsed | |
447 | .open .dropdown-menu { | |
448 | > li > a { | |
449 | color: @navbar-default-link-color; | |
450 | &:hover, | |
451 | &:focus { | |
452 | color: @navbar-default-link-hover-color; | |
453 | background-color: @navbar-default-link-hover-bg; | |
454 | } | |
455 | } | |
456 | > .active > a { | |
457 | &, | |
458 | &:hover, | |
459 | &:focus { | |
460 | color: @navbar-default-link-active-color; | |
461 | background-color: @navbar-default-link-active-bg; | |
462 | } | |
463 | } | |
464 | > .disabled > a { | |
465 | &, | |
466 | &:hover, | |
467 | &:focus { | |
468 | color: @navbar-default-link-disabled-color; | |
469 | background-color: @navbar-default-link-disabled-bg; | |
470 | } | |
471 | } | |
472 | } | |
473 | } | |
474 | } | |
475 | ||
476 | ||
477 | // Links in navbars | |
478 | // | |
479 | // Add a class to ensure links outside the navbar nav are colored correctly. | |
480 | ||
481 | .navbar-link { | |
482 | color: @navbar-default-link-color; | |
483 | &:hover { | |
484 | color: @navbar-default-link-hover-color; | |
485 | } | |
486 | } | |
487 | ||
488 | } | |
489 | ||
490 | // Inverse navbar | |
491 | ||
492 | .navbar-inverse { | |
493 | background-color: @navbar-inverse-bg; | |
494 | border-color: @navbar-inverse-border; | |
495 | ||
496 | .navbar-brand { | |
497 | color: @navbar-inverse-brand-color; | |
498 | &:hover, | |
499 | &:focus { | |
500 | color: @navbar-inverse-brand-hover-color; | |
501 | background-color: @navbar-inverse-brand-hover-bg; | |
502 | } | |
503 | } | |
504 | ||
505 | .navbar-text { | |
506 | color: @navbar-inverse-color; | |
507 | } | |
508 | ||
509 | .navbar-nav { | |
510 | > li > a { | |
511 | color: @navbar-inverse-link-color; | |
512 | ||
513 | &:hover, | |
514 | &:focus { | |
515 | color: @navbar-inverse-link-hover-color; | |
516 | background-color: @navbar-inverse-link-hover-bg; | |
517 | } | |
518 | } | |
519 | > .active > a { | |
520 | &, | |
521 | &:hover, | |
522 | &:focus { | |
523 | color: @navbar-inverse-link-active-color; | |
524 | background-color: @navbar-inverse-link-active-bg; | |
525 | } | |
526 | } | |
527 | > .disabled > a { | |
528 | &, | |
529 | &:hover, | |
530 | &:focus { | |
531 | color: @navbar-inverse-link-disabled-color; | |
532 | background-color: @navbar-inverse-link-disabled-bg; | |
533 | } | |
534 | } | |
535 | } | |
536 | ||
537 | // Darken the responsive nav toggle | |
538 | .navbar-toggle { | |
539 | border-color: @navbar-inverse-toggle-border-color; | |
540 | &:hover, | |
541 | &:focus { | |
542 | background-color: @navbar-inverse-toggle-hover-bg; | |
543 | } | |
544 | .icon-bar { | |
545 | background-color: @navbar-inverse-toggle-icon-bar-bg; | |
546 | } | |
547 | } | |
548 | ||
549 | .navbar-collapse, | |
550 | .navbar-form { | |
551 | border-color: darken(@navbar-inverse-bg, 7%); | |
552 | } | |
553 | ||
554 | // Dropdowns | |
555 | .navbar-nav { | |
556 | > .open > a { | |
557 | &, | |
558 | &:hover, | |
559 | &:focus { | |
560 | background-color: @navbar-inverse-link-active-bg; | |
561 | color: @navbar-inverse-link-active-color; | |
562 | } | |
563 | } | |
564 | > .dropdown > a:hover .caret { | |
565 | border-top-color: @navbar-inverse-link-hover-color; | |
566 | border-bottom-color: @navbar-inverse-link-hover-color; | |
567 | } | |
568 | > .dropdown > a .caret { | |
569 | border-top-color: @navbar-inverse-link-color; | |
570 | border-bottom-color: @navbar-inverse-link-color; | |
571 | } | |
572 | > .open > a { | |
573 | &, | |
574 | &:hover, | |
575 | &:focus { | |
576 | .caret { | |
577 | border-top-color: @navbar-inverse-link-active-color; | |
578 | border-bottom-color: @navbar-inverse-link-active-color; | |
579 | } | |
580 | } | |
581 | } | |
582 | ||
583 | @media (max-width: @screen-xs-max) { | |
584 | // Dropdowns get custom display | |
585 | .open .dropdown-menu { | |
586 | > .dropdown-header { | |
587 | border-color: @navbar-inverse-border; | |
588 | } | |
589 | > li > a { | |
590 | color: @navbar-inverse-link-color; | |
591 | &:hover, | |
592 | &:focus { | |
593 | color: @navbar-inverse-link-hover-color; | |
594 | background-color: @navbar-inverse-link-hover-bg; | |
595 | } | |
596 | } | |
597 | > .active > a { | |
598 | &, | |
599 | &:hover, | |
600 | &:focus { | |
601 | color: @navbar-inverse-link-active-color; | |
602 | background-color: @navbar-inverse-link-active-bg; | |
603 | } | |
604 | } | |
605 | > .disabled > a { | |
606 | &, | |
607 | &:hover, | |
608 | &:focus { | |
609 | color: @navbar-inverse-link-disabled-color; | |
610 | background-color: @navbar-inverse-link-disabled-bg; | |
611 | } | |
612 | } | |
613 | } | |
614 | } | |
615 | } | |
616 | ||
617 | .navbar-link { | |
618 | color: @navbar-inverse-link-color; | |
619 | &:hover { | |
620 | color: @navbar-inverse-link-hover-color; | |
621 | } | |
622 | } | |
623 | ||
624 | } |