libs/bootstrap/less/navbar.less

   1 //
   2 // Navbars (Redux)
   3 // --------------------------------------------------
   4
   5
   6 // COMMON STYLES
   7 // -------------
   8
   9 // Base class and wrapper
  10 .navbar {
  11   overflow: visible;
  12   margin-bottom: @baseLineHeight;
  13
  14   // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
  15   *position: relative;
  16   *z-index: 2;
  17 }
  18
  19 // Inner for background effects
  20 // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
  21 .navbar-inner {
  22   min-height: @navbarHeight;
  23   padding-left:  20px;
  24   padding-right: 20px;
  25   #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
  26   border: 1px solid @navbarBorder;
  27   .border-radius(@baseBorderRadius);
  28   .box-shadow(0 1px 4px rgba(0,0,0,.065));
  29
  30   // Prevent floats from breaking the navbar
  31   .clearfix();
  32 }
  33
  34 // Set width to auto for default container
  35 // We then reset it for fixed navbars in the #gridSystem mixin
  36 .navbar .container {
  37   width: auto;
  38 }
  39
  40 // Override the default collapsed state
  41 .nav-collapse.collapse {
  42   height: auto;
  43   overflow: visible;
  44 }
  45
  46
  47 // Brand: website or project name
  48 // -------------------------
  49 .navbar .brand {
  50   float: left;
  51   display: block;
  52   // Vertically center the text given @navbarHeight
  53   padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
  54   margin-left: -20px; // negative indent to left-align the text down the page
  55   font-size: 20px;
  56   font-weight: 200;
  57   color: @navbarBrandColor;
  58   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
  59   &:hover,
  60   &:focus {
  61     text-decoration: none;
  62   }
  63 }
  64
  65 // Plain text in topbar
  66 // -------------------------
  67 .navbar-text {
  68   margin-bottom: 0;
  69   line-height: @navbarHeight;
  70   color: @navbarText;
  71 }
  72
  73 // Janky solution for now to account for links outside the .nav
  74 // -------------------------
  75 .navbar-link {
  76   color: @navbarLinkColor;
  77   &:hover,
  78   &:focus {
  79     color: @navbarLinkColorHover;
  80   }
  81 }
  82
  83 // Dividers in navbar
  84 // -------------------------
  85 .navbar .divider-vertical {
  86   height: @navbarHeight;
  87   margin: 0 9px;
  88   border-left: 1px solid @navbarBackground;
  89   border-right: 1px solid @navbarBackgroundHighlight;
  90 }
  91
  92 // Buttons in navbar
  93 // -------------------------
  94 .navbar .btn,
  95 .navbar .btn-group {
  96   .navbarVerticalAlign(30px); // Vertically center in navbar
  97 }
  98 .navbar .btn-group .btn,
  99 .navbar .input-prepend .btn,
 100 .navbar .input-append .btn,
 101 .navbar .input-prepend .btn-group,
 102 .navbar .input-append .btn-group {
 103   margin-top: 0; // then undo the margin here so we don't accidentally double it
 104 }
 105
 106 // Navbar forms
 107 // -------------------------
 108 .navbar-form {
 109   margin-bottom: 0; // remove default bottom margin
 110   .clearfix();
 111   input,
 112   select,
 113   .radio,
 114   .checkbox {
 115     .navbarVerticalAlign(30px); // Vertically center in navbar
 116   }
 117   input,
 118   select,
 119   .btn {
 120     display: inline-block;
 121     margin-bottom: 0;
 122   }
 123   input[type="image"],
 124   input[type="checkbox"],
 125   input[type="radio"] {
 126     margin-top: 3px;
 127   }
 128   .input-append,
 129   .input-prepend {
 130     margin-top: 5px;
 131     white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
 132     input {
 133       margin-top: 0; // remove the margin on top since it's on the parent
 134     }
 135   }
 136 }
 137
 138 // Navbar search
 139 // -------------------------
 140 .navbar-search {
 141   position: relative;
 142   float: left;
 143   .navbarVerticalAlign(30px); // Vertically center in navbar
 144   margin-bottom: 0;
 145   .search-query {
 146     margin-bottom: 0;
 147     padding: 4px 14px;
 148     #font > .sans-serif(13px, normal, 1);
 149     .border-radius(15px); // redeclare because of specificity of the type attribute
 150   }
 151 }
 152
 153
 154
 155 // Static navbar
 156 // -------------------------
 157
 158 .navbar-static-top {
 159   position: static;
 160   margin-bottom: 0; // remove 18px margin for default navbar
 161   .navbar-inner {
 162     .border-radius(0);
 163   }
 164 }
 165
 166
 167
 168 // Fixed navbar
 169 // -------------------------
 170
 171 // Shared (top/bottom) styles
 172 .navbar-fixed-top,
 173 .navbar-fixed-bottom {
 174   position: fixed;
 175   right: 0;
 176   left: 0;
 177   z-index: @zindexFixedNavbar;
 178   margin-bottom: 0; // remove 18px margin for default navbar
 179 }
 180 .navbar-fixed-top .navbar-inner,
 181 .navbar-static-top .navbar-inner {
 182   border-width: 0 0 1px;
 183 }
 184 .navbar-fixed-bottom .navbar-inner {
 185   border-width: 1px 0 0;
 186 }
 187 .navbar-fixed-top .navbar-inner,
 188 .navbar-fixed-bottom .navbar-inner {
 189   padding-left:  0;
 190   padding-right: 0;
 191   .border-radius(0);
 192 }
 193
 194 // Reset container width
 195 // Required here as we reset the width earlier on and the grid mixins don't override early enough
 196 .navbar-static-top .container,
 197 .navbar-fixed-top .container,
 198 .navbar-fixed-bottom .container {
 199   #grid > .core > .span(@gridColumns);
 200 }
 201
 202 // Fixed to top
 203 .navbar-fixed-top {
 204   top: 0;
 205 }
 206 .navbar-fixed-top,
 207 .navbar-static-top {
 208   .navbar-inner {
 209     .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
 210   }
 211 }
 212
 213 // Fixed to bottom
 214 .navbar-fixed-bottom {
 215   bottom: 0;
 216   .navbar-inner {
 217     .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
 218   }
 219 }
 220
 221
 222
 223 // NAVIGATION
 224 // ----------
 225
 226 .navbar .nav {
 227   position: relative;
 228   left: 0;
 229   display: block;
 230   float: left;
 231   margin: 0 10px 0 0;
 232 }
 233 .navbar .nav.pull-right {
 234   float: right; // redeclare due to specificity
 235   margin-right: 0; // remove margin on float right nav
 236 }
 237 .navbar .nav > li {
 238   float: left;
 239 }
 240
 241 // Links
 242 .navbar .nav > li > a {
 243   float: none;
 244   // Vertically center the text given @navbarHeight
 245   padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
 246   color: @navbarLinkColor;
 247   text-decoration: none;
 248   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
 249 }
 250 .navbar .nav .dropdown-toggle .caret {
 251   margin-top: 8px;
 252 }
 253
 254 // Hover/focus
 255 .navbar .nav > li > a:focus,
 256 .navbar .nav > li > a:hover {
 257   background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
 258   color: @navbarLinkColorHover;
 259   text-decoration: none;
 260 }
 261
 262 // Active nav items
 263 .navbar .nav > .active > a,
 264 .navbar .nav > .active > a:hover,
 265 .navbar .nav > .active > a:focus {
 266   color: @navbarLinkColorActive;
 267   text-decoration: none;
 268   background-color: @navbarLinkBackgroundActive;
 269   .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
 270 }
 271
 272 // Navbar button for toggling navbar items in responsive layouts
 273 // These definitions need to come after '.navbar .btn'
 274 .navbar .btn-navbar {
 275   display: none;
 276   float: right;
 277   padding: 7px 10px;
 278   margin-left: 5px;
 279   margin-right: 5px;
 280   .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
 281   .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
 282 }
 283 .navbar .btn-navbar .icon-bar {
 284   display: block;
 285   width: 18px;
 286   height: 2px;
 287   background-color: #f5f5f5;
 288   .border-radius(1px);
 289   .box-shadow(0 1px 0 rgba(0,0,0,.25));
 290 }
 291 .btn-navbar .icon-bar + .icon-bar {
 292   margin-top: 3px;
 293 }
 294
 295
 296
 297 // Dropdown menus
 298 // --------------
 299
 300 // Menu position and menu carets
 301 .navbar .nav > li > .dropdown-menu {
 302   &:before {
 303     content: '';
 304     display: inline-block;
 305     border-left:   7px solid transparent;
 306     border-right:  7px solid transparent;
 307     border-bottom: 7px solid #ccc;
 308     border-bottom-color: @dropdownBorder;
 309     position: absolute;
 310     top: -7px;
 311     left: 9px;
 312   }
 313   &:after {
 314     content: '';
 315     display: inline-block;
 316     border-left:   6px solid transparent;
 317     border-right:  6px solid transparent;
 318     border-bottom: 6px solid @dropdownBackground;
 319     position: absolute;
 320     top: -6px;
 321     left: 10px;
 322   }
 323 }
 324 // Menu position and menu caret support for dropups via extra dropup class
 325 .navbar-fixed-bottom .nav > li > .dropdown-menu {
 326   &:before {
 327     border-top: 7px solid #ccc;
 328     border-top-color: @dropdownBorder;
 329     border-bottom: 0;
 330     bottom: -7px;
 331     top: auto;
 332   }
 333   &:after {
 334     border-top: 6px solid @dropdownBackground;
 335     border-bottom: 0;
 336     bottom: -6px;
 337     top: auto;
 338   }
 339 }
 340
 341 // Caret should match text color on hover/focus
 342 .navbar .nav li.dropdown > a:hover .caret,
 343 .navbar .nav li.dropdown > a:focus .caret {
 344   border-top-color: @navbarLinkColorHover;
 345   border-bottom-color: @navbarLinkColorHover;
 346 }
 347
 348 // Remove background color from open dropdown
 349 .navbar .nav li.dropdown.open > .dropdown-toggle,
 350 .navbar .nav li.dropdown.active > .dropdown-toggle,
 351 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
 352   background-color: @navbarLinkBackgroundActive;
 353   color: @navbarLinkColorActive;
 354 }
 355 .navbar .nav li.dropdown > .dropdown-toggle .caret {
 356   border-top-color: @navbarLinkColor;
 357   border-bottom-color: @navbarLinkColor;
 358 }
 359 .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
 360 .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
 361 .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
 362   border-top-color: @navbarLinkColorActive;
 363   border-bottom-color: @navbarLinkColorActive;
 364 }
 365
 366 // Right aligned menus need alt position
 367 .navbar .pull-right > li > .dropdown-menu,
 368 .navbar .nav > li > .dropdown-menu.pull-right {
 369   left: auto;
 370   right: 0;
 371   &:before {
 372     left: auto;
 373     right: 12px;
 374   }
 375   &:after {
 376     left: auto;
 377     right: 13px;
 378   }
 379   .dropdown-menu {
 380     left: auto;
 381     right: 100%;
 382     margin-left: 0;
 383     margin-right: -1px;
 384     .border-radius(6px 0 6px 6px);
 385   }
 386 }
 387
 388
 389 // Inverted navbar
 390 // -------------------------
 391
 392 .navbar-inverse {
 393
 394   .navbar-inner {
 395     #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
 396     border-color: @navbarInverseBorder;
 397   }
 398
 399   .brand,
 400   .nav > li > a {
 401     color: @navbarInverseLinkColor;
 402     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 403     &:hover,
 404     &:focus {
 405       color: @navbarInverseLinkColorHover;
 406     }
 407   }
 408
 409   .brand {
 410     color: @navbarInverseBrandColor;
 411   }
 412
 413   .navbar-text {
 414     color: @navbarInverseText;
 415   }
 416
 417   .nav > li > a:focus,
 418   .nav > li > a:hover {
 419     background-color: @navbarInverseLinkBackgroundHover;
 420     color: @navbarInverseLinkColorHover;
 421   }
 422
 423   .nav .active > a,
 424   .nav .active > a:hover,
 425   .nav .active > a:focus {
 426     color: @navbarInverseLinkColorActive;
 427     background-color: @navbarInverseLinkBackgroundActive;
 428   }
 429
 430   // Inline text links
 431   .navbar-link {
 432     color: @navbarInverseLinkColor;
 433     &:hover,
 434     &:focus {
 435       color: @navbarInverseLinkColorHover;
 436     }
 437   }
 438
 439   // Dividers in navbar
 440   .divider-vertical {
 441     border-left-color: @navbarInverseBackground;
 442     border-right-color: @navbarInverseBackgroundHighlight;
 443   }
 444
 445   // Dropdowns
 446   .nav li.dropdown.open > .dropdown-toggle,
 447   .nav li.dropdown.active > .dropdown-toggle,
 448   .nav li.dropdown.open.active > .dropdown-toggle {
 449     background-color: @navbarInverseLinkBackgroundActive;
 450     color: @navbarInverseLinkColorActive;
 451   }
 452   .nav li.dropdown > a:hover .caret,
 453   .nav li.dropdown > a:focus .caret {
 454     border-top-color: @navbarInverseLinkColorActive;
 455     border-bottom-color: @navbarInverseLinkColorActive;
 456   }
 457   .nav li.dropdown > .dropdown-toggle .caret {
 458     border-top-color: @navbarInverseLinkColor;
 459     border-bottom-color: @navbarInverseLinkColor;
 460   }
 461   .nav li.dropdown.open > .dropdown-toggle .caret,
 462   .nav li.dropdown.active > .dropdown-toggle .caret,
 463   .nav li.dropdown.open.active > .dropdown-toggle .caret {
 464     border-top-color: @navbarInverseLinkColorActive;
 465     border-bottom-color: @navbarInverseLinkColorActive;
 466   }
 467
 468   // Navbar search
 469   .navbar-search {
 470     .search-query {
 471       color: @white;
 472       background-color: @navbarInverseSearchBackground;
 473       border-color: @navbarInverseSearchBorder;
 474       .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
 475       .transition(none);
 476       .placeholder(@navbarInverseSearchPlaceholderColor);
 477
 478       // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
 479       &:focus,
 480       &.focused {
 481         padding: 5px 15px;
 482         color: @grayDark;
 483         text-shadow: 0 1px 0 @white;
 484         background-color: @navbarInverseSearchBackgroundFocus;
 485         border: 0;
 486         .box-shadow(0 0 3px rgba(0,0,0,.15));
 487         outline: 0;
 488       }
 489     }
 490   }
 491
 492   // Navbar collapse button
 493   .btn-navbar {
 494     .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
 495   }
 496
 497 }