mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
e145619f6d
IE6 does not seem to be supported by Bootstrap, and reducing the number of unused and invalid properties is always nice.
136 lines
3.1 KiB
Plaintext
136 lines
3.1 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-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;
|
|
text-indent: -99999px;
|
|
// IE7 won't do the border trick if there's a text indent, but it doesn't
|
|
// do the content that text-indent is hiding, either, so we're ok.
|
|
*text-indent: 0;
|
|
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;
|
|
}
|
|
.dropdown:hover .caret,
|
|
.open.dropdown .caret {
|
|
.opacity(100);
|
|
}
|
|
// The dropdown menu (ul)
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: @zindexDropdown;
|
|
float: left;
|
|
display: none; // none by default, but block on "open" of the menu
|
|
min-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;
|
|
*border-right-width: 2px;
|
|
*border-bottom-width: 2px;
|
|
|
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
|
&.bottom-up {
|
|
top: auto;
|
|
bottom: 100%;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
// Dividers (basically an hr) within the dropdown
|
|
.divider {
|
|
height: 1px;
|
|
margin: 5px 1px;
|
|
overflow: hidden;
|
|
background-color: #e5e5e5;
|
|
border-bottom: 1px solid @white;
|
|
|
|
// IE7 needs a set width since we gave a height. Restricting just
|
|
// to IE7 to keep the 1px left/right space in other browsers.
|
|
// It is unclear where IE is getting the extra space that we need
|
|
// to negative-margin away, but so it goes.
|
|
*width: 100%;
|
|
*margin: -5px 0 5px;
|
|
}
|
|
|
|
// Links within the dropdown menu
|
|
a {
|
|
display: block;
|
|
padding: 3px 15px;
|
|
clear: both;
|
|
font-weight: normal;
|
|
line-height: @baseLineHeight;
|
|
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 {
|
|
// 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-toggle {
|
|
color: @white;
|
|
background: #ccc;
|
|
background: rgba(0,0,0,.3);
|
|
}
|
|
.dropdown-menu {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// Right aligned dropdowns
|
|
.pull-right .dropdown-menu {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
// Typeahead
|
|
.typeahead {
|
|
margin-top: 2px; // give it some space to breathe
|
|
.border-radius(4px);
|
|
}
|