small refactor + fix brackets
[fnpeditor.git] / libs / bootstrap / less / navbar.less
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 }