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