[Summary view] [Print] [Text view]

   1  //
   2  // Navs
   3  // --------------------------------------------------
   4  
   5  
   6  // BASE CLASS
   7  // ----------
   8  
   9  .nav {
  10    margin-left: 0;
  11    margin-bottom: @baseLineHeight;
  12    list-style: none;
  13  }
  14  
  15  // Make links block level
  16  .nav > li > a {
  17    display: block;
  18  }
  19  .nav > li > a:hover,
  20  .nav > li > a:focus {
  21    text-decoration: none;
  22    background-color: @grayLighter;
  23  }
  24  
  25  // Prevent IE8 from misplacing imgs
  26  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  27  .nav > li > a > img {
  28    max-width: none;
  29  }
  30  
  31  // Redeclare pull classes because of specifity
  32  .nav > .pull-right {
  33    float: right;
  34  }
  35  
  36  // Nav headers (for dropdowns and lists)
  37  .nav-header {
  38    display: block;
  39    padding: 3px 15px;
  40    font-size: 11px;
  41    font-weight: bold;
  42    line-height: @baseLineHeight;
  43    color: @grayLight;
  44    text-shadow: 0 1px 0 rgba(255,255,255,.5);
  45    text-transform: uppercase;
  46  }
  47  // Space them out when they follow another list item (link)
  48  .nav li + .nav-header {
  49    margin-top: 9px;
  50  }
  51  
  52  
  53  
  54  // NAV LIST
  55  // --------
  56  
  57  .nav-list {
  58    padding-left: 15px;
  59    padding-right: 15px;
  60    margin-bottom: 0;
  61  }
  62  .nav-list > li > a,
  63  .nav-list .nav-header {
  64    margin-left:  -15px;
  65    margin-right: -15px;
  66    text-shadow: 0 1px 0 rgba(255,255,255,.5);
  67  }
  68  .nav-list > li > a {
  69    padding: 3px 15px;
  70  }
  71  .nav-list > .active > a,
  72  .nav-list > .active > a:hover,
  73  .nav-list > .active > a:focus {
  74    color: @white;
  75    text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  76    background-color: @linkColor;
  77  }
  78  .nav-list [class^="icon-"],
  79  .nav-list [class*=" icon-"] {
  80    margin-right: 2px;
  81  }
  82  // Dividers (basically an hr) within the dropdown
  83  .nav-list .divider {
  84    .nav-divider();
  85  }
  86  
  87  
  88  
  89  // TABS AND PILLS
  90  // -------------
  91  
  92  // Common styles
  93  .nav-tabs,
  94  .nav-pills {
  95    .clearfix();
  96  }
  97  .nav-tabs > li,
  98  .nav-pills > li {
  99    float: left;
 100  }
 101  .nav-tabs > li > a,
 102  .nav-pills > li > a {
 103    padding-right: 12px;
 104    padding-left: 12px;
 105    margin-right: 2px;
 106    line-height: 14px; // keeps the overall height an even number
 107  }
 108  
 109  // TABS
 110  // ----
 111  
 112  // Give the tabs something to sit on
 113  .nav-tabs {
 114    border-bottom: 1px solid #ddd;
 115  }
 116  // Make the list-items overlay the bottom border
 117  .nav-tabs > li {
 118    margin-bottom: -1px;
 119  }
 120  // Actual tabs (as links)
 121  .nav-tabs > li > a {
 122    padding-top: 8px;
 123    padding-bottom: 8px;
 124    line-height: @baseLineHeight;
 125    border: 1px solid transparent;
 126    .border-radius(4px 4px 0 0);
 127    &:hover,
 128    &:focus {
 129      border-color: @grayLighter @grayLighter #ddd;
 130    }
 131  }
 132  // Active state, and it's :hover/:focus to override normal :hover/:focus
 133  .nav-tabs > .active > a,
 134  .nav-tabs > .active > a:hover,
 135  .nav-tabs > .active > a:focus {
 136    color: @gray;
 137    background-color: @bodyBackground;
 138    border: 1px solid #ddd;
 139    border-bottom-color: transparent;
 140    cursor: default;
 141  }
 142  
 143  
 144  // PILLS
 145  // -----
 146  
 147  // Links rendered as pills
 148  .nav-pills > li > a {
 149    padding-top: 8px;
 150    padding-bottom: 8px;
 151    margin-top: 2px;
 152    margin-bottom: 2px;
 153    .border-radius(5px);
 154  }
 155  
 156  // Active state
 157  .nav-pills > .active > a,
 158  .nav-pills > .active > a:hover,
 159  .nav-pills > .active > a:focus {
 160    color: @white;
 161    background-color: @linkColor;
 162  }
 163  
 164  
 165  
 166  // STACKED NAV
 167  // -----------
 168  
 169  // Stacked tabs and pills
 170  .nav-stacked > li {
 171    float: none;
 172  }
 173  .nav-stacked > li > a {
 174    margin-right: 0; // no need for the gap between nav items
 175  }
 176  
 177  // Tabs
 178  .nav-tabs.nav-stacked {
 179    border-bottom: 0;
 180  }
 181  .nav-tabs.nav-stacked > li > a {
 182    border: 1px solid #ddd;
 183    .border-radius(0);
 184  }
 185  .nav-tabs.nav-stacked > li:first-child > a {
 186    .border-top-radius(4px);
 187  }
 188  .nav-tabs.nav-stacked > li:last-child > a {
 189    .border-bottom-radius(4px);
 190  }
 191  .nav-tabs.nav-stacked > li > a:hover,
 192  .nav-tabs.nav-stacked > li > a:focus {
 193    border-color: #ddd;
 194    z-index: 2;
 195  }
 196  
 197  // Pills
 198  .nav-pills.nav-stacked > li > a {
 199    margin-bottom: 3px;
 200  }
 201  .nav-pills.nav-stacked > li:last-child > a {
 202    margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
 203  }
 204  
 205  
 206  
 207  // DROPDOWNS
 208  // ---------
 209  
 210  .nav-tabs .dropdown-menu {
 211    .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
 212  }
 213  .nav-pills .dropdown-menu {
 214    .border-radius(6px); // make rounded corners match the pills
 215  }
 216  
 217  // Default dropdown links
 218  // -------------------------
 219  // Make carets use linkColor to start
 220  .nav .dropdown-toggle .caret {
 221    border-top-color: @linkColor;
 222    border-bottom-color: @linkColor;
 223    margin-top: 6px;
 224  }
 225  .nav .dropdown-toggle:hover .caret,
 226  .nav .dropdown-toggle:focus .caret {
 227    border-top-color: @linkColorHover;
 228    border-bottom-color: @linkColorHover;
 229  }
 230  /* move down carets for tabs */
 231  .nav-tabs .dropdown-toggle .caret {
 232    margin-top: 8px;
 233  }
 234  
 235  // Active dropdown links
 236  // -------------------------
 237  .nav .active .dropdown-toggle .caret {
 238    border-top-color: #fff;
 239    border-bottom-color: #fff;
 240  }
 241  .nav-tabs .active .dropdown-toggle .caret {
 242    border-top-color: @gray;
 243    border-bottom-color: @gray;
 244  }
 245  
 246  // Active:hover/:focus dropdown links
 247  // -------------------------
 248  .nav > .dropdown.active > a:hover,
 249  .nav > .dropdown.active > a:focus {
 250    cursor: pointer;
 251  }
 252  
 253  // Open dropdowns
 254  // -------------------------
 255  .nav-tabs .open .dropdown-toggle,
 256  .nav-pills .open .dropdown-toggle,
 257  .nav > li.dropdown.open.active > a:hover,
 258  .nav > li.dropdown.open.active > a:focus {
 259    color: @white;
 260    background-color: @grayLight;
 261    border-color: @grayLight;
 262  }
 263  .nav li.dropdown.open .caret,
 264  .nav li.dropdown.open.active .caret,
 265  .nav li.dropdown.open a:hover .caret,
 266  .nav li.dropdown.open a:focus .caret {
 267    border-top-color: @white;
 268    border-bottom-color: @white;
 269    .opacity(100);
 270  }
 271  
 272  // Dropdowns in stacked tabs
 273  .tabs-stacked .open > a:hover,
 274  .tabs-stacked .open > a:focus {
 275    border-color: @grayLight;
 276  }
 277  
 278  
 279  
 280  // TABBABLE
 281  // --------
 282  
 283  
 284  // COMMON STYLES
 285  // -------------
 286  
 287  // Clear any floats
 288  .tabbable {
 289    .clearfix();
 290  }
 291  .tab-content {
 292    overflow: auto; // prevent content from running below tabs
 293  }
 294  
 295  // Remove border on bottom, left, right
 296  .tabs-below > .nav-tabs,
 297  .tabs-right > .nav-tabs,
 298  .tabs-left > .nav-tabs {
 299    border-bottom: 0;
 300  }
 301  
 302  // Show/hide tabbable areas
 303  .tab-content > .tab-pane,
 304  .pill-content > .pill-pane {
 305    display: none;
 306  }
 307  .tab-content > .active,
 308  .pill-content > .active {
 309    display: block;
 310  }
 311  
 312  
 313  // BOTTOM
 314  // ------
 315  
 316  .tabs-below > .nav-tabs {
 317    border-top: 1px solid #ddd;
 318  }
 319  .tabs-below > .nav-tabs > li {
 320    margin-top: -1px;
 321    margin-bottom: 0;
 322  }
 323  .tabs-below > .nav-tabs > li > a {
 324    .border-radius(0 0 4px 4px);
 325    &:hover,
 326    &:focus {
 327      border-bottom-color: transparent;
 328      border-top-color: #ddd;
 329    }
 330  }
 331  .tabs-below > .nav-tabs > .active > a,
 332  .tabs-below > .nav-tabs > .active > a:hover,
 333  .tabs-below > .nav-tabs > .active > a:focus {
 334    border-color: transparent #ddd #ddd #ddd;
 335  }
 336  
 337  // LEFT & RIGHT
 338  // ------------
 339  
 340  // Common styles
 341  .tabs-left > .nav-tabs > li,
 342  .tabs-right > .nav-tabs > li {
 343    float: none;
 344  }
 345  .tabs-left > .nav-tabs > li > a,
 346  .tabs-right > .nav-tabs > li > a {
 347    min-width: 74px;
 348    margin-right: 0;
 349    margin-bottom: 3px;
 350  }
 351  
 352  // Tabs on the left
 353  .tabs-left > .nav-tabs {
 354    float: left;
 355    margin-right: 19px;
 356    border-right: 1px solid #ddd;
 357  }
 358  .tabs-left > .nav-tabs > li > a {
 359    margin-right: -1px;
 360    .border-radius(4px 0 0 4px);
 361  }
 362  .tabs-left > .nav-tabs > li > a:hover,
 363  .tabs-left > .nav-tabs > li > a:focus {
 364    border-color: @grayLighter #ddd @grayLighter @grayLighter;
 365  }
 366  .tabs-left > .nav-tabs .active > a,
 367  .tabs-left > .nav-tabs .active > a:hover,
 368  .tabs-left > .nav-tabs .active > a:focus {
 369    border-color: #ddd transparent #ddd #ddd;
 370    *border-right-color: @white;
 371  }
 372  
 373  // Tabs on the right
 374  .tabs-right > .nav-tabs {
 375    float: right;
 376    margin-left: 19px;
 377    border-left: 1px solid #ddd;
 378  }
 379  .tabs-right > .nav-tabs > li > a {
 380    margin-left: -1px;
 381    .border-radius(0 4px 4px 0);
 382  }
 383  .tabs-right > .nav-tabs > li > a:hover,
 384  .tabs-right > .nav-tabs > li > a:focus {
 385    border-color: @grayLighter @grayLighter @grayLighter #ddd;
 386  }
 387  .tabs-right > .nav-tabs .active > a,
 388  .tabs-right > .nav-tabs .active > a:hover,
 389  .tabs-right > .nav-tabs .active > a:focus {
 390    border-color: #ddd #ddd #ddd transparent;
 391    *border-left-color: @white;
 392  }
 393  
 394  
 395  
 396  // DISABLED STATES
 397  // ---------------
 398  
 399  // Gray out text
 400  .nav > .disabled > a {
 401    color: @grayLight;
 402  }
 403  // Nuke hover/focus effects
 404  .nav > .disabled > a:hover,
 405  .nav > .disabled > a:focus {
 406    text-decoration: none;
 407    background-color: transparent;
 408    cursor: default;
 409  }