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 } |
|
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 it's :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 } |
|