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