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   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
 159   &:hover,
 160   &:focus {
 161     text-decoration: none;
 162   }
 163
 164   // Prevent Glyphicons from increasing height of navbar
 165   > .glyphicon {
 166     float: left;
 167     margin-top: -2px;
 168     margin-right: 5px;
 169   }
 170
 171   @media (min-width: @grid-float-breakpoint) {
 172     .navbar > .container &,
 173     .navbar > .container-fluid & {
 174       margin-left: -@navbar-padding-horizontal;
 175     }
 176   }
 177 }
 178
 179
 180 // Navbar toggle
 181 //
 182 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
 183 // JavaScript plugin.
 184
 185 .navbar-toggle {
 186   position: relative;
 187   float: right;
 188   margin-right: @navbar-padding-horizontal;
 189   padding: 9px 10px;
 190   .navbar-vertical-align(34px);
 191   background-color: transparent;
 192   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
 193   border: 1px solid transparent;
 194   border-radius: @border-radius-base;
 195
 196   // We remove the `outline` here, but later compensate by attaching `:hover`
 197   // styles to `:focus`.
 198   &:focus {
 199     outline: none;
 200   }
 201
 202   // Bars
 203   .icon-bar {
 204     display: block;
 205     width: 22px;
 206     height: 2px;
 207     border-radius: 1px;
 208   }
 209   .icon-bar + .icon-bar {
 210     margin-top: 4px;
 211   }
 212
 213   @media (min-width: @grid-float-breakpoint) {
 214     display: none;
 215   }
 216 }
 217
 218
 219 // Navbar nav links
 220 //
 221 // Builds on top of the `.nav` components with its own modifier class to make
 222 // the nav the full height of the horizontal nav (above 768px).
 223
 224 .navbar-nav {
 225   margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
 226
 227   > li > a {
 228     padding-top:    10px;
 229     padding-bottom: 10px;
 230     line-height: @line-height-computed;
 231   }
 232
 233   @media (max-width: @grid-float-breakpoint-max) {
 234     // Dropdowns get custom display when collapsed
 235     .open .dropdown-menu {
 236       position: static;
 237       float: none;
 238       width: auto;
 239       margin-top: 0;
 240       background-color: transparent;
 241       border: 0;
 242       box-shadow: none;
 243       > li > a,
 244       .dropdown-header {
 245         padding: 5px 15px 5px 25px;
 246       }
 247       > li > a {
 248         line-height: @line-height-computed;
 249         &:hover,
 250         &:focus {
 251           background-image: none;
 252         }
 253       }
 254     }
 255   }
 256
 257   // Uncollapse the nav
 258   @media (min-width: @grid-float-breakpoint) {
 259     float: left;
 260     margin: 0;
 261
 262     > li {
 263       float: left;
 264       > a {
 265         padding-top:    @navbar-padding-vertical;
 266         padding-bottom: @navbar-padding-vertical;
 267       }
 268     }
 269
 270     &.navbar-right:last-child {
 271       margin-right: -@navbar-padding-horizontal;
 272     }
 273   }
 274 }
 275
 276
 277 // Component alignment
 278 //
 279 // Repurpose the pull utilities as their own navbar utilities to avoid specificity
 280 // issues with parents and chaining. Only do this when the navbar is uncollapsed
 281 // though so that navbar contents properly stack and align in mobile.
 282
 283 @media (min-width: @grid-float-breakpoint) {
 284   .navbar-left  { .pull-left(); }
 285   .navbar-right { .pull-right(); }
 286 }
 287
 288
 289 // Navbar form
 290 //
 291 // Extension of the `.form-inline` with some extra flavor for optimum display in
 292 // our navbars.
 293
 294 .navbar-form {
 295   margin-left: -@navbar-padding-horizontal;
 296   margin-right: -@navbar-padding-horizontal;
 297   padding: 10px @navbar-padding-horizontal;
 298   border-top: 1px solid transparent;
 299   border-bottom: 1px solid transparent;
 300   @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
 301   .box-shadow(@shadow);
 302
 303   // Mixin behavior for optimum display
 304   .form-inline();
 305
 306   .form-group {
 307     @media (max-width: @grid-float-breakpoint-max) {
 308       margin-bottom: 5px;
 309     }
 310   }
 311
 312   // Vertically center in expanded, horizontal navbar
 313   .navbar-vertical-align(@input-height-base);
 314
 315   // Undo 100% width for pull classes
 316   @media (min-width: @grid-float-breakpoint) {
 317     width: auto;
 318     border: 0;
 319     margin-left: 0;
 320     margin-right: 0;
 321     padding-top: 0;
 322     padding-bottom: 0;
 323     .box-shadow(none);
 324
 325     // Outdent the form if last child to line up with content down the page
 326     &.navbar-right:last-child {
 327       margin-right: -@navbar-padding-horizontal;
 328     }
 329   }
 330 }
 331
 332
 333 // Dropdown menus
 334
 335 // Menu position and menu carets
 336 .navbar-nav > li > .dropdown-menu {
 337   margin-top: 0;
 338   .border-top-radius(0);
 339 }
 340 // Menu position and menu caret support for dropups via extra dropup class
 341 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
 342   .border-bottom-radius(0);
 343 }
 344
 345
 346 // Buttons in navbars
 347 //
 348 // Vertically center a button within a navbar (when *not* in a form).
 349
 350 .navbar-btn {
 351   .navbar-vertical-align(@input-height-base);
 352
 353   &.btn-sm {
 354     .navbar-vertical-align(@input-height-small);
 355   }
 356   &.btn-xs {
 357     .navbar-vertical-align(22);
 358   }
 359 }
 360
 361
 362 // Text in navbars
 363 //
 364 // Add a class to make any element properly align itself vertically within the navbars.
 365
 366 .navbar-text {
 367   .navbar-vertical-align(@line-height-computed);
 368
 369   @media (min-width: @grid-float-breakpoint) {
 370     float: left;
 371     margin-left: @navbar-padding-horizontal;
 372     margin-right: @navbar-padding-horizontal;
 373
 374     // Outdent the form if last child to line up with content down the page
 375     &.navbar-right:last-child {
 376       margin-right: 0;
 377     }
 378   }
 379 }
 380
 381 // Alternate navbars
 382 // --------------------------------------------------
 383
 384 // Default navbar
 385 .navbar-default {
 386   background-color: @navbar-default-bg;
 387   border-color: @navbar-default-border;
 388
 389   .navbar-brand {
 390     color: @navbar-default-brand-color;
 391     &:hover,
 392     &:focus {
 393       color: @navbar-default-brand-hover-color;
 394       background-color: @navbar-default-brand-hover-bg;
 395     }
 396   }
 397
 398   .navbar-text {
 399     color: @navbar-default-color;
 400   }
 401
 402   .navbar-nav {
 403     > li > a {
 404       color: @navbar-default-link-color;
 405
 406       &:hover,
 407       &:focus {
 408         color: @navbar-default-link-hover-color;
 409         background-color: @navbar-default-link-hover-bg;
 410       }
 411     }
 412     > .active > a {
 413       &,
 414       &:hover,
 415       &:focus {
 416         color: @navbar-default-link-active-color;
 417         background-color: @navbar-default-link-active-bg;
 418       }
 419     }
 420     > .disabled > a {
 421       &,
 422       &:hover,
 423       &:focus {
 424         color: @navbar-default-link-disabled-color;
 425         background-color: @navbar-default-link-disabled-bg;
 426       }
 427     }
 428   }
 429
 430   .navbar-toggle {
 431     border-color: @navbar-default-toggle-border-color;
 432     &:hover,
 433     &:focus {
 434       background-color: @navbar-default-toggle-hover-bg;
 435     }
 436     .icon-bar {
 437       background-color: @navbar-default-toggle-icon-bar-bg;
 438     }
 439   }
 440
 441   .navbar-collapse,
 442   .navbar-form {
 443     border-color: @navbar-default-border;
 444   }
 445
 446   // Dropdown menu items
 447   .navbar-nav {
 448     // Remove background color from open dropdown
 449     > .open > a {
 450       &,
 451       &:hover,
 452       &:focus {
 453         background-color: @navbar-default-link-active-bg;
 454         color: @navbar-default-link-active-color;
 455       }
 456     }
 457
 458     @media (max-width: @grid-float-breakpoint-max) {
 459       // Dropdowns get custom display when collapsed
 460       .open .dropdown-menu {
 461         > li > a {
 462           color: @navbar-default-link-color;
 463           &:hover,
 464           &:focus {
 465             color: @navbar-default-link-hover-color;
 466             background-color: @navbar-default-link-hover-bg;
 467           }
 468         }
 469         > .active > a {
 470           &,
 471           &:hover,
 472           &:focus {
 473             color: @navbar-default-link-active-color;
 474             background-color: @navbar-default-link-active-bg;
 475           }
 476         }
 477         > .disabled > a {
 478           &,
 479           &:hover,
 480           &:focus {
 481             color: @navbar-default-link-disabled-color;
 482             background-color: @navbar-default-link-disabled-bg;
 483           }
 484         }
 485       }
 486     }
 487   }
 488
 489
 490   // Links in navbars
 491   //
 492   // Add a class to ensure links outside the navbar nav are colored correctly.
 493
 494   .navbar-link {
 495     color: @navbar-default-link-color;
 496     &:hover {
 497       color: @navbar-default-link-hover-color;
 498     }
 499   }
 500
 501 }
 502
 503 // Inverse navbar
 504
 505 .navbar-inverse {
 506   background-color: @navbar-inverse-bg;
 507   border-color: @navbar-inverse-border;
 508
 509   .navbar-brand {
 510     color: @navbar-inverse-brand-color;
 511     &:hover,
 512     &:focus {
 513       color: @navbar-inverse-brand-hover-color;
 514       background-color: @navbar-inverse-brand-hover-bg;
 515     }
 516   }
 517
 518   .navbar-text {
 519     color: @navbar-inverse-color;
 520   }
 521
 522   .navbar-nav {
 523     > li > a {
 524       color: @navbar-inverse-link-color;
 525
 526       &:hover,
 527       &:focus {
 528         color: @navbar-inverse-link-hover-color;
 529         background-color: @navbar-inverse-link-hover-bg;
 530       }
 531     }
 532     > .active > a {
 533       &,
 534       &:hover,
 535       &:focus {
 536         color: @navbar-inverse-link-active-color;
 537         background-color: @navbar-inverse-link-active-bg;
 538       }
 539     }
 540     > .disabled > a {
 541       &,
 542       &:hover,
 543       &:focus {
 544         color: @navbar-inverse-link-disabled-color;
 545         background-color: @navbar-inverse-link-disabled-bg;
 546       }
 547     }
 548   }
 549
 550   // Darken the responsive nav toggle
 551   .navbar-toggle {
 552     border-color: @navbar-inverse-toggle-border-color;
 553     &:hover,
 554     &:focus {
 555       background-color: @navbar-inverse-toggle-hover-bg;
 556     }
 557     .icon-bar {
 558       background-color: @navbar-inverse-toggle-icon-bar-bg;
 559     }
 560   }
 561
 562   .navbar-collapse,
 563   .navbar-form {
 564     border-color: darken(@navbar-inverse-bg, 7%);
 565   }
 566
 567   // Dropdowns
 568   .navbar-nav {
 569     > .open > a {
 570       &,
 571       &:hover,
 572       &:focus {
 573         background-color: @navbar-inverse-link-active-bg;
 574         color: @navbar-inverse-link-active-color;
 575       }
 576     }
 577
 578     @media (max-width: @grid-float-breakpoint-max) {
 579       // Dropdowns get custom display
 580       .open .dropdown-menu {
 581         > .dropdown-header {
 582           border-color: @navbar-inverse-border;
 583         }
 584         .divider {
 585           background-color: @navbar-inverse-border;
 586         }
 587         > li > a {
 588           color: @navbar-inverse-link-color;
 589           &:hover,
 590           &:focus {
 591             color: @navbar-inverse-link-hover-color;
 592             background-color: @navbar-inverse-link-hover-bg;
 593           }
 594         }
 595         > .active > a {
 596           &,
 597           &:hover,
 598           &:focus {
 599             color: @navbar-inverse-link-active-color;
 600             background-color: @navbar-inverse-link-active-bg;
 601           }
 602         }
 603         > .disabled > a {
 604           &,
 605           &:hover,
 606           &:focus {
 607             color: @navbar-inverse-link-disabled-color;
 608             background-color: @navbar-inverse-link-disabled-bg;
 609           }
 610         }
 611       }
 612     }
 613   }
 614
 615   .navbar-link {
 616     color: @navbar-inverse-link-color;
 617     &:hover {
 618       color: @navbar-inverse-link-hover-color;
 619     }
 620   }
 621
 622 }