less/bootstrap/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   &:extend(.clearfix all);
  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   }
  53
  54   // Nav dividers (deprecated with v3.0.1)
  55   //
  56   // This should have been removed in v3 with the dropping of `.nav-list`, but
  57   // we missed it. We don't currently support this anywhere, but in the interest
  58   // of maintaining backward compatibility in case you use it, it's deprecated.
  59   .nav-divider {
  60     .nav-divider();
  61   }
  62
  63   // Prevent IE8 from misplacing imgs
  64   //
  65   // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  66   > li > a > img {
  67     max-width: none;
  68   }
  69 }
  70
  71
  72 // Tabs
  73 // -------------------------
  74
  75 // Give the tabs something to sit on
  76 .nav-tabs {
  77   border-bottom: 1px solid @nav-tabs-border-color;
  78   > li {
  79     float: left;
  80     // Make the list-items overlay the bottom border
  81     margin-bottom: -1px;
  82
  83     // Actual tabs (as links)
  84     > a {
  85       margin-right: 2px;
  86       line-height: @line-height-base;
  87       border: 1px solid transparent;
  88       border-radius: @border-radius-base @border-radius-base 0 0;
  89       &:hover {
  90         border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
  91       }
  92     }
  93
  94     // Active state, and its :hover to override normal :hover
  95     &.active > a {
  96       &,
  97       &:hover,
  98       &:focus {
  99         color: @nav-tabs-active-link-hover-color;
 100         background-color: @nav-tabs-active-link-hover-bg;
 101         border: 1px solid @nav-tabs-active-link-hover-border-color;
 102         border-bottom-color: transparent;
 103         cursor: default;
 104       }
 105     }
 106   }
 107   // pulling this in mainly for less shorthand
 108   &.nav-justified {
 109     .nav-justified();
 110     .nav-tabs-justified();
 111   }
 112 }
 113
 114
 115 // Pills
 116 // -------------------------
 117 .nav-pills {
 118   > li {
 119     float: left;
 120
 121     // Links rendered as pills
 122     > a {
 123       border-radius: @nav-pills-border-radius;
 124     }
 125     + li {
 126       margin-left: 2px;
 127     }
 128
 129     // Active state
 130     &.active > a {
 131       &,
 132       &:hover,
 133       &:focus {
 134         color: @nav-pills-active-link-hover-color;
 135         background-color: @nav-pills-active-link-hover-bg;
 136       }
 137     }
 138   }
 139 }
 140
 141
 142 // Stacked pills
 143 .nav-stacked {
 144   > li {
 145     float: none;
 146     + li {
 147       margin-top: 2px;
 148       margin-left: 0; // no need for this gap between nav items
 149     }
 150   }
 151 }
 152
 153
 154 // Nav variations
 155 // --------------------------------------------------
 156
 157 // Justified nav links
 158 // -------------------------
 159
 160 .nav-justified {
 161   width: 100%;
 162
 163   > li {
 164     float: none;
 165      > a {
 166       text-align: center;
 167       margin-bottom: 5px;
 168     }
 169   }
 170
 171   > .dropdown .dropdown-menu {
 172     top: auto;
 173     left: auto;
 174   }
 175
 176   @media (min-width: @screen-sm-min) {
 177     > li {
 178       display: table-cell;
 179       width: 1%;
 180       > a {
 181         margin-bottom: 0;
 182       }
 183     }
 184   }
 185 }
 186
 187 // Move borders to anchors instead of bottom of list
 188 //
 189 // Mixin for adding on top the shared `.nav-justified` styles for our tabs
 190 .nav-tabs-justified {
 191   border-bottom: 0;
 192
 193   > li > a {
 194     // Override margin from .nav-tabs
 195     margin-right: 0;
 196     border-radius: @border-radius-base;
 197   }
 198
 199   > .active > a,
 200   > .active > a:hover,
 201   > .active > a:focus {
 202     border: 1px solid @nav-tabs-justified-link-border-color;
 203   }
 204
 205   @media (min-width: @screen-sm-min) {
 206     > li > a {
 207       border-bottom: 1px solid @nav-tabs-justified-link-border-color;
 208       border-radius: @border-radius-base @border-radius-base 0 0;
 209     }
 210     > .active > a,
 211     > .active > a:hover,
 212     > .active > a:focus {
 213       border-bottom-color: @nav-tabs-justified-active-link-border-color;
 214     }
 215   }
 216 }
 217
 218
 219 // Tabbable tabs
 220 // -------------------------
 221
 222 // Hide tabbable panes to start, show them when `.active`
 223 .tab-content {
 224   > .tab-pane {
 225     display: none;
 226   }
 227   > .active {
 228     display: block;
 229   }
 230 }
 231
 232
 233 // Dropdowns
 234 // -------------------------
 235
 236 // Specific dropdowns
 237 .nav-tabs .dropdown-menu {
 238   // make dropdown border overlap tab border
 239   margin-top: -1px;
 240   // Remove the top rounded corners here since there is a hard edge above the menu
 241   .border-top-radius(0);
 242 }