aleph1.co.uk Git - yaffs-website/blob - vendor/twbs/bootstrap-sass/assets/stylesheets/bootstrap/_navbar.scss

   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   @include clearfix;
  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   @include clearfix;
  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   @include clearfix;
  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   @include 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   @include box-shadow($shadow);
 294
 295   // Mixin behavior for optimum display
 296   @include 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   @include 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     @include 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   @include 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   @include border-top-radius($navbar-border-radius);
 335   @include 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   @include navbar-vertical-align($input-height-base);
 345
 346   &.btn-sm {
 347     @include navbar-vertical-align($input-height-small);
 348   }
 349   &.btn-xs {
 350     @include 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   @include 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 {
 380     float: left !important;
 381   }
 382   .navbar-right {
 383     float: right !important;
 384   margin-right: -$navbar-padding-horizontal;
 385
 386     ~ .navbar-right {
 387       margin-right: 0;
 388     }
 389   }
 390 }
 391
 392
 393 // Alternate navbars
 394 // --------------------------------------------------
 395
 396 // Default navbar
 397 .navbar-default {
 398   background-color: $navbar-default-bg;
 399   border-color: $navbar-default-border;
 400
 401   .navbar-brand {
 402     color: $navbar-default-brand-color;
 403     &:hover,
 404     &:focus {
 405       color: $navbar-default-brand-hover-color;
 406       background-color: $navbar-default-brand-hover-bg;
 407     }
 408   }
 409
 410   .navbar-text {
 411     color: $navbar-default-color;
 412   }
 413
 414   .navbar-nav {
 415     > li > a {
 416       color: $navbar-default-link-color;
 417
 418       &:hover,
 419       &:focus {
 420         color: $navbar-default-link-hover-color;
 421         background-color: $navbar-default-link-hover-bg;
 422       }
 423     }
 424     > .active > a {
 425       &,
 426       &:hover,
 427       &:focus {
 428         color: $navbar-default-link-active-color;
 429         background-color: $navbar-default-link-active-bg;
 430       }
 431     }
 432     > .disabled > a {
 433       &,
 434       &:hover,
 435       &:focus {
 436         color: $navbar-default-link-disabled-color;
 437         background-color: $navbar-default-link-disabled-bg;
 438       }
 439     }
 440   }
 441
 442   .navbar-toggle {
 443     border-color: $navbar-default-toggle-border-color;
 444     &:hover,
 445     &:focus {
 446       background-color: $navbar-default-toggle-hover-bg;
 447     }
 448     .icon-bar {
 449       background-color: $navbar-default-toggle-icon-bar-bg;
 450     }
 451   }
 452
 453   .navbar-collapse,
 454   .navbar-form {
 455     border-color: $navbar-default-border;
 456   }
 457
 458   // Dropdown menu items
 459   .navbar-nav {
 460     // Remove background color from open dropdown
 461     > .open > a {
 462       &,
 463       &:hover,
 464       &:focus {
 465         background-color: $navbar-default-link-active-bg;
 466         color: $navbar-default-link-active-color;
 467       }
 468     }
 469
 470     @media (max-width: $grid-float-breakpoint-max) {
 471       // Dropdowns get custom display when collapsed
 472       .open .dropdown-menu {
 473         > li > a {
 474           color: $navbar-default-link-color;
 475           &:hover,
 476           &:focus {
 477             color: $navbar-default-link-hover-color;
 478             background-color: $navbar-default-link-hover-bg;
 479           }
 480         }
 481         > .active > a {
 482           &,
 483           &:hover,
 484           &:focus {
 485             color: $navbar-default-link-active-color;
 486             background-color: $navbar-default-link-active-bg;
 487           }
 488         }
 489         > .disabled > a {
 490           &,
 491           &:hover,
 492           &:focus {
 493             color: $navbar-default-link-disabled-color;
 494             background-color: $navbar-default-link-disabled-bg;
 495           }
 496         }
 497       }
 498     }
 499   }
 500
 501
 502   // Links in navbars
 503   //
 504   // Add a class to ensure links outside the navbar nav are colored correctly.
 505
 506   .navbar-link {
 507     color: $navbar-default-link-color;
 508     &:hover {
 509       color: $navbar-default-link-hover-color;
 510     }
 511   }
 512
 513   .btn-link {
 514     color: $navbar-default-link-color;
 515     &:hover,
 516     &:focus {
 517       color: $navbar-default-link-hover-color;
 518     }
 519     &[disabled],
 520     fieldset[disabled] & {
 521       &:hover,
 522       &:focus {
 523         color: $navbar-default-link-disabled-color;
 524       }
 525     }
 526   }
 527 }
 528
 529 // Inverse navbar
 530
 531 .navbar-inverse {
 532   background-color: $navbar-inverse-bg;
 533   border-color: $navbar-inverse-border;
 534
 535   .navbar-brand {
 536     color: $navbar-inverse-brand-color;
 537     &:hover,
 538     &:focus {
 539       color: $navbar-inverse-brand-hover-color;
 540       background-color: $navbar-inverse-brand-hover-bg;
 541     }
 542   }
 543
 544   .navbar-text {
 545     color: $navbar-inverse-color;
 546   }
 547
 548   .navbar-nav {
 549     > li > a {
 550       color: $navbar-inverse-link-color;
 551
 552       &:hover,
 553       &:focus {
 554         color: $navbar-inverse-link-hover-color;
 555         background-color: $navbar-inverse-link-hover-bg;
 556       }
 557     }
 558     > .active > a {
 559       &,
 560       &:hover,
 561       &:focus {
 562         color: $navbar-inverse-link-active-color;
 563         background-color: $navbar-inverse-link-active-bg;
 564       }
 565     }
 566     > .disabled > a {
 567       &,
 568       &:hover,
 569       &:focus {
 570         color: $navbar-inverse-link-disabled-color;
 571         background-color: $navbar-inverse-link-disabled-bg;
 572       }
 573     }
 574   }
 575
 576   // Darken the responsive nav toggle
 577   .navbar-toggle {
 578     border-color: $navbar-inverse-toggle-border-color;
 579     &:hover,
 580     &:focus {
 581       background-color: $navbar-inverse-toggle-hover-bg;
 582     }
 583     .icon-bar {
 584       background-color: $navbar-inverse-toggle-icon-bar-bg;
 585     }
 586   }
 587
 588   .navbar-collapse,
 589   .navbar-form {
 590     border-color: darken($navbar-inverse-bg, 7%);
 591   }
 592
 593   // Dropdowns
 594   .navbar-nav {
 595     > .open > a {
 596       &,
 597       &:hover,
 598       &:focus {
 599         background-color: $navbar-inverse-link-active-bg;
 600         color: $navbar-inverse-link-active-color;
 601       }
 602     }
 603
 604     @media (max-width: $grid-float-breakpoint-max) {
 605       // Dropdowns get custom display
 606       .open .dropdown-menu {
 607         > .dropdown-header {
 608           border-color: $navbar-inverse-border;
 609         }
 610         .divider {
 611           background-color: $navbar-inverse-border;
 612         }
 613         > li > a {
 614           color: $navbar-inverse-link-color;
 615           &:hover,
 616           &:focus {
 617             color: $navbar-inverse-link-hover-color;
 618             background-color: $navbar-inverse-link-hover-bg;
 619           }
 620         }
 621         > .active > a {
 622           &,
 623           &:hover,
 624           &:focus {
 625             color: $navbar-inverse-link-active-color;
 626             background-color: $navbar-inverse-link-active-bg;
 627           }
 628         }
 629         > .disabled > a {
 630           &,
 631           &:hover,
 632           &:focus {
 633             color: $navbar-inverse-link-disabled-color;
 634             background-color: $navbar-inverse-link-disabled-bg;
 635           }
 636         }
 637       }
 638     }
 639   }
 640
 641   .navbar-link {
 642     color: $navbar-inverse-link-color;
 643     &:hover {
 644       color: $navbar-inverse-link-hover-color;
 645     }
 646   }
 647
 648   .btn-link {
 649     color: $navbar-inverse-link-color;
 650     &:hover,
 651     &:focus {
 652       color: $navbar-inverse-link-hover-color;
 653     }
 654     &[disabled],
 655     fieldset[disabled] & {
 656       &:hover,
 657       &:focus {
 658         color: $navbar-inverse-link-disabled-color;
 659       }
 660     }
 661   }
 662 }