Mercurial > wikked

comparison static/bootstrap/less/navs.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Navs 2 // Navs
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 5
6 // BASE CLASS 6 // Base class
7 // ---------- 7 // --------------------------------------------------
8 8
9 .nav { 9 .nav {
10 margin-left: 0; 10 margin-bottom: 0;
11 margin-bottom: @baseLineHeight; 11 padding-left: 0; // Override default ul/ol
12 list-style: none; 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(); 13 .clearfix();
96 } 14
97 .nav-tabs > li, 15 > li {
98 .nav-pills > li { 16 position: relative;
99 float: left; 17 display: block;
100 } 18
101 .nav-tabs > li > a, 19 > a {
102 .nav-pills > li > a { 20 position: relative;
103 padding-right: 12px; 21 display: block;
104 padding-left: 12px; 22 padding: @nav-link-padding;
105 margin-right: 2px; 23 &:hover,
106 line-height: 14px; // keeps the overall height an even number 24 &:focus {
107 } 25 text-decoration: none;
108 26 background-color: @nav-link-hover-bg;
109 // TABS 27 }
110 // ---- 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 // -------------------------
111 74
112 // Give the tabs something to sit on 75 // Give the tabs something to sit on
113 .nav-tabs { 76 .nav-tabs {
114 border-bottom: 1px solid #ddd; 77 border-bottom: 1px solid @nav-tabs-border-color;
115 } 78 > li {
116 // Make the list-items overlay the bottom border 79 float: left;
117 .nav-tabs > li { 80 // Make the list-items overlay the bottom border
118 margin-bottom: -1px; 81 margin-bottom: -1px;
119 } 82
120 // Actual tabs (as links) 83 // Actual tabs (as links)
121 .nav-tabs > li > a { 84 > a {
122 padding-top: 8px; 85 margin-right: 2px;
123 padding-bottom: 8px; 86 line-height: @line-height-base;
124 line-height: @baseLineHeight; 87 border: 1px solid transparent;
125 border: 1px solid transparent; 88 border-radius: @border-radius-base @border-radius-base 0 0;
126 .border-radius(4px 4px 0 0); 89 &:hover {
127 &:hover, 90 border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
128 &:focus { 91 }
129 border-color: @grayLighter @grayLighter #ddd; 92 }
130 } 93
131 } 94 // Active state, and it's :hover to override normal :hover
132 // Active state, and it's :hover/:focus to override normal :hover/:focus 95 &.active > a {
133 .nav-tabs > .active > a, 96 &,
134 .nav-tabs > .active > a:hover, 97 &:hover,
135 .nav-tabs > .active > a:focus { 98 &:focus {
136 color: @gray; 99 color: @nav-tabs-active-link-hover-color;
137 background-color: @bodyBackground; 100 background-color: @nav-tabs-active-link-hover-bg;
138 border: 1px solid #ddd; 101 border: 1px solid @nav-tabs-active-link-hover-border-color;
139 border-bottom-color: transparent; 102 border-bottom-color: transparent;
140 cursor: default; 103 cursor: default;
141 } 104 }
142 105 }
143 106 }
144 // PILLS 107 // pulling this in mainly for less shorthand
145 // ----- 108 &.nav-justified {
146 109 .nav-justified();
147 // Links rendered as pills 110 .nav-tabs-justified();
148 .nav-pills > li > a { 111 }
149 padding-top: 8px; 112 }
150 padding-bottom: 8px; 113
151 margin-top: 2px; 114
152 margin-bottom: 2px; 115 // Pills
153 .border-radius(5px); 116 // -------------------------
154 } 117 .nav-pills {
155 118 > li {
156 // Active state 119 float: left;
157 .nav-pills > .active > a, 120
158 .nav-pills > .active > a:hover, 121 // Links rendered as pills
159 .nav-pills > .active > a:focus { 122 > a {
160 color: @white; 123 border-radius: @nav-pills-border-radius;
161 background-color: @linkColor; 124 }
162 } 125 + li {
163 126 margin-left: 2px;
164 127 }
165 128
166 // STACKED NAV 129 // Active state
167 // ----------- 130 &.active > a {
168 131 &,
169 // Stacked tabs and pills 132 &:hover,
170 .nav-stacked > li { 133 &:focus {
171 float: none; 134 color: @nav-pills-active-link-hover-color;
172 } 135 background-color: @nav-pills-active-link-hover-bg;
173 .nav-stacked > li > a { 136 }
174 margin-right: 0; // no need for the gap between nav items 137 }
175 } 138 }
176 139 }
177 // Tabs 140
178 .nav-tabs.nav-stacked { 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 {
179 border-bottom: 0; 191 border-bottom: 0;
180 } 192
181 .nav-tabs.nav-stacked > li > a { 193 > li > a {
182 border: 1px solid #ddd; 194 // Override margin from .nav-tabs
183 .border-radius(0); 195 margin-right: 0;
184 } 196 border-radius: @border-radius-base;
185 .nav-tabs.nav-stacked > li:first-child > a { 197 }
186 .border-top-radius(4px); 198
187 } 199 > .active > a,
188 .nav-tabs.nav-stacked > li:last-child > a { 200 > .active > a:hover,
189 .border-bottom-radius(4px); 201 > .active > a:focus {
190 } 202 border: 1px solid @nav-tabs-justified-link-border-color;
191 .nav-tabs.nav-stacked > li > a:hover, 203 }
192 .nav-tabs.nav-stacked > li > a:focus { 204
193 border-color: #ddd; 205 @media (min-width: @screen-sm-min) {
194 z-index: 2; 206 > li > a {
195 } 207 border-bottom: 1px solid @nav-tabs-justified-link-border-color;
196 208 border-radius: @border-radius-base @border-radius-base 0 0;
197 // Pills 209 }
198 .nav-pills.nav-stacked > li > a { 210 > .active > a,
199 margin-bottom: 3px; 211 > .active > a:hover,
200 } 212 > .active > a:focus {
201 .nav-pills.nav-stacked > li:last-child > a { 213 border-bottom-color: @nav-tabs-justified-active-link-border-color;
202 margin-bottom: 1px; // decrease margin to match sizing of stacked tabs 214 }
203 } 215 }
204 216 }
205 217
206 218
207 // DROPDOWNS 219 // Tabbable tabs
208 // --------- 220 // -------------------------
209 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
210 .nav-tabs .dropdown-menu { 237 .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 238 // make dropdown border overlap tab border
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; 239 margin-top: -1px;
321 margin-bottom: 0; 240 // Remove the top rounded corners here since there is a hard edge above the menu
322 } 241 .border-top-radius(0);
323 .tabs-below > .nav-tabs > li > a { 242 }
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 }