Mercurial > wikked

comparison static/bootstrap/less/navbar.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 // Navbars (Redux)
3 // --------------------------------------------------
4
5
6 // COMMON STYLES
7 // -------------
8
9 // Base class and wrapper
10 .navbar {
11 overflow: visible;
12 margin-bottom: @baseLineHeight;
13
14 // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
15 *position: relative;
16 *z-index: 2;
17 }
18
19 // Inner for background effects
20 // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
21 .navbar-inner {
22 min-height: @navbarHeight;
23 padding-left: 20px;
24 padding-right: 20px;
25 #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
26 border: 1px solid @navbarBorder;
27 .border-radius(@baseBorderRadius);
28 .box-shadow(0 1px 4px rgba(0,0,0,.065));
29
30 // Prevent floats from breaking the navbar
31 .clearfix();
32 }
33
34 // Set width to auto for default container
35 // We then reset it for fixed navbars in the #gridSystem mixin
36 .navbar .container {
37 width: auto;
38 }
39
40 // Override the default collapsed state
41 .nav-collapse.collapse {
42 height: auto;
43 overflow: visible;
44 }
45
46
47 // Brand: website or project name
48 // -------------------------
49 .navbar .brand {
50 float: left;
51 display: block;
52 // Vertically center the text given @navbarHeight
53 padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
54 margin-left: -20px; // negative indent to left-align the text down the page
55 font-size: 20px;
56 font-weight: 200;
57 color: @navbarBrandColor;
58 text-shadow: 0 1px 0 @navbarBackgroundHighlight;
59 &:hover {
60 text-decoration: none;
61 }
62 }
63
64 // Plain text in topbar
65 // -------------------------
66 .navbar-text {
67 margin-bottom: 0;
68 line-height: @navbarHeight;
69 color: @navbarText;
70 }
71
72 // Janky solution for now to account for links outside the .nav
73 // -------------------------
74 .navbar-link {
75 color: @navbarLinkColor;
76 &:hover {
77 color: @navbarLinkColorHover;
78 }
79 }
80
81 // Dividers in navbar
82 // -------------------------
83 .navbar .divider-vertical {
84 height: @navbarHeight;
85 margin: 0 9px;
86 border-left: 1px solid @navbarBackground;
87 border-right: 1px solid @navbarBackgroundHighlight;
88 }
89
90 // Buttons in navbar
91 // -------------------------
92 .navbar .btn,
93 .navbar .btn-group {
94 .navbarVerticalAlign(30px); // Vertically center in navbar
95 }
96 .navbar .btn-group .btn,
97 .navbar .input-prepend .btn,
98 .navbar .input-append .btn {
99 margin-top: 0; // then undo the margin here so we don't accidentally double it
100 }
101
102 // Navbar forms
103 // -------------------------
104 .navbar-form {
105 margin-bottom: 0; // remove default bottom margin
106 .clearfix();
107 input,
108 select,
109 .radio,
110 .checkbox {
111 .navbarVerticalAlign(30px); // Vertically center in navbar
112 }
113 input,
114 select,
115 .btn {
116 display: inline-block;
117 margin-bottom: 0;
118 }
119 input[type="image"],
120 input[type="checkbox"],
121 input[type="radio"] {
122 margin-top: 3px;
123 }
124 .input-append,
125 .input-prepend {
126 margin-top: 5px;
127 white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
128 input {
129 margin-top: 0; // remove the margin on top since it's on the parent
130 }
131 }
132 }
133
134 // Navbar search
135 // -------------------------
136 .navbar-search {
137 position: relative;
138 float: left;
139 .navbarVerticalAlign(30px); // Vertically center in navbar
140 margin-bottom: 0;
141 .search-query {
142 margin-bottom: 0;
143 padding: 4px 14px;
144 #font > .sans-serif(13px, normal, 1);
145 .border-radius(15px); // redeclare because of specificity of the type attribute
146 }
147 }
148
149
150
151 // Static navbar
152 // -------------------------
153
154 .navbar-static-top {
155 position: static;
156 margin-bottom: 0; // remove 18px margin for default navbar
157 .navbar-inner {
158 .border-radius(0);
159 }
160 }
161
162
163
164 // Fixed navbar
165 // -------------------------
166
167 // Shared (top/bottom) styles
168 .navbar-fixed-top,
169 .navbar-fixed-bottom {
170 position: fixed;
171 right: 0;
172 left: 0;
173 z-index: @zindexFixedNavbar;
174 margin-bottom: 0; // remove 18px margin for default navbar
175 }
176 .navbar-fixed-top .navbar-inner,
177 .navbar-static-top .navbar-inner {
178 border-width: 0 0 1px;
179 }
180 .navbar-fixed-bottom .navbar-inner {
181 border-width: 1px 0 0;
182 }
183 .navbar-fixed-top .navbar-inner,
184 .navbar-fixed-bottom .navbar-inner {
185 padding-left: 0;
186 padding-right: 0;
187 .border-radius(0);
188 }
189
190 // Reset container width
191 // Required here as we reset the width earlier on and the grid mixins don't override early enough
192 .navbar-static-top .container,
193 .navbar-fixed-top .container,
194 .navbar-fixed-bottom .container {
195 #grid > .core > .span(@gridColumns);
196 }
197
198 // Fixed to top
199 .navbar-fixed-top {
200 top: 0;
201 }
202 .navbar-fixed-top,
203 .navbar-static-top {
204 .navbar-inner {
205 .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
206 }
207 }
208
209 // Fixed to bottom
210 .navbar-fixed-bottom {
211 bottom: 0;
212 .navbar-inner {
213 .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
214 }
215 }
216
217
218
219 // NAVIGATION
220 // ----------
221
222 .navbar .nav {
223 position: relative;
224 left: 0;
225 display: block;
226 float: left;
227 margin: 0 10px 0 0;
228 }
229 .navbar .nav.pull-right {
230 float: right; // redeclare due to specificity
231 margin-right: 0; // remove margin on float right nav
232 }
233 .navbar .nav > li {
234 float: left;
235 }
236
237 // Links
238 .navbar .nav > li > a {
239 float: none;
240 // Vertically center the text given @navbarHeight
241 padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
242 color: @navbarLinkColor;
243 text-decoration: none;
244 text-shadow: 0 1px 0 @navbarBackgroundHighlight;
245 }
246 .navbar .nav .dropdown-toggle .caret {
247 margin-top: 8px;
248
249 }
250
251 // Hover
252 .navbar .nav > li > a:focus,
253 .navbar .nav > li > a:hover {
254 background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
255 color: @navbarLinkColorHover;
256 text-decoration: none;
257 }
258
259 // Active nav items
260 .navbar .nav > .active > a,
261 .navbar .nav > .active > a:hover,
262 .navbar .nav > .active > a:focus {
263 color: @navbarLinkColorActive;
264 text-decoration: none;
265 background-color: @navbarLinkBackgroundActive;
266 .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
267 }
268
269 // Navbar button for toggling navbar items in responsive layouts
270 // These definitions need to come after '.navbar .btn'
271 .navbar .btn-navbar {
272 display: none;
273 float: right;
274 padding: 7px 10px;
275 margin-left: 5px;
276 margin-right: 5px;
277 .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
278 .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
279 }
280 .navbar .btn-navbar .icon-bar {
281 display: block;
282 width: 18px;
283 height: 2px;
284 background-color: #f5f5f5;
285 .border-radius(1px);
286 .box-shadow(0 1px 0 rgba(0,0,0,.25));
287 }
288 .btn-navbar .icon-bar + .icon-bar {
289 margin-top: 3px;
290 }
291
292
293
294 // Dropdown menus
295 // --------------
296
297 // Menu position and menu carets
298 .navbar .nav > li > .dropdown-menu {
299 &:before {
300 content: '';
301 display: inline-block;
302 border-left: 7px solid transparent;
303 border-right: 7px solid transparent;
304 border-bottom: 7px solid #ccc;
305 border-bottom-color: @dropdownBorder;
306 position: absolute;
307 top: -7px;
308 left: 9px;
309 }
310 &:after {
311 content: '';
312 display: inline-block;
313 border-left: 6px solid transparent;
314 border-right: 6px solid transparent;
315 border-bottom: 6px solid @dropdownBackground;
316 position: absolute;
317 top: -6px;
318 left: 10px;
319 }
320 }
321 // Menu position and menu caret support for dropups via extra dropup class
322 .navbar-fixed-bottom .nav > li > .dropdown-menu {
323 &:before {
324 border-top: 7px solid #ccc;
325 border-top-color: @dropdownBorder;
326 border-bottom: 0;
327 bottom: -7px;
328 top: auto;
329 }
330 &:after {
331 border-top: 6px solid @dropdownBackground;
332 border-bottom: 0;
333 bottom: -6px;
334 top: auto;
335 }
336 }
337
338 // Caret should match text color on hover
339 .navbar .nav li.dropdown > a:hover .caret {
340 border-top-color: @navbarLinkColorActive;
341 border-bottom-color: @navbarLinkColorActive;
342 }
343
344 // Remove background color from open dropdown
345 .navbar .nav li.dropdown.open > .dropdown-toggle,
346 .navbar .nav li.dropdown.active > .dropdown-toggle,
347 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
348 background-color: @navbarLinkBackgroundActive;
349 color: @navbarLinkColorActive;
350 }
351 .navbar .nav li.dropdown > .dropdown-toggle .caret {
352 border-top-color: @navbarLinkColor;
353 border-bottom-color: @navbarLinkColor;
354 }
355 .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
356 .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
357 .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
358 border-top-color: @navbarLinkColorActive;
359 border-bottom-color: @navbarLinkColorActive;
360 }
361
362 // Right aligned menus need alt position
363 .navbar .pull-right > li > .dropdown-menu,
364 .navbar .nav > li > .dropdown-menu.pull-right {
365 left: auto;
366 right: 0;
367 &:before {
368 left: auto;
369 right: 12px;
370 }
371 &:after {
372 left: auto;
373 right: 13px;
374 }
375 .dropdown-menu {
376 left: auto;
377 right: 100%;
378 margin-left: 0;
379 margin-right: -1px;
380 .border-radius(6px 0 6px 6px);
381 }
382 }
383
384
385 // Inverted navbar
386 // -------------------------
387
388 .navbar-inverse {
389
390 .navbar-inner {
391 #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
392 border-color: @navbarInverseBorder;
393 }
394
395 .brand,
396 .nav > li > a {
397 color: @navbarInverseLinkColor;
398 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
399 &:hover {
400 color: @navbarInverseLinkColorHover;
401 }
402 }
403
404 .brand {
405 color: @navbarInverseBrandColor;
406 }
407
408 .navbar-text {
409 color: @navbarInverseText;
410 }
411
412 .nav > li > a:focus,
413 .nav > li > a:hover {
414 background-color: @navbarInverseLinkBackgroundHover;
415 color: @navbarInverseLinkColorHover;
416 }
417
418 .nav .active > a,
419 .nav .active > a:hover,
420 .nav .active > a:focus {
421 color: @navbarInverseLinkColorActive;
422 background-color: @navbarInverseLinkBackgroundActive;
423 }
424
425 // Inline text links
426 .navbar-link {
427 color: @navbarInverseLinkColor;
428 &:hover {
429 color: @navbarInverseLinkColorHover;
430 }
431 }
432
433 // Dividers in navbar
434 .divider-vertical {
435 border-left-color: @navbarInverseBackground;
436 border-right-color: @navbarInverseBackgroundHighlight;
437 }
438
439 // Dropdowns
440 .nav li.dropdown.open > .dropdown-toggle,
441 .nav li.dropdown.active > .dropdown-toggle,
442 .nav li.dropdown.open.active > .dropdown-toggle {
443 background-color: @navbarInverseLinkBackgroundActive;
444 color: @navbarInverseLinkColorActive;
445 }
446 .nav li.dropdown > a:hover .caret {
447 border-top-color: @navbarInverseLinkColorActive;
448 border-bottom-color: @navbarInverseLinkColorActive;
449 }
450 .nav li.dropdown > .dropdown-toggle .caret {
451 border-top-color: @navbarInverseLinkColor;
452 border-bottom-color: @navbarInverseLinkColor;
453 }
454 .nav li.dropdown.open > .dropdown-toggle .caret,
455 .nav li.dropdown.active > .dropdown-toggle .caret,
456 .nav li.dropdown.open.active > .dropdown-toggle .caret {
457 border-top-color: @navbarInverseLinkColorActive;
458 border-bottom-color: @navbarInverseLinkColorActive;
459 }
460
461 // Navbar search
462 .navbar-search {
463 .search-query {
464 color: @white;
465 background-color: @navbarInverseSearchBackground;
466 border-color: @navbarInverseSearchBorder;
467 .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
468 .transition(none);
469 .placeholder(@navbarInverseSearchPlaceholderColor);
470
471 // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
472 &:focus,
473 &.focused {
474 padding: 5px 15px;
475 color: @grayDark;
476 text-shadow: 0 1px 0 @white;
477 background-color: @navbarInverseSearchBackgroundFocus;
478 border: 0;
479 .box-shadow(0 0 3px rgba(0,0,0,.15));
480 outline: 0;
481 }
482 }
483 }
484
485 // Navbar collapse button
486 .btn-navbar {
487 .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
488 }
489
490 }