3 // --------------------------------------------------
11 margin-bottom: @baseLineHeight;
15 // Make links block level
20 text-decoration: none;
21 background-color: @grayLighter;
24 // Redeclare pull classes because of specifity
29 // Nav headers (for dropdowns and lists)
35 line-height: @baseLineHeight;
37 text-shadow: 0 1px 0 rgba(255,255,255,.5);
38 text-transform: uppercase;
40 // Space them out when they follow another list item (link)
41 .nav li + .nav-header {
56 .nav-list .nav-header {
59 text-shadow: 0 1px 0 rgba(255,255,255,.5);
64 .nav-list > .active > a,
65 .nav-list > .active > a:hover {
67 text-shadow: 0 -1px 0 rgba(0,0,0,.2);
68 background-color: @linkColor;
70 .nav-list [class^="icon-"] {
73 // Dividers (basically an hr) within the dropdown
97 line-height: 14px; // keeps the overall height an even number
103 // Give the tabs something to sit on
105 border-bottom: 1px solid #ddd;
107 // Make the list-items overlay the bottom border
111 // Actual tabs (as links)
115 line-height: @baseLineHeight;
116 border: 1px solid transparent;
117 .border-radius(4px 4px 0 0);
119 border-color: @grayLighter @grayLighter #ddd;
122 // Active state, and it's :hover to override normal :hover
123 .nav-tabs > .active > a,
124 .nav-tabs > .active > a:hover {
126 background-color: @white;
127 border: 1px solid #ddd;
128 border-bottom-color: transparent;
136 // Links rendered as pills
137 .nav-pills > li > a {
146 .nav-pills > .active > a,
147 .nav-pills > .active > a:hover {
149 background-color: @linkColor;
157 // Stacked tabs and pills
161 .nav-stacked > li > a {
162 margin-right: 0; // no need for the gap between nav items
166 .nav-tabs.nav-stacked {
169 .nav-tabs.nav-stacked > li > a {
170 border: 1px solid #ddd;
173 .nav-tabs.nav-stacked > li:first-child > a {
174 .border-top-radius(4px);
176 .nav-tabs.nav-stacked > li:last-child > a {
177 .border-bottom-radius(4px);
179 .nav-tabs.nav-stacked > li > a:hover {
185 .nav-pills.nav-stacked > li > a {
188 .nav-pills.nav-stacked > li:last-child > a {
189 margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
197 .nav-tabs .dropdown-menu {
198 .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
200 .nav-pills .dropdown-menu {
201 .border-radius(6px); // make rounded corners match the pills
204 // Default dropdown links
205 // -------------------------
206 // Make carets use linkColor to start
207 .nav .dropdown-toggle .caret {
208 border-top-color: @linkColor;
209 border-bottom-color: @linkColor;
212 .nav .dropdown-toggle:hover .caret {
213 border-top-color: @linkColorHover;
214 border-bottom-color: @linkColorHover;
216 /* move down carets for tabs */
217 .nav-tabs .dropdown-toggle .caret {
221 // Active dropdown links
222 // -------------------------
223 .nav .active .dropdown-toggle .caret {
224 border-top-color: #fff;
225 border-bottom-color: #fff;
227 .nav-tabs .active .dropdown-toggle .caret {
228 border-top-color: @gray;
229 border-bottom-color: @gray;
232 // Active:hover dropdown links
233 // -------------------------
234 .nav > .dropdown.active > a:hover {
239 // -------------------------
240 .nav-tabs .open .dropdown-toggle,
241 .nav-pills .open .dropdown-toggle,
242 .nav > li.dropdown.open.active > a:hover {
244 background-color: @grayLight;
245 border-color: @grayLight;
247 .nav li.dropdown.open .caret,
248 .nav li.dropdown.open.active .caret,
249 .nav li.dropdown.open a:hover .caret {
250 border-top-color: @white;
251 border-bottom-color: @white;
255 // Dropdowns in stacked tabs
256 .tabs-stacked .open > a:hover {
257 border-color: @grayLight;
274 overflow: auto; // prevent content from running below tabs
277 // Remove border on bottom, left, right
278 .tabs-below > .nav-tabs,
279 .tabs-right > .nav-tabs,
280 .tabs-left > .nav-tabs {
284 // Show/hide tabbable areas
285 .tab-content > .tab-pane,
286 .pill-content > .pill-pane {
289 .tab-content > .active,
290 .pill-content > .active {
298 .tabs-below > .nav-tabs {
299 border-top: 1px solid #ddd;
301 .tabs-below > .nav-tabs > li {
305 .tabs-below > .nav-tabs > li > a {
306 .border-radius(0 0 4px 4px);
308 border-bottom-color: transparent;
309 border-top-color: #ddd;
312 .tabs-below > .nav-tabs > .active > a,
313 .tabs-below > .nav-tabs > .active > a:hover {
314 border-color: transparent #ddd #ddd #ddd;
321 .tabs-left > .nav-tabs > li,
322 .tabs-right > .nav-tabs > li {
325 .tabs-left > .nav-tabs > li > a,
326 .tabs-right > .nav-tabs > li > a {
333 .tabs-left > .nav-tabs {
336 border-right: 1px solid #ddd;
338 .tabs-left > .nav-tabs > li > a {
340 .border-radius(4px 0 0 4px);
342 .tabs-left > .nav-tabs > li > a:hover {
343 border-color: @grayLighter #ddd @grayLighter @grayLighter;
345 .tabs-left > .nav-tabs .active > a,
346 .tabs-left > .nav-tabs .active > a:hover {
347 border-color: #ddd transparent #ddd #ddd;
348 *border-right-color: @white;
352 .tabs-right > .nav-tabs {
355 border-left: 1px solid #ddd;
357 .tabs-right > .nav-tabs > li > a {
359 .border-radius(0 4px 4px 0);
361 .tabs-right > .nav-tabs > li > a:hover {
362 border-color: @grayLighter @grayLighter @grayLighter #ddd;
364 .tabs-right > .nav-tabs .active > a,
365 .tabs-right > .nav-tabs .active > a:hover {
366 border-color: #ddd #ddd #ddd transparent;
367 *border-left-color: @white;
376 .nav > .disabled > a {
379 // Nuke hover effects
380 .nav > .disabled > a:hover {
381 text-decoration: none;
382 background-color: transparent;