libs/bootstrap/less/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 .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 }