3 // --------------------------------------------------
7 // --------------------------------------------------
11 padding-left: 0; // Override default ul/ol
22 padding: @nav-link-padding;
25 text-decoration: none;
26 background-color: @nav-link-hover-bg;
30 // Disabled state sets text to gray and nukes hover/tab effects
32 color: @nav-disabled-link-color;
36 color: @nav-disabled-link-hover-color;
37 text-decoration: none;
38 background-color: transparent;
49 background-color: @nav-link-hover-bg;
50 border-color: @link-color;
53 border-top-color: @link-hover-color;
54 border-bottom-color: @link-hover-color;
59 // Nav dividers (deprecated with v3.0.1)
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.
68 // Prevent IE8 from misplacing imgs
70 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
78 // -------------------------
80 // Give the tabs something to sit on
82 border-bottom: 1px solid @nav-tabs-border-color;
85 // Make the list-items overlay the bottom border
88 // Actual tabs (as links)
91 line-height: @line-height-base;
92 border: 1px solid transparent;
93 border-radius: @border-radius-base @border-radius-base 0 0;
95 border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
99 // Active state, and it's :hover to override normal :hover
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;
112 // pulling this in mainly for less shorthand
115 .nav-tabs-justified();
121 // -------------------------
126 // Links rendered as pills
128 border-radius: @nav-pills-border-radius;
139 color: @nav-pills-active-link-hover-color;
140 background-color: @nav-pills-active-link-hover-bg;
143 border-top-color: @nav-pills-active-link-hover-color;
144 border-bottom-color: @nav-pills-active-link-hover-color;
158 margin-left: 0; // no need for this gap between nav items
165 // --------------------------------------------------
167 // Justified nav links
168 // -------------------------
181 > .dropdown .dropdown-menu {
186 @media (min-width: @screen-sm-min) {
197 // Move borders to anchors instead of bottom of list
199 // Mixin for adding on top the shared `.nav-justified` styles for our tabs
200 .nav-tabs-justified {
204 // Override margin from .nav-tabs
206 border-radius: @border-radius-base;
211 > .active > a:focus {
212 border: 1px solid @nav-tabs-justified-link-border-color;
215 @media (min-width: @screen-sm-min) {
217 border-bottom: 1px solid @nav-tabs-justified-link-border-color;
218 border-radius: @border-radius-base @border-radius-base 0 0;
222 > .active > a:focus {
223 border-bottom-color: @nav-tabs-justified-active-link-border-color;
230 // -------------------------
232 // Hide tabbable panes to start, show them when `.active`
244 // -------------------------
246 // Make dropdown carets use link color in navs
248 border-top-color: @link-color;
249 border-bottom-color: @link-color;
251 .nav a:hover .caret {
252 border-top-color: @link-hover-color;
253 border-bottom-color: @link-hover-color;
256 // Specific dropdowns
257 .nav-tabs .dropdown-menu {
258 // make dropdown border overlap tab border
260 // Remove the top rounded corners here since there is a hard edge above the menu
261 .border-top-radius(0);