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