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) 30px ((@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   padding: ((@navbarHeight - @baseLineHeight) / 2) 5px ((@navbarHeight - @baseLineHeight) / 2);
 243   color: @navbarLinkColor;
 244   text-decoration: none;
 245   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
 246 }
 247 .navbar .nav .dropdown-toggle .caret {
 248   margin-top: 8px;
 249 }
 250
 251 // Hover
 252 .navbar .nav > li > a:focus,
 253 .navbar .nav > li > a:hover {
 254   background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
 255   color: @navbarLinkColorHover;
 256   text-decoration: none;
 257 }
 258
 259 // Active nav items
 260 .navbar .nav > .active > a,
 261 .navbar .nav > .active > a:hover,
 262 .navbar .nav > .active > a:focus {
 263   color: @navbarLinkColorActive;
 264   text-decoration: none;
 265   background-color: @navbarLinkBackgroundActive;
 266   .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
 267 }
 268
 269 // Navbar button for toggling navbar items in responsive layouts
 270 // These definitions need to come after '.navbar .btn'
 271 .navbar .btn-navbar {
 272   display: none;
 273   float: right;
 274   padding: 7px 10px;
 275   margin-left: 5px;
 276   margin-right: 5px;
 277   .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
 278   .box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075));
 279 }
 280 .navbar .btn-navbar .icon-bar {
 281   display: block;
 282   width: 18px;
 283   height: 2px;
 284   background-color: #f5f5f5;
 285   .border-radius(1px);
 286   .box-shadow(0 1px 0 rgba(0,0,0,.25));
 287 }
 288 .btn-navbar .icon-bar + .icon-bar {
 289   margin-top: 3px;
 290 }
 291
 292
 293
 294 // Dropdown menus
 295 // --------------
 296
 297 // Menu position and menu carets
 298 .navbar .nav > li > .dropdown-menu {
 299   &:before {
 300     content: '';
 301     display: inline-block;
 302     border-left:   7px solid transparent;
 303     border-right:  7px solid transparent;
 304     border-bottom: 7px solid #ccc;
 305     border-bottom-color: @dropdownBorder;
 306     position: absolute;
 307     top: -7px;
 308     left: 9px;
 309   }
 310   &:after {
 311     content: '';
 312     display: inline-block;
 313     border-left:   6px solid transparent;
 314     border-right:  6px solid transparent;
 315     border-bottom: 6px solid @dropdownBackground;
 316     position: absolute;
 317     top: -6px;
 318     left: 10px;
 319   }
 320 }
 321 // Menu position and menu caret support for dropups via extra dropup class
 322 .navbar-fixed-bottom .nav > li > .dropdown-menu {
 323   &:before {
 324     border-top: 7px solid #ccc;
 325     border-top-color: @dropdownBorder;
 326     border-bottom: 0;
 327     bottom: -7px;
 328     top: auto;
 329   }
 330   &:after {
 331     border-top: 6px solid @dropdownBackground;
 332     border-bottom: 0;
 333     bottom: -6px;
 334     top: auto;
 335   }
 336 }
 337
 338 // Remove background color from open dropdown
 339 .navbar .nav li.dropdown.open > .dropdown-toggle,
 340 .navbar .nav li.dropdown.active > .dropdown-toggle,
 341 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
 342   background-color: @navbarLinkBackgroundActive;
 343   color: @navbarLinkColorActive;
 344 }
 345 .navbar .nav li.dropdown > .dropdown-toggle .caret {
 346   border-top-color: @navbarLinkColor;
 347   border-bottom-color: @navbarLinkColor;
 348 }
 349 .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
 350 .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
 351 .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
 352   border-top-color: @navbarLinkColorActive;
 353   border-bottom-color: @navbarLinkColorActive;
 354 }
 355
 356 // Right aligned menus need alt position
 357 .navbar .pull-right > li > .dropdown-menu,
 358 .navbar .nav > li > .dropdown-menu.pull-right {
 359   left: auto;
 360   right: 0;
 361   &:before {
 362     left: auto;
 363     right: 12px;
 364   }
 365   &:after {
 366     left: auto;
 367     right: 13px;
 368   }
 369   .dropdown-menu {
 370     left: auto;
 371     right: 100%;
 372     margin-left: 0;
 373     margin-right: -1px;
 374     .border-radius(6px 0 6px 6px);
 375   }
 376 }
 377
 378
 379 // Inverted navbar
 380 // -------------------------
 381
 382 .navbar-inverse {
 383   color: @navbarInverseText;
 384
 385   .navbar-inner {
 386     #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
 387     border-color: @navbarInverseBorder;
 388   }
 389
 390   .brand,
 391   .nav > li > a {
 392     color: @navbarInverseLinkColor;
 393     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 394     &:hover {
 395       color: @navbarInverseLinkColorHover;
 396     }
 397   }
 398
 399   .nav > li > a:focus,
 400   .nav > li > a:hover {
 401     background-color: @navbarInverseLinkBackgroundHover;
 402     color: @navbarInverseLinkColorHover;
 403   }
 404
 405   .nav .active > a,
 406   .nav .active > a:hover,
 407   .nav .active > a:focus {
 408     color: @navbarInverseLinkColorActive;
 409     background-color: @navbarInverseLinkBackgroundActive;
 410   }
 411
 412   // Inline text links
 413   .navbar-link {
 414     color: @navbarInverseLinkColor;
 415     &:hover {
 416       color: @navbarInverseLinkColorHover;
 417     }
 418   }
 419
 420   // Dividers in navbar
 421   .divider-vertical {
 422     border-left-color: @navbarInverseBackground;
 423     border-right-color: @navbarInverseBackgroundHighlight;
 424   }
 425
 426   // Dropdowns
 427   .nav li.dropdown.open > .dropdown-toggle,
 428   .nav li.dropdown.active > .dropdown-toggle,
 429   .nav li.dropdown.open.active > .dropdown-toggle {
 430     background-color: @navbarInverseLinkBackgroundActive;
 431     color: @navbarInverseLinkColorActive;
 432   }
 433   .nav li.dropdown > .dropdown-toggle .caret {
 434     border-top-color: @navbarInverseLinkColor;
 435     border-bottom-color: @navbarInverseLinkColor;
 436   }
 437   .nav li.dropdown.open > .dropdown-toggle .caret,
 438   .nav li.dropdown.active > .dropdown-toggle .caret,
 439   .nav li.dropdown.open.active > .dropdown-toggle .caret {
 440     border-top-color: @navbarInverseLinkColorActive;
 441     border-bottom-color: @navbarInverseLinkColorActive;
 442   }
 443
 444   // Navbar search
 445   .navbar-search {
 446     .search-query {
 447       color: @white;
 448       background-color: @navbarInverseSearchBackground;
 449       border-color: @navbarInverseSearchBorder;
 450       .box-shadow(inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15));
 451       .transition(none);
 452       .placeholder(@navbarInverseSearchPlaceholderColor);
 453
 454       // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
 455       &:focus,
 456       &.focused {
 457         padding: 5px 15px;
 458         color: @grayDark;
 459         text-shadow: 0 1px 0 @white;
 460         background-color: @navbarInverseSearchBackgroundFocus;
 461         border: 0;
 462         .box-shadow(0 0 3px rgba(0,0,0,.15));
 463         outline: 0;
 464       }
 465     }
 466   }
 467
 468   // Navbar collapse button
 469   .btn-navbar {
 470     .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
 471   }
 472
 473 }
 474
 475
 476