// DROPDOWN MENUS
// --------------
// Use the .menu class on any
element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropup,
.dropdown {
position: relative;
}
button.dropdown-toggle:active,
.btn-group.open button.btn.dropdown-toggle {
outline: 0;
background-color: #383838;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-color: #383838;
}
// Dropdown arrow/caret
// --------------------
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4pt solid @zenburnFgLight;
border-right: 4pt solid transparent;
border-left: 4pt solid transparent;
content: "";
}
.btn-group:hover .caret {border-top: 4pt solid @zenburnFgDark;}
// Place the caret
.dropdown .caret {
margin-top: 8pt;
margin-left: 2pt;
}
// The dropdown menu (ul)
// ----------------------
.btn-group > .btn.dropdown-toggle {
transition: color 0.1s;
border: 1pt solid @green;
}
.btn-group > button.btn.dropdown-toggle {
z-index: @zindexDropdown + 10;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: @zindexDropdown;
transition: transform 0.15s, width 0.15s;
transform: scaleY(0);
transform-origin: top;
margin: 0; // override default ul
margin-top: -1pt;
float: left;
width: 100%;
padding: 4pt 0;
list-style: none;
background-color: @dropdownBackground;
border: 1pt solid @green;
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: 3pt 15pt;
clear: both;
font-weight: normal;
line-height: @baseLineHeight;
color: @dropdownLinkColor;
white-space: nowrap;
}
.dropdown-header {
display: block;
padding: 3pt 15pt;
font-size: 11pt;
font-weight: bold;
line-height: @baseLineHeight;
color: @zenburnFgLight;
text-transform: uppercase;
}
.search {
background-color: rgba(63,63,63, 0.8);
margin: 3%;
max-width: 94%;
}
}
// 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 {
.dropdown-menu {
transform: scaleY(1);
backface-visibility: hidden;
width: calc(100% + 52pt);
}
}
// Right aligned dropdowns
// ---------------------------
.pull-right .dropdown-menu {
right: 0;
left: auto;
}