| // NAVBAR (FIXED AND STATIC) |
| // ------------------------- |
| |
| |
| // COMMON STYLES |
| // ------------- |
| |
| .navbar { |
| overflow: visible; |
| margin-bottom: @baseLineHeight; |
| } |
| |
| // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present |
| .navbar-inner { |
| padding-left: 20px; |
| padding-right: 20px; |
| #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); |
| .border-radius(4px); |
| @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); |
| .box-shadow(@shadow); |
| } |
| |
| // Navbar button for toggling navbar items in responsive layouts |
| .btn-navbar { |
| display: none; |
| float: right; |
| padding: 7px 10px; |
| margin-left: 5px; |
| margin-right: 5px; |
| .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); |
| @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); |
| .box-shadow(@shadow); |
| } |
| .btn-navbar .icon-bar { |
| display: block; |
| width: 18px; |
| height: 2px; |
| background-color: #f5f5f5; |
| .border-radius(1px); |
| .box-shadow(0 1px 0 rgba(0,0,0,.25)); |
| } |
| .btn-navbar .icon-bar + .icon-bar { |
| margin-top: 3px; |
| } |
| // Override the default collapsed state |
| .nav-collapse.collapse { |
| height: auto; |
| } |
| |
| |
| // Brand, links, text, and buttons |
| .navbar { |
| // Hover and active states |
| .brand:hover { |
| 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; // then undo the margin here so we don't accidentally double it |
| } |
| } |
| |
| // Navbar forms |
| .navbar-form { |
| margin-bottom: 0; // remove default bottom margin |
| .clearfix(); |
| input, |
| select { |
| display: inline-block; |
| margin-top: 5px; |
| margin-bottom: 0; |
| } |
| .radio, |
| .checkbox { |
| margin-top: 5px; |
| } |
| input[type="image"], |
| input[type="checkbox"], |
| input[type="radio"] { |
| margin-top: 3px; |
| } |
| .input-append, |
| .input-prepend { |
| margin-top: 6px; |
| white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left |
| input { |
| margin-top: 0; // remove the margin on top since it's on the parent |
| } |
| } |
| } |
| |
| // 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: #666; |
| 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 IE7-8 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; |
| } |
| } |
| } |
| |
| |
| // FIXED NAVBAR |
| // ------------ |
| |
| .navbar-fixed-top { |
| position: fixed; |
| top: 0; |
| right: 0; |
| left: 0; |
| z-index: @zindexFixedNavbar; |
| } |
| .navbar-fixed-top .navbar-inner { |
| padding-left: 0; |
| padding-right: 0; |
| .border-radius(0); |
| } |
| |
| |
| // 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: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active |
| color: @navbarLinkColorHover; |
| text-decoration: none; |
| } |
| |
| // Active nav items |
| .navbar .nav .active > a, |
| .navbar .nav .active > a:hover { |
| color: @navbarLinkColorHover; |
| text-decoration: none; |
| background-color: @navbarBackground; |
| } |
| |
| // Dividers (basically a vertical hr) |
| .navbar .divider-vertical { |
| height: @navbarHeight; |
| width: 1px; |
| margin: 0 9px; |
| 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 { |
| left: auto; |
| right: 0; |
| &:before { |
| left: auto; |
| right: 12px; |
| } |
| &:after { |
| left: auto; |
| right: 13px; |
| } |
| } |