corrade-nucleus-nucleons – Blame information for rev 20

Subversion Repositories:
Rev:
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 }