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