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