]>
Commit | Line | Data |
---|---|---|
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 | .caret { | |
53 | border-top-color: @link-hover-color; | |
54 | border-bottom-color: @link-hover-color; | |
55 | } | |
56 | } | |
57 | } | |
58 | ||
59 | // Nav dividers (deprecated with v3.0.1) | |
60 | // | |
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. | |
64 | .nav-divider { | |
65 | .nav-divider(); | |
66 | } | |
67 | ||
68 | // Prevent IE8 from misplacing imgs | |
69 | // | |
70 | // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 | |
71 | > li > a > img { | |
72 | max-width: none; | |
73 | } | |
74 | } | |
75 | ||
76 | ||
77 | // Tabs | |
78 | // ------------------------- | |
79 | ||
80 | // Give the tabs something to sit on | |
81 | .nav-tabs { | |
82 | border-bottom: 1px solid @nav-tabs-border-color; | |
83 | > li { | |
84 | float: left; | |
85 | // Make the list-items overlay the bottom border | |
86 | margin-bottom: -1px; | |
87 | ||
88 | // Actual tabs (as links) | |
89 | > a { | |
90 | margin-right: 2px; | |
91 | line-height: @line-height-base; | |
92 | border: 1px solid transparent; | |
93 | border-radius: @border-radius-base @border-radius-base 0 0; | |
94 | &:hover { | |
95 | border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; | |
96 | } | |
97 | } | |
98 | ||
99 | // Active state, and it's :hover to override normal :hover | |
100 | &.active > a { | |
101 | &, | |
102 | &:hover, | |
103 | &:focus { | |
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; | |
108 | cursor: default; | |
109 | } | |
110 | } | |
111 | } | |
112 | // pulling this in mainly for less shorthand | |
113 | &.nav-justified { | |
114 | .nav-justified(); | |
115 | .nav-tabs-justified(); | |
116 | } | |
117 | } | |
118 | ||
119 | ||
120 | // Pills | |
121 | // ------------------------- | |
122 | .nav-pills { | |
123 | > li { | |
124 | float: left; | |
125 | ||
126 | // Links rendered as pills | |
127 | > a { | |
128 | border-radius: @nav-pills-border-radius; | |
129 | } | |
130 | + li { | |
131 | margin-left: 2px; | |
132 | } | |
133 | ||
134 | // Active state | |
135 | &.active > a { | |
136 | &, | |
137 | &:hover, | |
138 | &:focus { | |
139 | color: @nav-pills-active-link-hover-color; | |
140 | background-color: @nav-pills-active-link-hover-bg; | |
141 | ||
142 | .caret { | |
143 | border-top-color: @nav-pills-active-link-hover-color; | |
144 | border-bottom-color: @nav-pills-active-link-hover-color; | |
145 | } | |
146 | } | |
147 | } | |
148 | } | |
149 | } | |
150 | ||
151 | ||
152 | // Stacked pills | |
153 | .nav-stacked { | |
154 | > li { | |
155 | float: none; | |
156 | + li { | |
157 | margin-top: 2px; | |
158 | margin-left: 0; // no need for this gap between nav items | |
159 | } | |
160 | } | |
161 | } | |
162 | ||
163 | ||
164 | // Nav variations | |
165 | // -------------------------------------------------- | |
166 | ||
167 | // Justified nav links | |
168 | // ------------------------- | |
169 | ||
170 | .nav-justified { | |
171 | width: 100%; | |
172 | ||
173 | > li { | |
174 | float: none; | |
175 | > a { | |
176 | text-align: center; | |
177 | margin-bottom: 5px; | |
178 | } | |
179 | } | |
180 | ||
181 | > .dropdown .dropdown-menu { | |
182 | top: auto; | |
183 | left: auto; | |
184 | } | |
185 | ||
186 | @media (min-width: @screen-sm-min) { | |
187 | > li { | |
188 | display: table-cell; | |
189 | width: 1%; | |
190 | > a { | |
191 | margin-bottom: 0; | |
192 | } | |
193 | } | |
194 | } | |
195 | } | |
196 | ||
197 | // Move borders to anchors instead of bottom of list | |
198 | // | |
199 | // Mixin for adding on top the shared `.nav-justified` styles for our tabs | |
200 | .nav-tabs-justified { | |
201 | border-bottom: 0; | |
202 | ||
203 | > li > a { | |
204 | // Override margin from .nav-tabs | |
205 | margin-right: 0; | |
206 | border-radius: @border-radius-base; | |
207 | } | |
208 | ||
209 | > .active > a, | |
210 | > .active > a:hover, | |
211 | > .active > a:focus { | |
212 | border: 1px solid @nav-tabs-justified-link-border-color; | |
213 | } | |
214 | ||
215 | @media (min-width: @screen-sm-min) { | |
216 | > li > a { | |
217 | border-bottom: 1px solid @nav-tabs-justified-link-border-color; | |
218 | border-radius: @border-radius-base @border-radius-base 0 0; | |
219 | } | |
220 | > .active > a, | |
221 | > .active > a:hover, | |
222 | > .active > a:focus { | |
223 | border-bottom-color: @nav-tabs-justified-active-link-border-color; | |
224 | } | |
225 | } | |
226 | } | |
227 | ||
228 | ||
229 | // Tabbable tabs | |
230 | // ------------------------- | |
231 | ||
232 | // Hide tabbable panes to start, show them when `.active` | |
233 | .tab-content { | |
234 | > .tab-pane { | |
235 | display: none; | |
236 | } | |
237 | > .active { | |
238 | display: block; | |
239 | } | |
240 | } | |
241 | ||
242 | ||
243 | // Dropdowns | |
244 | // ------------------------- | |
245 | ||
246 | // Make dropdown carets use link color in navs | |
247 | .nav .caret { | |
248 | border-top-color: @link-color; | |
249 | border-bottom-color: @link-color; | |
250 | } | |
251 | .nav a:hover .caret { | |
252 | border-top-color: @link-hover-color; | |
253 | border-bottom-color: @link-hover-color; | |
254 | } | |
255 | ||
256 | // Specific dropdowns | |
257 | .nav-tabs .dropdown-menu { | |
258 | // make dropdown border overlap tab border | |
259 | margin-top: -1px; | |
260 | // Remove the top rounded corners here since there is a hard edge above the menu | |
261 | .border-top-radius(0); | |
262 | } |