// DROPDOWN MENUS // -------------- // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns .dropup, .dropdown { position: relative; } .dropdown-toggle { // The caret makes the toggle a bit too tall in IE7 *margin-bottom: -3px; } .dropdown-toggle:active, .open .dropdown-toggle { outline: 0; } // Dropdown arrow/caret // -------------------- .caret { display: inline-block; width: 0; height: 0; vertical-align: top; border-top: 4px solid @black; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; .opacity(30); } // Place the caret .dropdown .caret { margin-top: 8px; margin-left: 2px; } .dropdown:hover .caret, .open .caret { .opacity(100); } // The dropdown menu (ul) // ---------------------- .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: @zindexDropdown; display: none; // none by default, but block on "open" of the menu float: left; min-width: 160px; padding: 4px 0; margin: 1px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.2); *border-right-width: 2px; *border-bottom-width: 2px; .border-radius(5px); .box-shadow(0 5px 10px rgba(0,0,0,.2)); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; // Aligns the dropdown menu to right &.pull-right { right: 0; left: auto; } // Dividers (basically an hr) within the dropdown .divider { .nav-divider(); } // Links within the dropdown menu a { display: block; padding: 3px 15px; clear: both; font-weight: normal; line-height: @baseLineHeight; color: @dropdownLinkColor; white-space: nowrap; } .dropdown-header { display: block; padding: 3px 15px; font-size: 11px; font-weight: bold; line-height: @baseLineHeight; color: @grayLight; text-shadow: 0 1px 0 rgba(255,255,255,.5); text-transform: uppercase; } } // Hover state // ----------- .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: @dropdownLinkColorHover; text-decoration: none; background-color: @dropdownLinkBackgroundHover; } // Open state for the dropdown // --------------------------- .open { // IE7's z-index only goes to the nearest positioned ancestor, which would // make the menu appear below buttons that appeared later on the page *z-index: @zindexDropdown; .dropdown-menu { display: block; } } // Right aligned dropdowns // --------------------------- .pull-right .dropdown-menu { right: 0; left: auto; } // Allow for dropdowns to go bottom up (aka, dropup-menu) // ------------------------------------------------------ // Just add .dropup after the standard .dropdown class and you're set, bro. // TODO: abstract this so that the navbar fixed styles are not placed here? .dropup, .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { border-top: 0; border-bottom: 4px solid @black; content: "\2191"; } // Different positioning for bottom up menu .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px; } } // Typeahead // --------- .typeahead { margin-top: 2px; // give it some space to breathe .border-radius(4px); }