less/bootstrap/navbar.less

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