Mercurial > wikked

comparison static/bootstrap/less/navbar.less @ 88:a5a3d454eac9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated Bootstrap.
author Ludovic Chabant <ludovic@chabant.com>
date Fri, 05 Apr 2013 08:08:12 -0700
parents 130eccd396d8
children d29e2f337b00
comparison
equal deleted inserted replaced
87:c0cf67362fb1 88:a5a3d454eac9
54 margin-left: -20px; // negative indent to left-align the text down the page 54 margin-left: -20px; // negative indent to left-align the text down the page
55 font-size: 20px; 55 font-size: 20px;
56 font-weight: 200; 56 font-weight: 200;
57 color: @navbarBrandColor; 57 color: @navbarBrandColor;
58 text-shadow: 0 1px 0 @navbarBackgroundHighlight; 58 text-shadow: 0 1px 0 @navbarBackgroundHighlight;
59 &:hover { 59 &:hover,
60 &:focus {
60 text-decoration: none; 61 text-decoration: none;
61 } 62 }
62 } 63 }
63 64
64 // Plain text in topbar 65 // Plain text in topbar
71 72
72 // Janky solution for now to account for links outside the .nav 73 // Janky solution for now to account for links outside the .nav
73 // ------------------------- 74 // -------------------------
74 .navbar-link { 75 .navbar-link {
75 color: @navbarLinkColor; 76 color: @navbarLinkColor;
76 &:hover { 77 &:hover,
78 &:focus {
77 color: @navbarLinkColorHover; 79 color: @navbarLinkColorHover;
78 } 80 }
79 } 81 }
80 82
81 // Dividers in navbar 83 // Dividers in navbar
93 .navbar .btn-group { 95 .navbar .btn-group {
94 .navbarVerticalAlign(30px); // Vertically center in navbar 96 .navbarVerticalAlign(30px); // Vertically center in navbar
95 } 97 }
96 .navbar .btn-group .btn, 98 .navbar .btn-group .btn,
97 .navbar .input-prepend .btn, 99 .navbar .input-prepend .btn,
98 .navbar .input-append .btn { 100 .navbar .input-append .btn,
101 .navbar .input-prepend .btn-group,
102 .navbar .input-append .btn-group {
99 margin-top: 0; // then undo the margin here so we don't accidentally double it 103 margin-top: 0; // then undo the margin here so we don't accidentally double it
100 } 104 }
101 105
102 // Navbar forms 106 // Navbar forms
103 // ------------------------- 107 // -------------------------
243 text-decoration: none; 247 text-decoration: none;
244 text-shadow: 0 1px 0 @navbarBackgroundHighlight; 248 text-shadow: 0 1px 0 @navbarBackgroundHighlight;
245 } 249 }
246 .navbar .nav .dropdown-toggle .caret { 250 .navbar .nav .dropdown-toggle .caret {
247 margin-top: 8px; 251 margin-top: 8px;
248 252 }
249 } 253
250 254 // Hover/focus
251 // Hover
252 .navbar .nav > li > a:focus, 255 .navbar .nav > li > a:focus,
253 .navbar .nav > li > a:hover { 256 .navbar .nav > li > a:hover {
254 background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active 257 background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
255 color: @navbarLinkColorHover; 258 color: @navbarLinkColorHover;
256 text-decoration: none; 259 text-decoration: none;
257 } 260 }
258 261
259 // Active nav items 262 // Active nav items
333 bottom: -6px; 336 bottom: -6px;
334 top: auto; 337 top: auto;
335 } 338 }
336 } 339 }
337 340
338 // Caret should match text color on hover 341 // Caret should match text color on hover/focus
339 .navbar .nav li.dropdown > a:hover .caret { 342 .navbar .nav li.dropdown > a:hover .caret,
340 border-top-color: @navbarLinkColorActive; 343 .navbar .nav li.dropdown > a:focus .caret {
341 border-bottom-color: @navbarLinkColorActive; 344 border-top-color: @navbarLinkColorHover;
345 border-bottom-color: @navbarLinkColorHover;
342 } 346 }
343 347
344 // Remove background color from open dropdown 348 // Remove background color from open dropdown
345 .navbar .nav li.dropdown.open > .dropdown-toggle, 349 .navbar .nav li.dropdown.open > .dropdown-toggle,
346 .navbar .nav li.dropdown.active > .dropdown-toggle, 350 .navbar .nav li.dropdown.active > .dropdown-toggle,
394 398
395 .brand, 399 .brand,
396 .nav > li > a { 400 .nav > li > a {
397 color: @navbarInverseLinkColor; 401 color: @navbarInverseLinkColor;
398 text-shadow: 0 -1px 0 rgba(0,0,0,.25); 402 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
399 &:hover { 403 &:hover,
404 &:focus {
400 color: @navbarInverseLinkColorHover; 405 color: @navbarInverseLinkColorHover;
401 } 406 }
402 } 407 }
403 408
404 .brand { 409 .brand {
423 } 428 }
424 429
425 // Inline text links 430 // Inline text links
426 .navbar-link { 431 .navbar-link {
427 color: @navbarInverseLinkColor; 432 color: @navbarInverseLinkColor;
428 &:hover { 433 &:hover,
434 &:focus {
429 color: @navbarInverseLinkColorHover; 435 color: @navbarInverseLinkColorHover;
430 } 436 }
431 } 437 }
432 438
433 // Dividers in navbar 439 // Dividers in navbar
441 .nav li.dropdown.active > .dropdown-toggle, 447 .nav li.dropdown.active > .dropdown-toggle,
442 .nav li.dropdown.open.active > .dropdown-toggle { 448 .nav li.dropdown.open.active > .dropdown-toggle {
443 background-color: @navbarInverseLinkBackgroundActive; 449 background-color: @navbarInverseLinkBackgroundActive;
444 color: @navbarInverseLinkColorActive; 450 color: @navbarInverseLinkColorActive;
445 } 451 }
446 .nav li.dropdown > a:hover .caret { 452 .nav li.dropdown > a:hover .caret,
453 .nav li.dropdown > a:focus .caret {
447 border-top-color: @navbarInverseLinkColorActive; 454 border-top-color: @navbarInverseLinkColorActive;
448 border-bottom-color: @navbarInverseLinkColorActive; 455 border-bottom-color: @navbarInverseLinkColorActive;
449 } 456 }
450 .nav li.dropdown > .dropdown-toggle .caret { 457 .nav li.dropdown > .dropdown-toggle .caret {
451 border-top-color: @navbarInverseLinkColor; 458 border-top-color: @navbarInverseLinkColor;