// Dropdown arrow/caret
-// --------------------
.caret {
display: inline-block;
width: 0;
}
// The dropdown wrapper (div)
-// --------------------------
.dropdown {
position: relative;
}
// The dropdown menu (ul)
-// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
}
// Hover/Focus state
-// -----------
.dropdown-menu > li > a {
&:hover,
&:focus {
}
// Active state
-// ------------
.dropdown-menu > .active > a {
&,
&:hover,
}
// Disabled state
-// --------------
+//
// Gray out text and ensure the hover/focus state remains gray
+
.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
- color: @gray-light;
+ color: @dropdown-link-disabled-color;
}
}
// Nuke hover/focus effects
}
// Open state for the dropdown
-// ---------------------------
.open {
// Show the menu
> .dropdown-menu {
}
// Dropdown section headers
-// ---------------------------
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: @font-size-small;
line-height: @line-height-base;
- color: @gray-light;
+ color: @dropdown-header-color;
}
-
-
// Backdrop to catch body clicks on mobile, etc.
-// ---------------------------
.dropdown-backdrop {
position: fixed;
left: 0;
}
// Right aligned dropdowns
-// ---------------------------
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
-// ------------------------------------------------------
+//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
+
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
+@dropdown-link-disabled-color: @gray-light;
+
+@dropdown-header-color: @gray-light;
@dropdown-caret-color: #000;