Mercurial > wikked

comparison static/bootstrap/less/navs.less @ 61:130eccd396d8

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