0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/lib/dropdowns.less
Jacob Thornton f7b5e0f6b5 Merge pull request #1046 from kevva/dropdown-menus
Scalable dropdown menus
2012-01-22 20:41:52 -08:00

104 lines
2.2 KiB
Plaintext

// DROPDOWN MENUS
// --------------
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropdown {
position: relative;
}
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid @black;
.opacity(30);
content: "\2193";
}
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
*margin-top: 7px;
}
.dropdown:hover .caret,
.open.dropdown .caret {
.opacity(100);
}
// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
top: 100%;
z-index: @zindexDropdown;
float: left;
display: none; // none by default, but block on "open" of the menu
min-width: 160px;
max-width: 220px;
_width: 160px;
padding: 4px 0;
margin: 0; // override default ul
list-style: none;
background-color: @white;
border-color: #ccc;
border-color: rgba(0,0,0,.2);
border-style: solid;
border-width: 1px;
.border-radius(0 0 5px 5px);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
zoom: 1; // do we need this?
*border-right-width: 2px;
*border-bottom-width: 2px;
// Dividers (basically an hr) within the dropdown
.divider {
height: 1px;
margin: 5px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid @white;
}
// Links within the dropdown menu
a {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: @gray;
white-space: nowrap;
}
}
// Hover state
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: @white;
text-decoration: none;
background-color: @linkColor;
}
// Open state for the dropdown
.dropdown.open {
.dropdown-toggle {
color: @white;
background: #ccc;
background: rgba(0,0,0,.3);
}
.dropdown-menu {
display: block;
}
}
// Typeahead
.typeahead {
margin-top: 2px; // give it some space to breathe
.border-radius(4px);
}