// The dropdown wrapper (`
`)
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle {
// Generate the caret automatically
&::after {
display: inline-block;
width: 0;
height: 0;
margin-right: .25rem;
margin-left: .25rem;
vertical-align: middle;
content: "";
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-left: $caret-width solid transparent;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
&:focus {
outline: 0;
}
}
.dropup {
.dropdown-toggle {
&::after {
border-top: 0;
border-bottom: $caret-width solid;
}
}
}
// The dropdown menu
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
font-size: $font-size-base;
color: $body-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
background-color: $dropdown-bg;
background-clip: padding-box;
border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($border-radius);
@include box-shadow(0 6px 12px rgba(0,0,0,.175));
}
// Dividers (basically an `
`) within the dropdown
.dropdown-divider {
@include nav-divider($dropdown-divider-bg);
}
// Links, buttons, and more within the dropdown menu
//
// `