1// 2// Dropdown menus 3// -------------------------------------------------- 4 5 6// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns 7.dropup, 8.dropdown { 9 position: relative; 10} 11.dropdown-toggle { 12 // The caret makes the toggle a bit too tall in IE7 13 *margin-bottom: -3px; 14} 15.dropdown-toggle:active, 16.open .dropdown-toggle { 17 outline: 0; 18} 19 20// Dropdown arrow/caret 21// -------------------- 22.caret { 23 display: inline-block; 24 width: 0; 25 height: 0; 26 vertical-align: top; 27 border-top: 4px solid @black; 28 border-right: 4px solid transparent; 29 border-left: 4px solid transparent; 30 content: ""; 31} 32 33// Place the caret 34.dropdown .caret { 35 margin-top: 8px; 36 margin-left: 2px; 37} 38 39// The dropdown menu (ul) 40// ---------------------- 41.dropdown-menu { 42 position: absolute; 43 top: 100%; 44 left: 0; 45 z-index: @zindexDropdown; 46 display: none; // none by default, but block on "open" of the menu 47 float: left; 48 min-width: 160px; 49 padding: 5px 0; 50 margin: 2px 0 0; // override default ul 51 list-style: none; 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; 57 .border-radius(6px); 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; 62 63 // Aligns the dropdown menu to right 64 &.pull-right { 65 right: 0; 66 left: auto; 67 } 68 69 // Dividers (basically an hr) within the dropdown 70 .divider { 71 .nav-divider(@dropdownDividerTop, @dropdownDividerBottom); 72 } 73 74 // Links within the dropdown menu 75 > li > a { 76 display: block; 77 padding: 3px 20px; 78 clear: both; 79 font-weight: normal; 80 line-height: @baseLineHeight; 81 color: @dropdownLinkColor; 82 white-space: nowrap; 83 } 84} 85 86// Hover/Focus state 87// ----------- 88.dropdown-menu > li > a:hover, 89.dropdown-menu > li > a:focus, 90.dropdown-submenu:hover > a, 91.dropdown-submenu:focus > a { 92 text-decoration: none; 93 color: @dropdownLinkColorHover; 94 #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); 95} 96 97// Active state 98// ------------ 99.dropdown-menu > .active > a, 100.dropdown-menu > .active > a:hover, 101.dropdown-menu > .active > a:focus { 102 color: @dropdownLinkColorActive; 103 text-decoration: none; 104 outline: 0; 105 #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%)); 106} 107 108// Disabled state 109// -------------- 110// Gray out text and ensure the hover/focus state remains gray 111.dropdown-menu > .disabled > a, 112.dropdown-menu > .disabled > a:hover, 113.dropdown-menu > .disabled > a:focus { 114 color: @grayLight; 115} 116// Nuke hover/focus effects 117.dropdown-menu > .disabled > a:hover, 118.dropdown-menu > .disabled > a:focus { 119 text-decoration: none; 120 background-color: transparent; 121 background-image: none; // Remove CSS gradient 122 .reset-filter(); 123 cursor: default; 124} 125 126// Open state for the dropdown 127// --------------------------- 128.open { 129 // IE7's z-index only goes to the nearest positioned ancestor, which would 130 // make the menu appear below buttons that appeared later on the page 131 *z-index: @zindexDropdown; 132 133 & > .dropdown-menu { 134 display: block; 135 } 136} 137 138// Right aligned dropdowns 139// --------------------------- 140.pull-right > .dropdown-menu { 141 right: 0; 142 left: auto; 143} 144 145// Allow for dropdowns to go bottom up (aka, dropup-menu) 146// ------------------------------------------------------ 147// Just add .dropup after the standard .dropdown class and you're set, bro. 148// TODO: abstract this so that the navbar fixed styles are not placed here? 149.dropup, 150.navbar-fixed-bottom .dropdown { 151 // Reverse the caret 152 .caret { 153 border-top: 0; 154 border-bottom: 4px solid @black; 155 content: ""; 156 } 157 // Different positioning for bottom up menu 158 .dropdown-menu { 159 top: auto; 160 bottom: 100%; 161 margin-bottom: 1px; 162 } 163} 164 165// Sub menus 166// --------------------------- 167.dropdown-submenu { 168 position: relative; 169} 170// Default dropdowns 171.dropdown-submenu > .dropdown-menu { 172 top: 0; 173 left: 100%; 174 margin-top: -6px; 175 margin-left: -1px; 176 .border-radius(0 6px 6px 6px); 177} 178.dropdown-submenu:hover > .dropdown-menu { 179 display: block; 180} 181 182// Dropups 183.dropup .dropdown-submenu > .dropdown-menu { 184 top: auto; 185 bottom: 0; 186 margin-top: 0; 187 margin-bottom: -2px; 188 .border-radius(5px 5px 5px 0); 189} 190 191// Caret to indicate there is a submenu 192.dropdown-submenu > a:after { 193 display: block; 194 content: " "; 195 float: right; 196 width: 0; 197 height: 0; 198 border-color: transparent; 199 border-style: solid; 200 border-width: 5px 0 5px 5px; 201 border-left-color: darken(@dropdownBackground, 20%); 202 margin-top: 5px; 203 margin-right: -10px; 204} 205.dropdown-submenu:hover > a:after { 206 border-left-color: @dropdownLinkColorHover; 207} 208 209// Left aligned submenus 210.dropdown-submenu.pull-left { 211 // Undo the float 212 // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. 213 float: none; 214 215 // Positioning the submenu 216 > .dropdown-menu { 217 left: -100%; 218 margin-left: 10px; 219 .border-radius(6px 0 6px 6px); 220 } 221} 222 223// Tweak nav headers 224// ----------------- 225// Increase padding from 15px to 20px on sides 226.dropdown .dropdown-menu .nav-header { 227 padding-left: 20px; 228 padding-right: 20px; 229} 230 231// Typeahead 232// --------- 233.typeahead { 234 z-index: 1051; 235 margin-top: 2px; // give it some space to breathe 236 .border-radius(@baseBorderRadius); 237} 238