css/bootstrap/navs.less

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