Mercurial > minori

comparison dep/fmt/doc/bootstrap/navbar.less @ 343:1faa72660932

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: transfer back to cmake from autotools autotools just made lots of things more complicated than they should have and many things broke (i.e. translations)
author Paper <paper@paper.us.eu.org>
date Thu, 20 Jun 2024 05:56:06 -0400
parents
children
comparison
equal deleted inserted replaced
342:adb79bdde329 343:1faa72660932
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 .tb-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 > .tb-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 }