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