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