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