css/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   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 }