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} 661