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