corrade-nucleus-nucleons – Blame information for rev 20
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
20 | office | 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 | .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 | .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 | } |