source: trip-planner-front/node_modules/bootstrap/less/navbar.less@ fa375fe

Last change on this file since fa375fe was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

  • Property mode set to 100644
File size: 14.4 KB
Line 
1// stylelint-disable selector-max-type, selector-max-compound-selectors, selector-max-combinators, selector-max-class, declaration-no-important, selector-no-qualifying-type
2
3//
4// Navbars
5// --------------------------------------------------
6
7
8// Wrapper and base class
9//
10// Provide a static navbar from which we expand to create full-width, fixed, and
11// other navbar variations.
12
13.navbar {
14 position: relative;
15 min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
16 margin-bottom: @navbar-margin-bottom;
17 border: 1px solid transparent;
18
19 // Prevent floats from breaking the navbar
20 &:extend(.clearfix all);
21
22 @media (min-width: @grid-float-breakpoint) {
23 border-radius: @navbar-border-radius;
24 }
25}
26
27
28// Navbar heading
29//
30// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
31// styling of responsive aspects.
32
33.navbar-header {
34 &:extend(.clearfix all);
35
36 @media (min-width: @grid-float-breakpoint) {
37 float: left;
38 }
39}
40
41
42// Navbar collapse (body)
43//
44// Group your navbar content into this for easy collapsing and expanding across
45// various device sizes. By default, this content is collapsed when <768px, but
46// will expand past that for a horizontal display.
47//
48// To start (on mobile devices) the navbar links, forms, and buttons are stacked
49// vertically and include a `max-height` to overflow in case you have too much
50// content for the user's viewport.
51
52.navbar-collapse {
53 padding-right: @navbar-padding-horizontal;
54 padding-left: @navbar-padding-horizontal;
55 overflow-x: visible;
56 border-top: 1px solid transparent;
57 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
58 &:extend(.clearfix all);
59 -webkit-overflow-scrolling: touch;
60
61 &.in {
62 overflow-y: auto;
63 }
64
65 @media (min-width: @grid-float-breakpoint) {
66 width: auto;
67 border-top: 0;
68 box-shadow: none;
69
70 &.collapse {
71 display: block !important;
72 height: auto !important;
73 padding-bottom: 0; // Override default setting
74 overflow: visible !important;
75 }
76
77 &.in {
78 overflow-y: visible;
79 }
80
81 // Undo the collapse side padding for navbars with containers to ensure
82 // alignment of right-aligned contents.
83 .navbar-fixed-top &,
84 .navbar-static-top &,
85 .navbar-fixed-bottom & {
86 padding-right: 0;
87 padding-left: 0;
88 }
89 }
90}
91
92.navbar-fixed-top,
93.navbar-fixed-bottom {
94 .navbar-collapse {
95 max-height: @navbar-collapse-max-height;
96
97 @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
98 max-height: 200px;
99 }
100 }
101
102 // Fix the top/bottom navbars when screen real estate supports it
103 position: fixed;
104 right: 0;
105 left: 0;
106 z-index: @zindex-navbar-fixed;
107
108 // Undo the rounded corners
109 @media (min-width: @grid-float-breakpoint) {
110 border-radius: 0;
111 }
112}
113
114.navbar-fixed-top {
115 top: 0;
116 border-width: 0 0 1px;
117}
118.navbar-fixed-bottom {
119 bottom: 0;
120 margin-bottom: 0; // override .navbar defaults
121 border-width: 1px 0 0;
122}
123
124
125// Both navbar header and collapse
126//
127// When a container is present, change the behavior of the header and collapse.
128
129.container,
130.container-fluid {
131 > .navbar-header,
132 > .navbar-collapse {
133 margin-right: -@navbar-padding-horizontal;
134 margin-left: -@navbar-padding-horizontal;
135
136 @media (min-width: @grid-float-breakpoint) {
137 margin-right: 0;
138 margin-left: 0;
139 }
140 }
141}
142
143
144//
145// Navbar alignment options
146//
147// Display the navbar across the entirety of the page or fixed it to the top or
148// bottom of the page.
149
150// Static top (unfixed, but 100% wide) navbar
151.navbar-static-top {
152 z-index: @zindex-navbar;
153 border-width: 0 0 1px;
154
155 @media (min-width: @grid-float-breakpoint) {
156 border-radius: 0;
157 }
158}
159
160
161// Brand/project name
162
163.navbar-brand {
164 float: left;
165 height: @navbar-height;
166 padding: @navbar-padding-vertical @navbar-padding-horizontal;
167 font-size: @font-size-large;
168 line-height: @line-height-computed;
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 padding: 9px 10px;
197 margin-right: @navbar-padding-horizontal;
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 padding: 10px @navbar-padding-horizontal;
288 margin-right: -@navbar-padding-horizontal;
289 margin-left: -@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 padding-top: 0;
315 padding-bottom: 0;
316 margin-right: 0;
317 margin-left: 0;
318 border: 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-right: @navbar-padding-horizontal;
365 margin-left: @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 // Dropdown menu items
440 // Remove background color from open dropdown
441 > .open > a {
442 &,
443 &:hover,
444 &:focus {
445 color: @navbar-default-link-active-color;
446 background-color: @navbar-default-link-active-bg;
447 }
448 }
449
450 @media (max-width: @grid-float-breakpoint-max) {
451 // Dropdowns get custom display when collapsed
452 .open .dropdown-menu {
453 > li > a {
454 color: @navbar-default-link-color;
455 &:hover,
456 &:focus {
457 color: @navbar-default-link-hover-color;
458 background-color: @navbar-default-link-hover-bg;
459 }
460 }
461 > .active > a {
462 &,
463 &:hover,
464 &:focus {
465 color: @navbar-default-link-active-color;
466 background-color: @navbar-default-link-active-bg;
467 }
468 }
469 > .disabled > a {
470 &,
471 &:hover,
472 &:focus {
473 color: @navbar-default-link-disabled-color;
474 background-color: @navbar-default-link-disabled-bg;
475 }
476 }
477 }
478 }
479 }
480
481 .navbar-toggle {
482 border-color: @navbar-default-toggle-border-color;
483 &:hover,
484 &:focus {
485 background-color: @navbar-default-toggle-hover-bg;
486 }
487 .icon-bar {
488 background-color: @navbar-default-toggle-icon-bar-bg;
489 }
490 }
491
492 .navbar-collapse,
493 .navbar-form {
494 border-color: @navbar-default-border;
495 }
496
497
498 // Links in navbars
499 //
500 // Add a class to ensure links outside the navbar nav are colored correctly.
501
502 .navbar-link {
503 color: @navbar-default-link-color;
504 &:hover {
505 color: @navbar-default-link-hover-color;
506 }
507 }
508
509 .btn-link {
510 color: @navbar-default-link-color;
511 &:hover,
512 &:focus {
513 color: @navbar-default-link-hover-color;
514 }
515 &[disabled],
516 fieldset[disabled] & {
517 &:hover,
518 &:focus {
519 color: @navbar-default-link-disabled-color;
520 }
521 }
522 }
523}
524
525// Inverse navbar
526
527.navbar-inverse {
528 background-color: @navbar-inverse-bg;
529 border-color: @navbar-inverse-border;
530
531 .navbar-brand {
532 color: @navbar-inverse-brand-color;
533 &:hover,
534 &:focus {
535 color: @navbar-inverse-brand-hover-color;
536 background-color: @navbar-inverse-brand-hover-bg;
537 }
538 }
539
540 .navbar-text {
541 color: @navbar-inverse-color;
542 }
543
544 .navbar-nav {
545 > li > a {
546 color: @navbar-inverse-link-color;
547
548 &:hover,
549 &:focus {
550 color: @navbar-inverse-link-hover-color;
551 background-color: @navbar-inverse-link-hover-bg;
552 }
553 }
554 > .active > a {
555 &,
556 &:hover,
557 &:focus {
558 color: @navbar-inverse-link-active-color;
559 background-color: @navbar-inverse-link-active-bg;
560 }
561 }
562 > .disabled > a {
563 &,
564 &:hover,
565 &:focus {
566 color: @navbar-inverse-link-disabled-color;
567 background-color: @navbar-inverse-link-disabled-bg;
568 }
569 }
570
571 // Dropdowns
572 > .open > a {
573 &,
574 &:hover,
575 &:focus {
576 color: @navbar-inverse-link-active-color;
577 background-color: @navbar-inverse-link-active-bg;
578 }
579 }
580
581 @media (max-width: @grid-float-breakpoint-max) {
582 // Dropdowns get custom display
583 .open .dropdown-menu {
584 > .dropdown-header {
585 border-color: @navbar-inverse-border;
586 }
587 .divider {
588 background-color: @navbar-inverse-border;
589 }
590 > li > a {
591 color: @navbar-inverse-link-color;
592 &:hover,
593 &:focus {
594 color: @navbar-inverse-link-hover-color;
595 background-color: @navbar-inverse-link-hover-bg;
596 }
597 }
598 > .active > a {
599 &,
600 &:hover,
601 &:focus {
602 color: @navbar-inverse-link-active-color;
603 background-color: @navbar-inverse-link-active-bg;
604 }
605 }
606 > .disabled > a {
607 &,
608 &:hover,
609 &:focus {
610 color: @navbar-inverse-link-disabled-color;
611 background-color: @navbar-inverse-link-disabled-bg;
612 }
613 }
614 }
615 }
616 }
617
618 // Darken the responsive nav toggle
619 .navbar-toggle {
620 border-color: @navbar-inverse-toggle-border-color;
621 &:hover,
622 &:focus {
623 background-color: @navbar-inverse-toggle-hover-bg;
624 }
625 .icon-bar {
626 background-color: @navbar-inverse-toggle-icon-bar-bg;
627 }
628 }
629
630 .navbar-collapse,
631 .navbar-form {
632 border-color: darken(@navbar-inverse-bg, 7%);
633 }
634
635 .navbar-link {
636 color: @navbar-inverse-link-color;
637 &:hover {
638 color: @navbar-inverse-link-hover-color;
639 }
640 }
641
642 .btn-link {
643 color: @navbar-inverse-link-color;
644 &:hover,
645 &:focus {
646 color: @navbar-inverse-link-hover-color;
647 }
648 &[disabled],
649 fieldset[disabled] & {
650 &:hover,
651 &:focus {
652 color: @navbar-inverse-link-disabled-color;
653 }
654 }
655 }
656}
Note: See TracBrowser for help on using the repository browser.