[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    background-color: @bodyBackground;
 135    border: 1px solid #ddd;
 136    border-bottom-color: transparent;
 137  }
 138  
 139  .nav-tabs > .active > a:not([href]),
 140  .nav-tabs > .active > a:not([href]):hover,
 141  .nav-tabs > .active > a:not([href]):focus {
 142    color: @gray;
 143    cursor: default;
 144  }
 145  
 146  // PILLS
 147  // -----
 148  
 149  // Links rendered as pills
 150  .nav-pills > li > a {
 151    padding-top: 8px;
 152    padding-bottom: 8px;
 153    margin-top: 2px;
 154    margin-bottom: 2px;
 155    .border-radius(5px);
 156  }
 157  
 158  // Active state
 159  .nav-pills > .active > a,
 160  .nav-pills > .active > a:hover,
 161  .nav-pills > .active > a:focus {
 162    color: @white;
 163    background-color: @linkColor;
 164  }
 165  
 166  
 167  
 168  // STACKED NAV
 169  // -----------
 170  
 171  // Stacked tabs and pills
 172  .nav-stacked > li {
 173    float: none;
 174  }
 175  .nav-stacked > li > a {
 176    margin-right: 0; // no need for the gap between nav items
 177  }
 178  
 179  // Tabs
 180  .nav-tabs.nav-stacked {
 181    border-bottom: 0;
 182  }
 183  .nav-tabs.nav-stacked > li > a {
 184    border: 1px solid #ddd;
 185    .border-radius(0);
 186  }
 187  .nav-tabs.nav-stacked > li:first-child > a {
 188    .border-top-radius(4px);
 189  }
 190  .nav-tabs.nav-stacked > li:last-child > a {
 191    .border-bottom-radius(4px);
 192  }
 193  .nav-tabs.nav-stacked > li > a:hover,
 194  .nav-tabs.nav-stacked > li > a:focus {
 195    border-color: #ddd;
 196    z-index: 2;
 197  }
 198  
 199  // Pills
 200  .nav-pills.nav-stacked > li > a {
 201    margin-bottom: 3px;
 202  }
 203  .nav-pills.nav-stacked > li:last-child > a {
 204    margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
 205  }
 206  
 207  
 208  
 209  // DROPDOWNS
 210  // ---------
 211  
 212  .nav-tabs .dropdown-menu {
 213    .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
 214  }
 215  .nav-pills .dropdown-menu {
 216    .border-radius(6px); // make rounded corners match the pills
 217  }
 218  
 219  // Default dropdown links
 220  // -------------------------
 221  // Make carets use linkColor to start
 222  .nav .dropdown-toggle .caret {
 223    border-top-color: @linkColor;
 224    border-bottom-color: @linkColor;
 225    margin-top: 6px;
 226  }
 227  .nav .dropdown-toggle:hover .caret,
 228  .nav .dropdown-toggle:focus .caret {
 229    border-top-color: @linkColorHover;
 230    border-bottom-color: @linkColorHover;
 231  }
 232  /* move down carets for tabs */
 233  .nav-tabs .dropdown-toggle .caret {
 234    margin-top: 8px;
 235  }
 236  
 237  // Active dropdown links
 238  // -------------------------
 239  .nav .active .dropdown-toggle .caret {
 240    border-top-color: #fff;
 241    border-bottom-color: #fff;
 242  }
 243  .nav-tabs .active .dropdown-toggle .caret {
 244    border-top-color: @gray;
 245    border-bottom-color: @gray;
 246  }
 247  
 248  // Active:hover/:focus dropdown links
 249  // -------------------------
 250  .nav > .dropdown.active > a:hover,
 251  .nav > .dropdown.active > a:focus {
 252    cursor: pointer;
 253  }
 254  
 255  // Open dropdowns
 256  // -------------------------
 257  .nav-tabs .open .dropdown-toggle,
 258  .nav-pills .open .dropdown-toggle,
 259  .nav > li.dropdown.open.active > a:hover,
 260  .nav > li.dropdown.open.active > a:focus {
 261    color: @white;
 262    background-color: @grayLight;
 263    border-color: @grayLight;
 264  }
 265  .nav li.dropdown.open .caret,
 266  .nav li.dropdown.open.active .caret,
 267  .nav li.dropdown.open a:hover .caret,
 268  .nav li.dropdown.open a:focus .caret {
 269    border-top-color: @white;
 270    border-bottom-color: @white;
 271    .opacity(100);
 272  }
 273  
 274  // Dropdowns in stacked tabs
 275  .tabs-stacked .open > a:hover,
 276  .tabs-stacked .open > a:focus {
 277    border-color: @grayLight;
 278  }
 279  
 280  
 281  
 282  // TABBABLE
 283  // --------
 284  
 285  
 286  // COMMON STYLES
 287  // -------------
 288  
 289  // Clear any floats
 290  .tabbable {
 291    .clearfix();
 292  }
 293  .tab-content {
 294    overflow: auto; // prevent content from running below tabs
 295  }
 296  
 297  // Remove border on bottom, left, right
 298  .tabs-below > .nav-tabs,
 299  .tabs-right > .nav-tabs,
 300  .tabs-left > .nav-tabs {
 301    border-bottom: 0;
 302  }
 303  
 304  // Show/hide tabbable areas
 305  .tab-content > .tab-pane,
 306  .pill-content > .pill-pane {
 307    display: none;
 308  }
 309  .tab-content > .active,
 310  .pill-content > .active {
 311    display: block;
 312  }
 313  
 314  
 315  // BOTTOM
 316  // ------
 317  
 318  .tabs-below > .nav-tabs {
 319    border-top: 1px solid #ddd;
 320  }
 321  .tabs-below > .nav-tabs > li {
 322    margin-top: -1px;
 323    margin-bottom: 0;
 324  }
 325  .tabs-below > .nav-tabs > li > a {
 326    .border-radius(0 0 4px 4px);
 327    &:hover,
 328    &:focus {
 329      border-bottom-color: transparent;
 330      border-top-color: #ddd;
 331    }
 332  }
 333  .tabs-below > .nav-tabs > .active > a,
 334  .tabs-below > .nav-tabs > .active > a:hover,
 335  .tabs-below > .nav-tabs > .active > a:focus {
 336    border-color: transparent #ddd #ddd #ddd;
 337  }
 338  
 339  // LEFT & RIGHT
 340  // ------------
 341  
 342  // Common styles
 343  .tabs-left > .nav-tabs > li,
 344  .tabs-right > .nav-tabs > li {
 345    float: none;
 346  }
 347  .tabs-left > .nav-tabs > li > a,
 348  .tabs-right > .nav-tabs > li > a {
 349    min-width: 74px;
 350    margin-right: 0;
 351    margin-bottom: 3px;
 352  }
 353  
 354  // Tabs on the left
 355  .tabs-left > .nav-tabs {
 356    float: left;
 357    margin-right: 19px;
 358    border-right: 1px solid #ddd;
 359  }
 360  .tabs-left > .nav-tabs > li > a {
 361    margin-right: -1px;
 362    .border-radius(4px 0 0 4px);
 363  }
 364  .tabs-left > .nav-tabs > li > a:hover,
 365  .tabs-left > .nav-tabs > li > a:focus {
 366    border-color: @grayLighter #ddd @grayLighter @grayLighter;
 367  }
 368  .tabs-left > .nav-tabs .active > a,
 369  .tabs-left > .nav-tabs .active > a:hover,
 370  .tabs-left > .nav-tabs .active > a:focus {
 371    border-color: #ddd transparent #ddd #ddd;
 372    *border-right-color: @white;
 373  }
 374  
 375  // Tabs on the right
 376  .tabs-right > .nav-tabs {
 377    float: right;
 378    margin-left: 19px;
 379    border-left: 1px solid #ddd;
 380  }
 381  .tabs-right > .nav-tabs > li > a {
 382    margin-left: -1px;
 383    .border-radius(0 4px 4px 0);
 384  }
 385  .tabs-right > .nav-tabs > li > a:hover,
 386  .tabs-right > .nav-tabs > li > a:focus {
 387    border-color: @grayLighter @grayLighter @grayLighter #ddd;
 388  }
 389  .tabs-right > .nav-tabs .active > a,
 390  .tabs-right > .nav-tabs .active > a:hover,
 391  .tabs-right > .nav-tabs .active > a:focus {
 392    border-color: #ddd #ddd #ddd transparent;
 393    *border-left-color: @white;
 394  }
 395  
 396  
 397  
 398  // DISABLED STATES
 399  // ---------------
 400  
 401  // Gray out text
 402  .nav > .disabled > a {
 403    color: @grayLight;
 404  }
 405  // Nuke hover/focus effects
 406  .nav > .disabled > a:hover,
 407  .nav > .disabled > a:focus {
 408    text-decoration: none;
 409    background-color: transparent;
 410    cursor: default;
 411  }