3 // --------------------------------------------------
6 // --------------------------------------------------
10 padding-left: 0; // Override default ul/ol
21 padding: $nav-link-padding;
24 text-decoration: none;
25 background-color: $nav-link-hover-bg;
29 // Disabled state sets text to gray and nukes hover/tab effects
31 color: $nav-disabled-link-color;
35 color: $nav-disabled-link-hover-color;
36 text-decoration: none;
37 background-color: transparent;
38 cursor: $cursor-disabled;
48 background-color: $nav-link-hover-bg;
49 border-color: $link-color;
53 // Nav dividers (deprecated with v3.0.1)
55 // This should have been removed in v3 with the dropping of `.nav-list`, but
56 // we missed it. We don't currently support this anywhere, but in the interest
57 // of maintaining backward compatibility in case you use it, it's deprecated.
62 // Prevent IE8 from misplacing imgs
64 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
71 // -------------------------
73 // Give the tabs something to sit on
75 border-bottom: 1px solid $nav-tabs-border-color;
78 // Make the list-items overlay the bottom border
81 // Actual tabs (as links)
84 line-height: $line-height-base;
85 border: 1px solid transparent;
86 border-radius: $border-radius-base $border-radius-base 0 0;
88 border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
92 // Active state, and its :hover to override normal :hover
97 color: $nav-tabs-active-link-hover-color;
98 background-color: $nav-tabs-active-link-hover-bg;
99 border: 1px solid $nav-tabs-active-link-hover-border-color;
100 border-bottom-color: transparent;
105 // pulling this in mainly for less shorthand
107 @extend .nav-justified;
108 @extend .nav-tabs-justified;
113 // -------------------------
118 // Links rendered as pills
120 border-radius: $nav-pills-border-radius;
131 color: $nav-pills-active-link-hover-color;
132 background-color: $nav-pills-active-link-hover-bg;
144 margin-left: 0; // no need for this gap between nav items
150 // --------------------------------------------------
152 // Justified nav links
153 // -------------------------
166 > .dropdown .dropdown-menu {
171 @media (min-width: $screen-sm-min) {
182 // Move borders to anchors instead of bottom of list
184 // Mixin for adding on top the shared `.nav-justified` styles for our tabs
185 .nav-tabs-justified {
189 // Override margin from .nav-tabs
191 border-radius: $border-radius-base;
196 > .active > a:focus {
197 border: 1px solid $nav-tabs-justified-link-border-color;
200 @media (min-width: $screen-sm-min) {
202 border-bottom: 1px solid $nav-tabs-justified-link-border-color;
203 border-radius: $border-radius-base $border-radius-base 0 0;
207 > .active > a:focus {
208 border-bottom-color: $nav-tabs-justified-active-link-border-color;
214 // -------------------------
216 // Hide tabbable panes to start, show them when `.active`
227 // -------------------------
229 // Specific dropdowns
230 .nav-tabs .dropdown-menu {
231 // make dropdown border overlap tab border
233 // Remove the top rounded corners here since there is a hard edge above the menu
234 @include border-top-radius(0);