1//
2// Navs
3// --------------------------------------------------
4
5
6// BASE CLASS
7// ----------
8
9.nav {
10  margin-left: 0;
11  margin-bottom: @baseLineHeight;
12  list-style: none;
13}
14
15// Make links block level
16.nav > li > a {
17  display: block;
18}
19.nav > li > a:hover,
20.nav > li > a:focus {
21  text-decoration: none;
22  background-color: @grayLighter;
23}
24
25// Prevent IE8 from misplacing imgs
26// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
27.nav > li > a > img {
28  max-width: none;
29}
30
31// Redeclare pull classes because of specifity
32.nav > .pull-right {
33  float: right;
34}
35
36// Nav headers (for dropdowns and lists)
37.nav-header {
38  display: block;
39  padding: 3px 15px;
40  font-size: 11px;
41  font-weight: bold;
42  line-height: @baseLineHeight;
43  color: @grayLight;
44  text-shadow: 0 1px 0 rgba(255,255,255,.5);
45  text-transform: uppercase;
46}
47// Space them out when they follow another list item (link)
48.nav li + .nav-header {
49  margin-top: 9px;
50}
51
52
53
54// NAV LIST
55// --------
56
57.nav-list {
58  padding-left: 15px;
59  padding-right: 15px;
60  margin-bottom: 0;
61}
62.nav-list > li > a,
63.nav-list .nav-header {
64  margin-left:  -15px;
65  margin-right: -15px;
66  text-shadow: 0 1px 0 rgba(255,255,255,.5);
67}
68.nav-list > li > a {
69  padding: 3px 15px;
70}
71.nav-list > .active > a,
72.nav-list > .active > a:hover,
73.nav-list > .active > a:focus {
74  color: @white;
75  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
76  background-color: @linkColor;
77}
78.nav-list [class^="icon-"],
79.nav-list [class*=" icon-"] {
80  margin-right: 2px;
81}
82// Dividers (basically an hr) within the dropdown
83.nav-list .divider {
84  .nav-divider();
85}
86
87
88
89// TABS AND PILLS
90// -------------
91
92// Common styles
93.nav-tabs,
94.nav-pills {
95  .clearfix();
96}
97.nav-tabs > li,
98.nav-pills > li {
99  float: left;
100}
101.nav-tabs > li > a,
102.nav-pills > li > a {
103  padding-right: 12px;
104  padding-left: 12px;
105  margin-right: 2px;
106  line-height: 14px; // keeps the overall height an even number
107}
108
109// TABS
110// ----
111
112// Give the tabs something to sit on
113.nav-tabs {
114  border-bottom: 1px solid #ddd;
115}
116// Make the list-items overlay the bottom border
117.nav-tabs > li {
118  margin-bottom: -1px;
119}
120// Actual tabs (as links)
121.nav-tabs > li > a {
122  padding-top: 8px;
123  padding-bottom: 8px;
124  line-height: @baseLineHeight;
125  border: 1px solid transparent;
126  .border-radius(4px 4px 0 0);
127  &:hover,
128  &:focus {
129    border-color: @grayLighter @grayLighter #ddd;
130  }
131}
132// Active state, and it's :hover/:focus to override normal :hover/:focus
133.nav-tabs > .active > a,
134.nav-tabs > .active > a:hover,
135.nav-tabs > .active > a:focus {
136  color: @gray;
137  background-color: @bodyBackground;
138  border: 1px solid #ddd;
139  border-bottom-color: transparent;
140  cursor: default;
141}
142
143
144// PILLS
145// -----
146
147// Links rendered as pills
148.nav-pills > li > a {
149  padding-top: 8px;
150  padding-bottom: 8px;
151  margin-top: 2px;
152  margin-bottom: 2px;
153  .border-radius(5px);
154}
155
156// Active state
157.nav-pills > .active > a,
158.nav-pills > .active > a:hover,
159.nav-pills > .active > a:focus {
160  color: @white;
161  background-color: @linkColor;
162}
163
164
165
166// STACKED NAV
167// -----------
168
169// Stacked tabs and pills
170.nav-stacked > li {
171  float: none;
172}
173.nav-stacked > li > a {
174  margin-right: 0; // no need for the gap between nav items
175}
176
177// Tabs
178.nav-tabs.nav-stacked {
179  border-bottom: 0;
180}
181.nav-tabs.nav-stacked > li > a {
182  border: 1px solid #ddd;
183  .border-radius(0);
184}
185.nav-tabs.nav-stacked > li:first-child > a {
186  .border-top-radius(4px);
187}
188.nav-tabs.nav-stacked > li:last-child > a {
189  .border-bottom-radius(4px);
190}
191.nav-tabs.nav-stacked > li > a:hover,
192.nav-tabs.nav-stacked > li > a:focus {
193  border-color: #ddd;
194  z-index: 2;
195}
196
197// Pills
198.nav-pills.nav-stacked > li > a {
199  margin-bottom: 3px;
200}
201.nav-pills.nav-stacked > li:last-child > a {
202  margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
203}
204
205
206
207// DROPDOWNS
208// ---------
209
210.nav-tabs .dropdown-menu {
211  .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
212}
213.nav-pills .dropdown-menu {
214  .border-radius(6px); // make rounded corners match the pills
215}
216
217// Default dropdown links
218// -------------------------
219// Make carets use linkColor to start
220.nav .dropdown-toggle .caret {
221  border-top-color: @linkColor;
222  border-bottom-color: @linkColor;
223  margin-top: 6px;
224}
225.nav .dropdown-toggle:hover .caret,
226.nav .dropdown-toggle:focus .caret {
227  border-top-color: @linkColorHover;
228  border-bottom-color: @linkColorHover;
229}
230/* move down carets for tabs */
231.nav-tabs .dropdown-toggle .caret {
232  margin-top: 8px;
233}
234
235// Active dropdown links
236// -------------------------
237.nav .active .dropdown-toggle .caret {
238  border-top-color: #fff;
239  border-bottom-color: #fff;
240}
241.nav-tabs .active .dropdown-toggle .caret {
242  border-top-color: @gray;
243  border-bottom-color: @gray;
244}
245
246// Active:hover/:focus dropdown links
247// -------------------------
248.nav > .dropdown.active > a:hover,
249.nav > .dropdown.active > a:focus {
250  cursor: pointer;
251}
252
253// Open dropdowns
254// -------------------------
255.nav-tabs .open .dropdown-toggle,
256.nav-pills .open .dropdown-toggle,
257.nav > li.dropdown.open.active > a:hover,
258.nav > li.dropdown.open.active > a:focus {
259  color: @white;
260  background-color: @grayLight;
261  border-color: @grayLight;
262}
263.nav li.dropdown.open .caret,
264.nav li.dropdown.open.active .caret,
265.nav li.dropdown.open a:hover .caret,
266.nav li.dropdown.open a:focus .caret {
267  border-top-color: @white;
268  border-bottom-color: @white;
269  .opacity(100);
270}
271
272// Dropdowns in stacked tabs
273.tabs-stacked .open > a:hover,
274.tabs-stacked .open > a:focus {
275  border-color: @grayLight;
276}
277
278
279
280// TABBABLE
281// --------
282
283
284// COMMON STYLES
285// -------------
286
287// Clear any floats
288.tabbable {
289  .clearfix();
290}
291.tab-content {
292  overflow: auto; // prevent content from running below tabs
293}
294
295// Remove border on bottom, left, right
296.tabs-below > .nav-tabs,
297.tabs-right > .nav-tabs,
298.tabs-left > .nav-tabs {
299  border-bottom: 0;
300}
301
302// Show/hide tabbable areas
303.tab-content > .tab-pane,
304.pill-content > .pill-pane {
305  display: none;
306}
307.tab-content > .active,
308.pill-content > .active {
309  display: block;
310}
311
312
313// BOTTOM
314// ------
315
316.tabs-below > .nav-tabs {
317  border-top: 1px solid #ddd;
318}
319.tabs-below > .nav-tabs > li {
320  margin-top: -1px;
321  margin-bottom: 0;
322}
323.tabs-below > .nav-tabs > li > a {
324  .border-radius(0 0 4px 4px);
325  &:hover,
326  &:focus {
327    border-bottom-color: transparent;
328    border-top-color: #ddd;
329  }
330}
331.tabs-below > .nav-tabs > .active > a,
332.tabs-below > .nav-tabs > .active > a:hover,
333.tabs-below > .nav-tabs > .active > a:focus {
334  border-color: transparent #ddd #ddd #ddd;
335}
336
337// LEFT & RIGHT
338// ------------
339
340// Common styles
341.tabs-left > .nav-tabs > li,
342.tabs-right > .nav-tabs > li {
343  float: none;
344}
345.tabs-left > .nav-tabs > li > a,
346.tabs-right > .nav-tabs > li > a {
347  min-width: 74px;
348  margin-right: 0;
349  margin-bottom: 3px;
350}
351
352// Tabs on the left
353.tabs-left > .nav-tabs {
354  float: left;
355  margin-right: 19px;
356  border-right: 1px solid #ddd;
357}
358.tabs-left > .nav-tabs > li > a {
359  margin-right: -1px;
360  .border-radius(4px 0 0 4px);
361}
362.tabs-left > .nav-tabs > li > a:hover,
363.tabs-left > .nav-tabs > li > a:focus {
364  border-color: @grayLighter #ddd @grayLighter @grayLighter;
365}
366.tabs-left > .nav-tabs .active > a,
367.tabs-left > .nav-tabs .active > a:hover,
368.tabs-left > .nav-tabs .active > a:focus {
369  border-color: #ddd transparent #ddd #ddd;
370  *border-right-color: @white;
371}
372
373// Tabs on the right
374.tabs-right > .nav-tabs {
375  float: right;
376  margin-left: 19px;
377  border-left: 1px solid #ddd;
378}
379.tabs-right > .nav-tabs > li > a {
380  margin-left: -1px;
381  .border-radius(0 4px 4px 0);
382}
383.tabs-right > .nav-tabs > li > a:hover,
384.tabs-right > .nav-tabs > li > a:focus {
385  border-color: @grayLighter @grayLighter @grayLighter #ddd;
386}
387.tabs-right > .nav-tabs .active > a,
388.tabs-right > .nav-tabs .active > a:hover,
389.tabs-right > .nav-tabs .active > a:focus {
390  border-color: #ddd #ddd #ddd transparent;
391  *border-left-color: @white;
392}
393
394
395
396// DISABLED STATES
397// ---------------
398
399// Gray out text
400.nav > .disabled > a {
401  color: @grayLight;
402}
403// Nuke hover/focus effects
404.nav > .disabled > a:hover,
405.nav > .disabled > a:focus {
406  text-decoration: none;
407  background-color: transparent;
408  cursor: default;
409}
410