tmpl/less/navs.less

   1 //
   2 // Navs
   3 // --------------------------------------------------
   4
   5
   6 // Base class
   7 // --------------------------------------------------
   8
   9 .nav {
  10   margin-bottom: 0;
  11   padding-left: 0; // Override default ul/ol
  12   list-style: none;
  13   .clearfix();
  14
  15   > li {
  16     position: relative;
  17     display: block;
  18
  19     > a {
  20       position: relative;
  21       display: block;
  22       padding: @nav-link-padding;
  23       &:hover,
  24       &:focus {
  25         text-decoration: none;
  26         background-color: @nav-link-hover-bg;
  27       }
  28     }
  29
  30     // Disabled state sets text to gray and nukes hover/tab effects
  31     &.disabled > a {
  32       color: @nav-disabled-link-color;
  33
  34       &:hover,
  35       &:focus {
  36         color: @nav-disabled-link-hover-color;
  37         text-decoration: none;
  38         background-color: transparent;
  39         cursor: not-allowed;
  40       }
  41     }
  42   }
  43
  44   // Open dropdowns
  45   .open > a {
  46     &,
  47     &:hover,
  48     &:focus {
  49       background-color: @nav-link-hover-bg;
  50       border-color: @link-color;
  51
  52       .caret {
  53         border-top-color: @link-hover-color;
  54         border-bottom-color: @link-hover-color;
  55       }
  56     }
  57   }
  58
  59   // Nav dividers (deprecated with v3.0.1)
  60   //
  61   // This should have been removed in v3 with the dropping of `.nav-list`, but
  62   // we missed it. We don't currently support this anywhere, but in the interest
  63   // of maintaining backward compatibility in case you use it, it's deprecated.
  64   .nav-divider {
  65     .nav-divider();
  66   }
  67
  68   // Prevent IE8 from misplacing imgs
  69   //
  70   // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  71   > li > a > img {
  72     max-width: none;
  73   }
  74 }
  75
  76
  77 // Tabs
  78 // -------------------------
  79
  80 // Give the tabs something to sit on
  81 .nav-tabs {
  82   border-bottom: 1px solid @nav-tabs-border-color;
  83   > li {
  84     float: left;
  85     // Make the list-items overlay the bottom border
  86     margin-bottom: -1px;
  87
  88     // Actual tabs (as links)
  89     > a {
  90       margin-right: 2px;
  91       line-height: @line-height-base;
  92       border: 1px solid transparent;
  93       border-radius: @border-radius-base @border-radius-base 0 0;
  94       &:hover {
  95         border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
  96       }
  97     }
  98
  99     // Active state, and it's :hover to override normal :hover
 100     &.active > a {
 101       &,
 102       &:hover,
 103       &:focus {
 104         color: @nav-tabs-active-link-hover-color;
 105         background-color: @nav-tabs-active-link-hover-bg;
 106         border: 1px solid @nav-tabs-active-link-hover-border-color;
 107         border-bottom-color: transparent;
 108         cursor: default;
 109       }
 110     }
 111   }
 112   // pulling this in mainly for less shorthand
 113   &.nav-justified {
 114     .nav-justified();
 115     .nav-tabs-justified();
 116   }
 117 }
 118
 119
 120 // Pills
 121 // -------------------------
 122 .nav-pills {
 123   > li {
 124     float: left;
 125
 126     // Links rendered as pills
 127     > a {
 128       border-radius: @nav-pills-border-radius;
 129     }
 130     + li {
 131       margin-left: 2px;
 132     }
 133
 134     // Active state
 135     &.active > a {
 136       &,
 137       &:hover,
 138       &:focus {
 139         color: @nav-pills-active-link-hover-color;
 140         background-color: @nav-pills-active-link-hover-bg;
 141
 142         .caret {
 143           border-top-color: @nav-pills-active-link-hover-color;
 144           border-bottom-color: @nav-pills-active-link-hover-color;
 145         }
 146       }
 147     }
 148   }
 149 }
 150
 151
 152 // Stacked pills
 153 .nav-stacked {
 154   > li {
 155     float: none;
 156     + li {
 157       margin-top: 2px;
 158       margin-left: 0; // no need for this gap between nav items
 159     }
 160   }
 161 }
 162
 163
 164 // Nav variations
 165 // --------------------------------------------------
 166
 167 // Justified nav links
 168 // -------------------------
 169
 170 .nav-justified {
 171   width: 100%;
 172
 173   > li {
 174     float: none;
 175      > a {
 176       text-align: center;
 177       margin-bottom: 5px;
 178     }
 179   }
 180
 181   > .dropdown .dropdown-menu {
 182     top: auto;
 183     left: auto;
 184   }
 185
 186   @media (min-width: @screen-sm-min) {
 187     > li {
 188       display: table-cell;
 189       width: 1%;
 190       > a {
 191         margin-bottom: 0;
 192       }
 193     }
 194   }
 195 }
 196
 197 // Move borders to anchors instead of bottom of list
 198 //
 199 // Mixin for adding on top the shared `.nav-justified` styles for our tabs
 200 .nav-tabs-justified {
 201   border-bottom: 0;
 202
 203   > li > a {
 204     // Override margin from .nav-tabs
 205     margin-right: 0;
 206     border-radius: @border-radius-base;
 207   }
 208
 209   > .active > a,
 210   > .active > a:hover,
 211   > .active > a:focus {
 212     border: 1px solid @nav-tabs-justified-link-border-color;
 213   }
 214
 215   @media (min-width: @screen-sm-min) {
 216     > li > a {
 217       border-bottom: 1px solid @nav-tabs-justified-link-border-color;
 218       border-radius: @border-radius-base @border-radius-base 0 0;
 219     }
 220     > .active > a,
 221     > .active > a:hover,
 222     > .active > a:focus {
 223       border-bottom-color: @nav-tabs-justified-active-link-border-color;
 224     }
 225   }
 226 }
 227
 228
 229 // Tabbable tabs
 230 // -------------------------
 231
 232 // Hide tabbable panes to start, show them when `.active`
 233 .tab-content {
 234   > .tab-pane {
 235     display: none;
 236   }
 237   > .active {
 238     display: block;
 239   }
 240 }
 241
 242
 243 // Dropdowns
 244 // -------------------------
 245
 246 // Make dropdown carets use link color in navs
 247 .nav .caret {
 248   border-top-color: @link-color;
 249   border-bottom-color: @link-color;
 250 }
 251 .nav a:hover .caret {
 252   border-top-color: @link-hover-color;
 253   border-bottom-color: @link-hover-color;
 254 }
 255
 256 // Specific dropdowns
 257 .nav-tabs .dropdown-menu {
 258   // make dropdown border overlap tab border
 259   margin-top: -1px;
 260   // Remove the top rounded corners here since there is a hard edge above the menu
 261   .border-top-radius(0);
 262 }