1//
2// Navbars (Redux)
3// --------------------------------------------------
4
5
6// COMMON STYLES
7// -------------
8
9// Base class and wrapper
10.navbar {
11  overflow: visible;
12  margin-bottom: @baseLineHeight;
13
14  // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
15  *position: relative;
16  *z-index: 2;
17}
18
19// Inner for background effects
20// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
21.navbar-inner {
22  min-height: @navbarHeight;
23  padding-left:  20px;
24  padding-right: 20px;
25  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
26  border: 1px solid @navbarBorder;
27  .border-radius(@baseBorderRadius);
28  .box-shadow(0 1px 4px rgba(0,0,0,.065));
29
30  // Prevent floats from breaking the navbar
31  .clearfix();
32}
33
34// Set width to auto for default container
35// We then reset it for fixed navbars in the #gridSystem mixin
36.navbar .container {
37  width: auto;
38}
39
40// Override the default collapsed state
41.nav-collapse.collapse {
42  height: auto;
43  overflow: visible;
44}
45
46
47// Brand: website or project name
48// -------------------------
49.navbar .brand {
50  float: left;
51  display: block;
52  // Vertically center the text given @navbarHeight
53  padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
54  margin-left: -20px; // negative indent to left-align the text down the page
55  font-size: 20px;
56  font-weight: 200;
57  color: @navbarBrandColor;
58  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
59  &:hover,
60  &:focus {
61    text-decoration: none;
62  }
63}
64
65// Plain text in topbar
66// -------------------------
67.navbar-text {
68  margin-bottom: 0;
69  line-height: @navbarHeight;
70  color: @navbarText;
71}
72
73// Janky solution for now to account for links outside the .nav
74// -------------------------
75.navbar-link {
76  color: @navbarLinkColor;
77  &:hover,
78  &:focus {
79    color: @navbarLinkColorHover;
80  }
81}
82
83// Dividers in navbar
84// -------------------------
85.navbar .divider-vertical {
86  height: @navbarHeight;
87  margin: 0 9px;
88  border-left: 1px solid @navbarBackground;
89  border-right: 1px solid @navbarBackgroundHighlight;
90}
91
92// Buttons in navbar
93// -------------------------
94.navbar .btn,
95.navbar .btn-group {
96  .navbarVerticalAlign(30px); // Vertically center in navbar
97}
98.navbar .btn-group .btn,
99.navbar .input-prepend .btn,
100.navbar .input-append .btn,
101.navbar .input-prepend .btn-group,
102.navbar .input-append .btn-group {
103  margin-top: 0; // then undo the margin here so we don't accidentally double it
104}
105
106// Navbar forms
107// -------------------------
108.navbar-form {
109  margin-bottom: 0; // remove default bottom margin
110  .clearfix();
111  input,
112  select,
113  .radio,
114  .checkbox {
115    .navbarVerticalAlign(30px); // Vertically center in navbar
116  }
117  input,
118  select,
119  .btn {
120    display: inline-block;
121    margin-bottom: 0;
122  }
123  input[type="image"],
124  input[type="checkbox"],
125  input[type="radio"] {
126    margin-top: 3px;
127  }
128  .input-append,
129  .input-prepend {
130    margin-top: 5px;
131    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
132    input {
133      margin-top: 0; // remove the margin on top since it's on the parent
134    }
135  }
136}
137
138// Navbar search
139// -------------------------
140.navbar-search {
141  position: relative;
142  float: left;
143  .navbarVerticalAlign(30px); // Vertically center in navbar
144  margin-bottom: 0;
145  .search-query {
146    margin-bottom: 0;
147    padding: 4px 14px;
148    #font > .sans-serif(13px, normal, 1);
149    .border-radius(15px); // redeclare because of specificity of the type attribute
150  }
151}
152
153
154
155// Static navbar
156// -------------------------
157
158.navbar-static-top {
159  position: static;
160  margin-bottom: 0; // remove 18px margin for default navbar
161  .navbar-inner {
162    .border-radius(0);
163  }
164}
165
166
167
168// Fixed navbar
169// -------------------------
170
171// Shared (top/bottom) styles
172.navbar-fixed-top,
173.navbar-fixed-bottom {
174  position: fixed;
175  right: 0;
176  left: 0;
177  z-index: @zindexFixedNavbar;
178  margin-bottom: 0; // remove 18px margin for default navbar
179}
180.navbar-fixed-top .navbar-inner,
181.navbar-static-top .navbar-inner {
182  border-width: 0 0 1px;
183}
184.navbar-fixed-bottom .navbar-inner {
185  border-width: 1px 0 0;
186}
187.navbar-fixed-top .navbar-inner,
188.navbar-fixed-bottom .navbar-inner {
189  padding-left:  0;
190  padding-right: 0;
191  .border-radius(0);
192}
193
194// Reset container width
195// Required here as we reset the width earlier on and the grid mixins don't override early enough
196.navbar-static-top .container,
197.navbar-fixed-top .container,
198.navbar-fixed-bottom .container {
199  #grid > .core > .span(@gridColumns);
200}
201
202// Fixed to top
203.navbar-fixed-top {
204  top: 0;
205}
206.navbar-fixed-top,
207.navbar-static-top {
208  .navbar-inner {
209    .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
210  }
211}
212
213// Fixed to bottom
214.navbar-fixed-bottom {
215  bottom: 0;
216  .navbar-inner {
217    .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
218  }
219}
220
221
222
223// NAVIGATION
224// ----------
225
226.navbar .nav {
227  position: relative;
228  left: 0;
229  display: block;
230  float: left;
231  margin: 0 10px 0 0;
232}
233.navbar .nav.pull-right {
234  float: right; // redeclare due to specificity
235  margin-right: 0; // remove margin on float right nav
236}
237.navbar .nav > li {
238  float: left;
239}
240
241// Links
242.navbar .nav > li > a {
243  float: none;
244  // Vertically center the text given @navbarHeight
245  padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
246  color: @navbarLinkColor;
247  text-decoration: none;
248  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
249}
250.navbar .nav .dropdown-toggle .caret {
251  margin-top: 8px;
252}
253
254// Hover/focus
255.navbar .nav > li > a:focus,
256.navbar .nav > li > a:hover {
257  background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
258  color: @navbarLinkColorHover;
259  text-decoration: none;
260}
261
262// Active nav items
263.navbar .nav > .active > a,
264.navbar .nav > .active > a:hover,
265.navbar .nav > .active > a:focus {
266  color: @navbarLinkColorActive;
267  text-decoration: none;
268  background-color: @navbarLinkBackgroundActive;
269  .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
270}
271
272// Navbar button for toggling navbar items in responsive layouts
273// These definitions need to come after '.navbar .btn'
274.navbar .btn-navbar {
275  display: none;
276  float: right;
277  padding: 7px 10px;
278  margin-left: 5px;
279  margin-right: 5px;
280  .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
281  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
282}
283.navbar .btn-navbar .icon-bar {
284  display: block;
285  width: 18px;
286  height: 2px;
287  background-color: #f5f5f5;
288  .border-radius(1px);
289  .box-shadow(0 1px 0 rgba(0,0,0,.25));
290}
291.btn-navbar .icon-bar + .icon-bar {
292  margin-top: 3px;
293}
294
295
296
297// Dropdown menus
298// --------------
299
300// Menu position and menu carets
301.navbar .nav > li > .dropdown-menu {
302  &:before {
303    content: '';
304    display: inline-block;
305    border-left:   7px solid transparent;
306    border-right:  7px solid transparent;
307    border-bottom: 7px solid #ccc;
308    border-bottom-color: @dropdownBorder;
309    position: absolute;
310    top: -7px;
311    left: 9px;
312  }
313  &:after {
314    content: '';
315    display: inline-block;
316    border-left:   6px solid transparent;
317    border-right:  6px solid transparent;
318    border-bottom: 6px solid @dropdownBackground;
319    position: absolute;
320    top: -6px;
321    left: 10px;
322  }
323}
324// Menu position and menu caret support for dropups via extra dropup class
325.navbar-fixed-bottom .nav > li > .dropdown-menu {
326  &:before {
327    border-top: 7px solid #ccc;
328    border-top-color: @dropdownBorder;
329    border-bottom: 0;
330    bottom: -7px;
331    top: auto;
332  }
333  &:after {
334    border-top: 6px solid @dropdownBackground;
335    border-bottom: 0;
336    bottom: -6px;
337    top: auto;
338  }
339}
340
341// Caret should match text color on hover/focus
342.navbar .nav li.dropdown > a:hover .caret,
343.navbar .nav li.dropdown > a:focus .caret {
344  border-top-color: @navbarLinkColorHover;
345  border-bottom-color: @navbarLinkColorHover;
346}
347
348// Remove background color from open dropdown
349.navbar .nav li.dropdown.open > .dropdown-toggle,
350.navbar .nav li.dropdown.active > .dropdown-toggle,
351.navbar .nav li.dropdown.open.active > .dropdown-toggle {
352  background-color: @navbarLinkBackgroundActive;
353  color: @navbarLinkColorActive;
354}
355.navbar .nav li.dropdown > .dropdown-toggle .caret {
356  border-top-color: @navbarLinkColor;
357  border-bottom-color: @navbarLinkColor;
358}
359.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
360.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
361.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
362  border-top-color: @navbarLinkColorActive;
363  border-bottom-color: @navbarLinkColorActive;
364}
365
366// Right aligned menus need alt position
367.navbar .pull-right > li > .dropdown-menu,
368.navbar .nav > li > .dropdown-menu.pull-right {
369  left: auto;
370  right: 0;
371  &:before {
372    left: auto;
373    right: 12px;
374  }
375  &:after {
376    left: auto;
377    right: 13px;
378  }
379  .dropdown-menu {
380    left: auto;
381    right: 100%;
382    margin-left: 0;
383    margin-right: -1px;
384    .border-radius(6px 0 6px 6px);
385  }
386}
387
388
389// Inverted navbar
390// -------------------------
391
392.navbar-inverse {
393
394  .navbar-inner {
395    #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
396    border-color: @navbarInverseBorder;
397  }
398
399  .brand,
400  .nav > li > a {
401    color: @navbarInverseLinkColor;
402    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
403    &:hover,
404    &:focus {
405      color: @navbarInverseLinkColorHover;
406    }
407  }
408
409  .brand {
410    color: @navbarInverseBrandColor;
411  }
412
413  .navbar-text {
414    color: @navbarInverseText;
415  }
416
417  .nav > li > a:focus,
418  .nav > li > a:hover {
419    background-color: @navbarInverseLinkBackgroundHover;
420    color: @navbarInverseLinkColorHover;
421  }
422
423  .nav .active > a,
424  .nav .active > a:hover,
425  .nav .active > a:focus {
426    color: @navbarInverseLinkColorActive;
427    background-color: @navbarInverseLinkBackgroundActive;
428  }
429
430  // Inline text links
431  .navbar-link {
432    color: @navbarInverseLinkColor;
433    &:hover,
434    &:focus {
435      color: @navbarInverseLinkColorHover;
436    }
437  }
438
439  // Dividers in navbar
440  .divider-vertical {
441    border-left-color: @navbarInverseBackground;
442    border-right-color: @navbarInverseBackgroundHighlight;
443  }
444
445  // Dropdowns
446  .nav li.dropdown.open > .dropdown-toggle,
447  .nav li.dropdown.active > .dropdown-toggle,
448  .nav li.dropdown.open.active > .dropdown-toggle {
449    background-color: @navbarInverseLinkBackgroundActive;
450    color: @navbarInverseLinkColorActive;
451  }
452  .nav li.dropdown > a:hover .caret,
453  .nav li.dropdown > a:focus .caret {
454    border-top-color: @navbarInverseLinkColorActive;
455    border-bottom-color: @navbarInverseLinkColorActive;
456  }
457  .nav li.dropdown > .dropdown-toggle .caret {
458    border-top-color: @navbarInverseLinkColor;
459    border-bottom-color: @navbarInverseLinkColor;
460  }
461  .nav li.dropdown.open > .dropdown-toggle .caret,
462  .nav li.dropdown.active > .dropdown-toggle .caret,
463  .nav li.dropdown.open.active > .dropdown-toggle .caret {
464    border-top-color: @navbarInverseLinkColorActive;
465    border-bottom-color: @navbarInverseLinkColorActive;
466  }
467
468  // Navbar search
469  .navbar-search {
470    .search-query {
471      color: @white;
472      background-color: @navbarInverseSearchBackground;
473      border-color: @navbarInverseSearchBorder;
474      .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
475      .transition(none);
476      .placeholder(@navbarInverseSearchPlaceholderColor);
477
478      // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
479      &:focus,
480      &.focused {
481        padding: 5px 15px;
482        color: @grayDark;
483        text-shadow: 0 1px 0 @white;
484        background-color: @navbarInverseSearchBackgroundFocus;
485        border: 0;
486        .box-shadow(0 0 3px rgba(0,0,0,.15));
487        outline: 0;
488      }
489    }
490  }
491
492  // Navbar collapse button
493  .btn-navbar {
494    .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
495  }
496
497}
498