3 // --------------------------------------------------
6 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
12 // The caret makes the toggle a bit too tall in IE7
15 .dropdown-toggle:active,
16 .open .dropdown-toggle {
20 // Dropdown arrow/caret
21 // --------------------
23 display: inline-block;
27 border-top: 4px solid @black;
28 border-right: 4px solid transparent;
29 border-left: 4px solid transparent;
39 // The dropdown menu (ul)
40 // ----------------------
45 z-index: @zindexDropdown;
46 display: none; // none by default, but block on "open" of the menu
50 margin: 2px 0 0; // override default ul
52 background-color: @dropdownBackground;
53 border: 1px solid #ccc; // Fallback for IE7-8
54 border: 1px solid @dropdownBorder;
55 *border-right-width: 2px;
56 *border-bottom-width: 2px;
58 .box-shadow(0 5px 10px rgba(0,0,0,.2));
59 -webkit-background-clip: padding-box;
60 -moz-background-clip: padding;
61 background-clip: padding-box;
63 // Aligns the dropdown menu to right
69 // Dividers (basically an hr) within the dropdown
71 .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
74 // Links within the dropdown menu
80 line-height: @baseLineHeight;
81 color: @dropdownLinkColor;
88 .dropdown-menu li > a:hover,
89 .dropdown-menu li > a:focus,
90 .dropdown-submenu:hover > a {
91 text-decoration: none;
92 color: @dropdownLinkColorHover;
93 background-color: @dropdownLinkBackgroundHover;
94 #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
99 .dropdown-menu .active > a,
100 .dropdown-menu .active > a:hover {
101 color: @dropdownLinkColorHover;
102 text-decoration: none;
104 background-color: @dropdownLinkBackgroundActive;
105 #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
110 // Gray out text and ensure the hover state remains gray
111 .dropdown-menu .disabled > a,
112 .dropdown-menu .disabled > a:hover {
115 // Nuke hover effects
116 .dropdown-menu .disabled > a:hover {
117 text-decoration: none;
118 background-color: transparent;
122 // Open state for the dropdown
123 // ---------------------------
125 // IE7's z-index only goes to the nearest positioned ancestor, which would
126 // make the menu appear below buttons that appeared later on the page
127 *z-index: @zindexDropdown;
134 // Right aligned dropdowns
135 // ---------------------------
136 .pull-right > .dropdown-menu {
141 // Allow for dropdowns to go bottom up (aka, dropup-menu)
142 // ------------------------------------------------------
143 // Just add .dropup after the standard .dropdown class and you're set, bro.
144 // TODO: abstract this so that the navbar fixed styles are not placed here?
146 .navbar-fixed-bottom .dropdown {
150 border-bottom: 4px solid @black;
153 // Different positioning for bottom up menu
162 // ---------------------------
166 .dropdown-submenu > .dropdown-menu {
171 -webkit-border-radius: 0 6px 6px 6px;
172 -moz-border-radius: 0 6px 6px 6px;
173 border-radius: 0 6px 6px 6px;
175 .dropdown-submenu:hover > .dropdown-menu {
179 .dropdown-submenu > a:after {
185 border-color: transparent;
187 border-width: 5px 0 5px 5px;
188 border-left-color: darken(@dropdownBackground, 20%);
192 .dropdown-submenu:hover > a:after {
193 border-left-color: @dropdownLinkColorHover;
199 // Increase padding from 15px to 20px on sides
200 .dropdown .dropdown-menu .nav-header {
208 margin-top: 2px; // give it some space to breathe