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