[Summary view] [Print] [Text view]

   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  }