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      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.tb-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 > .tb-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  .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  .box-shadow(@shadow);
294
295  // Mixin behavior for optimum display
296  .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  .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    .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  .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  .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}
661