resources/scss/bootstrap/_navbar.scss

   1 //
   2 // Navbars
   3 // --------------------------------------------------
   4
   5 // Wrapper and base class
   6 //
   7 // Provide a static navbar from which we expand to create full-width, fixed, and
   8 // other navbar variations.
   9
  10 .navbar {
  11   position: relative;
  12   min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
  13   margin-bottom: $navbar-margin-bottom;
  14   border: 1px solid transparent;
  15
  16   // Prevent floats from breaking the navbar
  17   @include clearfix;
  18
  19   @media (min-width: $grid-float-breakpoint) {
  20         border-radius: $navbar-border-radius;
  21   }
  22 }
  23
  24 // Navbar heading
  25 //
  26 // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
  27 // styling of responsive aspects.
  28
  29 .navbar-header {
  30   @include clearfix;
  31
  32   @media (min-width: $grid-float-breakpoint) {
  33         float: left;
  34   }
  35 }
  36
  37 // Navbar collapse (body)
  38 //
  39 // Group your navbar content into this for easy collapsing and expanding across
  40 // various device sizes. By default, this content is collapsed when <768px, but
  41 // will expand past that for a horizontal display.
  42 //
  43 // To start (on mobile devices) the navbar links, forms, and buttons are stacked
  44 // vertically and include a `max-height` to overflow in case you have too much
  45 // content for the user's viewport.
  46
  47 .navbar-collapse {
  48   overflow-x: visible;
  49   padding-right: $navbar-padding-horizontal;
  50   padding-left: $navbar-padding-horizontal;
  51   border-top: 1px solid transparent;
  52   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  53   @include clearfix;
  54   -webkit-overflow-scrolling: touch;
  55
  56   &.in {
  57         overflow-y: auto;
  58   }
  59
  60   @media (min-width: $grid-float-breakpoint) {
  61         width: auto;
  62         border-top: 0;
  63         box-shadow: none;
  64
  65         &.collapse {
  66           display: block !important;
  67           height: auto !important;
  68           padding-bottom: 0; // Override default setting
  69           overflow: visible !important;
  70         }
  71
  72         &.in {
  73           overflow-y: visible;
  74         }
  75
  76         // Undo the collapse side padding for navbars with containers to ensure
  77         // alignment of right-aligned contents.
  78         .navbar-fixed-top &,
  79         .navbar-static-top &,
  80         .navbar-fixed-bottom & {
  81           padding-left: 0;
  82           padding-right: 0;
  83         }
  84   }
  85 }
  86
  87 .navbar-fixed-top,
  88 .navbar-fixed-bottom {
  89   .navbar-collapse {
  90         max-height: $navbar-collapse-max-height;
  91
  92         @media (max-device-width: $screen-xs-min) and (orientation: landscape) {
  93           max-height: 200px;
  94         }
  95   }
  96 }
  97
  98 // Both navbar header and collapse
  99 //
 100 // When a container is present, change the behavior of the header and collapse.
 101
 102 .container,
 103 .container-fluid {
 104   > .navbar-header,
 105   > .navbar-collapse {
 106         margin-right: -$navbar-padding-horizontal;
 107         margin-left: -$navbar-padding-horizontal;
 108
 109         @media (min-width: $grid-float-breakpoint) {
 110           margin-right: 0;
 111           margin-left: 0;
 112         }
 113   }
 114 }
 115
 116 //
 117 // Navbar alignment options
 118 //
 119 // Display the navbar across the entirety of the page or fixed it to the top or
 120 // bottom of the page.
 121
 122 // Static top (unfixed, but 100% wide) navbar
 123 .navbar-static-top {
 124   z-index: $zindex-navbar;
 125   border-width: 0 0 1px;
 126
 127   @media (min-width: $grid-float-breakpoint) {
 128         border-radius: 0;
 129   }
 130 }
 131
 132 // Fix the top/bottom navbars when screen real estate supports it
 133 .navbar-fixed-top,
 134 .navbar-fixed-bottom {
 135   position: fixed;
 136   right: 0;
 137   left: 0;
 138   z-index: $zindex-navbar-fixed;
 139
 140   // Undo the rounded corners
 141   @media (min-width: $grid-float-breakpoint) {
 142         border-radius: 0;
 143   }
 144 }
 145
 146 .navbar-fixed-top {
 147   top: 0;
 148   border-width: 0 0 1px;
 149 }
 150
 151 .navbar-fixed-bottom {
 152   bottom: 0;
 153   margin-bottom: 0; // override .navbar defaults
 154   border-width: 1px 0 0;
 155 }
 156
 157 // Brand/project name
 158
 159 .navbar-brand {
 160   float: left;
 161   padding: $navbar-padding-vertical $navbar-padding-horizontal;
 162   font-size: $font-size-large;
 163   line-height: $line-height-computed;
 164   height: $navbar-height;
 165
 166   &:hover,
 167   &:focus {
 168         text-decoration: none;
 169   }
 170
 171   > img {
 172         display: block;
 173   }
 174
 175   @media (min-width: $grid-float-breakpoint) {
 176         .navbar > .container &,
 177         .navbar > .container-fluid & {
 178           margin-left: -$navbar-padding-horizontal;
 179         }
 180   }
 181 }
 182
 183 // Navbar toggle
 184 //
 185 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
 186 // JavaScript plugin.
 187
 188 .navbar-toggle {
 189   position: relative;
 190   float: right;
 191   margin-right: $navbar-padding-horizontal;
 192   padding: 9px 10px;
 193   @include navbar-vertical-align(34px);
 194   background-color: transparent;
 195   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
 196   border: 1px solid transparent;
 197   border-radius: $border-radius-base;
 198
 199   // We remove the `outline` here, but later compensate by attaching `:hover`
 200   // styles to `:focus`.
 201   &:focus {
 202         outline: 0;
 203   }
 204
 205   // Bars
 206   .icon-bar {
 207         display: block;
 208         width: 22px;
 209         height: 2px;
 210         border-radius: 1px;
 211   }
 212   .icon-bar + .icon-bar {
 213         margin-top: 4px;
 214   }
 215
 216   @media (min-width: $grid-float-breakpoint) {
 217         display: none;
 218   }
 219 }
 220
 221 // Navbar nav links
 222 //
 223 // Builds on top of the `.nav` components with its own modifier class to make
 224 // the nav the full height of the horizontal nav (above 768px).
 225
 226 .navbar-nav {
 227   margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
 228
 229   > li > a {
 230         padding-top: 10px;
 231         padding-bottom: 10px;
 232         line-height: $line-height-computed;
 233   }
 234
 235   @media (max-width: $grid-float-breakpoint-max) {
 236         // Dropdowns get custom display when collapsed
 237         .open .dropdown-menu {
 238           position: static;
 239           float: none;
 240           width: auto;
 241           margin-top: 0;
 242           background-color: transparent;
 243           border: 0;
 244           box-shadow: none;
 245           > li > a,
 246           .dropdown-header {
 247                 padding: 5px 15px 5px 25px;
 248           }
 249           > li > a {
 250                 line-height: $line-height-computed;
 251                 &:hover,
 252                 &:focus {
 253                   background-image: none;
 254                 }
 255           }
 256         }
 257   }
 258
 259   // Uncollapse the nav
 260   @media (min-width: $grid-float-breakpoint) {
 261         float: left;
 262         margin: 0;
 263
 264         > li {
 265           float: left;
 266           > a {
 267                 padding-top: $navbar-padding-vertical;
 268                 padding-bottom: $navbar-padding-vertical;
 269           }
 270         }
 271   }
 272 }
 273
 274 // Navbar form
 275 //
 276 // Extension of the `.form-inline` with some extra flavor for optimum display in
 277 // our navbars.
 278
 279 .navbar-form {
 280   margin-left: -$navbar-padding-horizontal;
 281   margin-right: -$navbar-padding-horizontal;
 282   padding: 10px $navbar-padding-horizontal;
 283   border-top: 1px solid transparent;
 284   border-bottom: 1px solid transparent;
 285   $shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
 286   @include box-shadow($shadow);
 287
 288   // Mixin behavior for optimum display
 289   @include form-inline;
 290
 291   .form-group {
 292         @media (max-width: $grid-float-breakpoint-max) {
 293           margin-bottom: 5px;
 294
 295           &:last-child {
 296                 margin-bottom: 0;
 297           }
 298         }
 299   }
 300
 301   // Vertically center in expanded, horizontal navbar
 302   @include navbar-vertical-align($input-height-base);
 303
 304   // Undo 100% width for pull classes
 305   @media (min-width: $grid-float-breakpoint) {
 306         width: auto;
 307         border: 0;
 308         margin-left: 0;
 309         margin-right: 0;
 310         padding-top: 0;
 311         padding-bottom: 0;
 312         @include box-shadow(none);
 313   }
 314 }
 315
 316 // Dropdown menus
 317
 318 // Menu position and menu carets
 319 .navbar-nav > li > .dropdown-menu {
 320   margin-top: 0;
 321   @include border-top-radius(0);
 322 }
 323
 324 // Menu position and menu caret support for dropups via extra dropup class
 325 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
 326   margin-bottom: 0;
 327   @include border-top-radius($navbar-border-radius);
 328   @include border-bottom-radius(0);
 329 }
 330
 331 // Buttons in navbars
 332 //
 333 // Vertically center a button within a navbar (when *not* in a form).
 334
 335 .navbar-btn {
 336   @include navbar-vertical-align($input-height-base);
 337
 338   &.btn-sm {
 339         @include navbar-vertical-align($input-height-small);
 340   }
 341   &.btn-xs {
 342         @include navbar-vertical-align(22);
 343   }
 344 }
 345
 346 // Text in navbars
 347 //
 348 // Add a class to make any element properly align itself vertically within the navbars.
 349
 350 .navbar-text {
 351   @include navbar-vertical-align($line-height-computed);
 352
 353   @media (min-width: $grid-float-breakpoint) {
 354         float: left;
 355         margin-left: $navbar-padding-horizontal;
 356         margin-right: $navbar-padding-horizontal;
 357   }
 358 }
 359
 360 // Component alignment
 361 //
 362 // Repurpose the pull utilities as their own navbar utilities to avoid specificity
 363 // issues with parents and chaining. Only do this when the navbar is uncollapsed
 364 // though so that navbar contents properly stack and align in mobile.
 365 //
 366 // Declared after the navbar components to ensure more specificity on the margins.
 367
 368 @media (min-width: $grid-float-breakpoint) {
 369   .navbar-left {
 370         float: left !important;
 371   }
 372   .navbar-right {
 373         float: right !important;
 374         margin-right: -$navbar-padding-horizontal;
 375
 376         ~ .navbar-right {
 377           margin-right: 0;
 378         }
 379   }
 380 }
 381
 382 // Alternate navbars
 383 // --------------------------------------------------
 384
 385 // Default navbar
 386 .navbar-default {
 387   background-color: $navbar-default-bg;
 388   border-color: $navbar-default-border;
 389
 390   .navbar-brand {
 391         color: $navbar-default-brand-color;
 392         &:hover,
 393         &:focus {
 394           color: $navbar-default-brand-hover-color;
 395           background-color: $navbar-default-brand-hover-bg;
 396         }
 397   }
 398
 399   .navbar-text {
 400         color: $navbar-default-color;
 401   }
 402
 403   .navbar-nav {
 404         > li > a {
 405           color: $navbar-default-link-color;
 406
 407           &:hover,
 408           &:focus {
 409                 color: $navbar-default-link-hover-color;
 410                 background-color: $navbar-default-link-hover-bg;
 411           }
 412         }
 413         > .active > a {
 414           &,
 415           &:hover,
 416           &:focus {
 417                 color: $navbar-default-link-active-color;
 418                 background-color: $navbar-default-link-active-bg;
 419           }
 420         }
 421         > .disabled > a {
 422           &,
 423           &:hover,
 424           &:focus {
 425                 color: $navbar-default-link-disabled-color;
 426                 background-color: $navbar-default-link-disabled-bg;
 427           }
 428         }
 429   }
 430
 431   .navbar-toggle {
 432         border-color: $navbar-default-toggle-border-color;
 433         &:hover,
 434         &:focus {
 435           background-color: $navbar-default-toggle-hover-bg;
 436         }
 437         .icon-bar {
 438           background-color: $navbar-default-toggle-icon-bar-bg;
 439         }
 440   }
 441
 442   .navbar-collapse,
 443   .navbar-form {
 444         border-color: $navbar-default-border;
 445   }
 446
 447   // Dropdown menu items
 448   .navbar-nav {
 449         // Remove background color from open dropdown
 450         > .open > a {
 451           &,
 452           &:hover,
 453           &:focus {
 454                 background-color: $navbar-default-link-active-bg;
 455                 color: $navbar-default-link-active-color;
 456           }
 457         }
 458
 459         @media (max-width: $grid-float-breakpoint-max) {
 460           // Dropdowns get custom display when collapsed
 461           .open .dropdown-menu {
 462                 > li > a {
 463                   color: $navbar-default-link-color;
 464                   &:hover,
 465                   &:focus {
 466                         color: $navbar-default-link-hover-color;
 467                         background-color: $navbar-default-link-hover-bg;
 468                   }
 469                 }
 470                 > .active > a {
 471                   &,
 472                   &:hover,
 473                   &:focus {
 474                         color: $navbar-default-link-active-color;
 475                         background-color: $navbar-default-link-active-bg;
 476                   }
 477                 }
 478                 > .disabled > a {
 479                   &,
 480                   &:hover,
 481                   &:focus {
 482                         color: $navbar-default-link-disabled-color;
 483                         background-color: $navbar-default-link-disabled-bg;
 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   .btn-link {
 502         color: $navbar-default-link-color;
 503         &:hover,
 504         &:focus {
 505           color: $navbar-default-link-hover-color;
 506         }
 507         &[disabled],
 508         fieldset[disabled] & {
 509           &:hover,
 510           &:focus {
 511                 color: $navbar-default-link-disabled-color;
 512           }
 513         }
 514   }
 515 }
 516
 517 // Inverse navbar
 518
 519 .navbar-inverse {
 520   background-color: $navbar-inverse-bg;
 521   border-color: $navbar-inverse-border;
 522
 523   .navbar-brand {
 524         color: $navbar-inverse-brand-color;
 525         &:hover,
 526         &:focus {
 527           color: $navbar-inverse-brand-hover-color;
 528           background-color: $navbar-inverse-brand-hover-bg;
 529         }
 530   }
 531
 532   .navbar-text {
 533         color: $navbar-inverse-color;
 534   }
 535
 536   .navbar-nav {
 537         > li > a {
 538           color: $navbar-inverse-link-color;
 539
 540           &:hover,
 541           &:focus {
 542                 color: $navbar-inverse-link-hover-color;
 543                 background-color: $navbar-inverse-link-hover-bg;
 544           }
 545         }
 546         > .active > a {
 547           &,
 548           &:hover,
 549           &:focus {
 550                 color: $navbar-inverse-link-active-color;
 551                 background-color: $navbar-inverse-link-active-bg;
 552           }
 553         }
 554         > .disabled > a {
 555           &,
 556           &:hover,
 557           &:focus {
 558                 color: $navbar-inverse-link-disabled-color;
 559                 background-color: $navbar-inverse-link-disabled-bg;
 560           }
 561         }
 562   }
 563
 564   // Darken the responsive nav toggle
 565   .navbar-toggle {
 566         border-color: $navbar-inverse-toggle-border-color;
 567         &:hover,
 568         &:focus {
 569           background-color: $navbar-inverse-toggle-hover-bg;
 570         }
 571         .icon-bar {
 572           background-color: $navbar-inverse-toggle-icon-bar-bg;
 573         }
 574   }
 575
 576   .navbar-collapse,
 577   .navbar-form {
 578         border-color: darken($navbar-inverse-bg, 7%);
 579   }
 580
 581   // Dropdowns
 582   .navbar-nav {
 583         > .open > a {
 584           &,
 585           &:hover,
 586           &:focus {
 587                 background-color: $navbar-inverse-link-active-bg;
 588                 color: $navbar-inverse-link-active-color;
 589           }
 590         }
 591
 592         @media (max-width: $grid-float-breakpoint-max) {
 593           // Dropdowns get custom display
 594           .open .dropdown-menu {
 595                 > .dropdown-header {
 596                   border-color: $navbar-inverse-border;
 597                 }
 598                 .divider {
 599                   background-color: $navbar-inverse-border;
 600                 }
 601                 > li > a {
 602                   color: $navbar-inverse-link-color;
 603                   &:hover,
 604                   &:focus {
 605                         color: $navbar-inverse-link-hover-color;
 606                         background-color: $navbar-inverse-link-hover-bg;
 607                   }
 608                 }
 609                 > .active > a {
 610                   &,
 611                   &:hover,
 612                   &:focus {
 613                         color: $navbar-inverse-link-active-color;
 614                         background-color: $navbar-inverse-link-active-bg;
 615                   }
 616                 }
 617                 > .disabled > a {
 618                   &,
 619                   &:hover,
 620                   &:focus {
 621                         color: $navbar-inverse-link-disabled-color;
 622                         background-color: $navbar-inverse-link-disabled-bg;
 623                   }
 624                 }
 625           }
 626         }
 627   }
 628
 629   .navbar-link {
 630         color: $navbar-inverse-link-color;
 631         &:hover {
 632           color: $navbar-inverse-link-hover-color;
 633         }
 634   }
 635
 636   .btn-link {
 637         color: $navbar-inverse-link-color;
 638         &:hover,
 639         &:focus {
 640           color: $navbar-inverse-link-hover-color;
 641         }
 642         &[disabled],
 643         fieldset[disabled] & {
 644           &:hover,
 645           &:focus {
 646                 color: $navbar-inverse-link-disabled-color;
 647           }
 648         }
 649   }
 650 }