// NAVBAR (FIXED AND STATIC) // ------------------------- // COMMON STYLES // ------------- .navbar { overflow: visible; } // gradient is applied to it's own element because overflow visible is not honored by IE when filter is present .navbar-inner { background-color: @navbarBackground; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); .box-shadow(@shadow); } // Brand, links, text, and buttons .navbar { // Hover and active states .brand:hover { color: @white; text-decoration: none; } // Website or project name .brand { float: left; display: block; padding: 8px 20px 12px; margin-left: -20px; // negative indent to left-align the text down the page font-size: 20px; font-weight: 200; line-height: 1; color: @white; } // Plain text in topbar .navbar-text { margin-bottom: 0; line-height: 40px; color: @navbarText; a:hover { color: @white; background-color: transparent; } } // Buttons in navbar .btn, .btn-group { margin-top: 5px; // make buttons vertically centered in navbar } .btn-group .btn { margin-top: 0; } } // Navbar forms .navbar-form { margin-bottom: 0; // remove default bottom margin input, select { display: inline-block; margin-bottom: 0; } } // Navbar search .navbar-search { position: relative; float: left; margin-top: 6px; margin-bottom: 0; .search-query { padding: 4px 9px; #font > .sans-serif(13px, normal, 1); color: @white; color: rgba(255,255,255,.75); background: #444; background: rgba(255,255,255,.3); border: 1px solid #111; @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); .box-shadow(@shadow); .transition(none); // Placeholder text gets special styles; can't be bundled together though for some reason .placeholder(@grayLighter); // Hover states &:hover { color: @white; background-color: @grayLight; background-color: rgba(255,255,255,.5); } // Focus states (we use .focused since IE8 and down doesn't support :focus) &:focus, &.focused { padding: 5px 10px; color: @grayDark; text-shadow: 0 1px 0 @white; background-color: @white; border: 0; .box-shadow(0 0 3px rgba(0,0,0,.15)); outline: 0; } } } // STATIC OR FIXED? // ---------------- // Static navbar .navbar-static { margin-bottom: @baseLineHeight; } .navbar-static .navbar-inner { padding-left: 20px; padding-right: 20px; .border-radius(4px); } // Fixed navbar .navbar-fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: @zindexFixedNavbar; } // NAVIGATION // ---------- .navbar .nav { position: relative; left: 0; display: block; float: left; margin: 0 10px 0 0; } .navbar .nav.pull-right { float: right; // redeclare due to specificity } .navbar .nav > li { display: block; float: left; } // Links .navbar .nav > li > a { float: none; padding: 10px 10px 11px; line-height: 19px; color: @navbarLinkColor; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } // Hover .navbar .nav > li > a:hover { background-color: transparent; color: @navbarLinkColorHover; text-decoration: none; } // Active nav items .navbar .nav .active > a { color: @navbarLinkColorHover; text-decoration: none; background-color: @navbarBackground; background-color: rgba(0,0,0,.5); } // Dividers (basically a vertical hr) .navbar .vertical-divider { height: @navbarHeight; width: 1px; margin: 0 5px; overflow: hidden; background-color: @navbarBackground; border-right: 1px solid @navbarBackgroundHighlight; } // Secondary (floated right) nav in topbar .navbar .nav.pull-right { margin-left: 10px; margin-right: 0; } // Dropdown menus // -------------- // Menu position and menu carets .navbar .dropdown-menu { margin-top: 1px; .border-radius(4px); &:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-bottom-color: rgba(0,0,0,.2); position: absolute; top: -7px; left: 9px; } &:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid @white; position: absolute; top: -6px; left: 10px; } } // Dropdown toggle caret .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret { border-top-color: @white; } .navbar .nav .active .caret { .opacity(100); } // Remove background color from open dropdown .navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle { background-color: transparent; } // Dropdown link on hover .navbar .nav .active > .dropdown-toggle:hover { color: @white; } // Right aligned menus need alt position .navbar .nav.pull-right .dropdown-menu { right: 0; &:before { left: auto; right: 12px; } &:after { left: auto; right: 13px; } }