// Dropdown arrow/caret
-// --------------------
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
- border-top: 4px solid @dropdown-caret-color;
- border-right: 4px solid transparent;
- border-left: 4px solid transparent;
- content: "";
+ border-top: @caret-width-base solid @dropdown-caret-color;
+ border-right: @caret-width-base solid transparent;
+ border-left: @caret-width-base solid transparent;
+ // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
+ // we can just straight up remove this.
+ border-bottom: 0 dotted;
+}
+
+// The dropdown wrapper (div)
+.dropdown {
+ position: relative;
+}
+
+// Prevent the focus on the dropdown toggle when closing dropdowns
+.dropdown-toggle:focus {
+ outline: 0;
}
// The dropdown menu (ul)
-// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
+ font-size: @font-size-base;
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
- .background-clip(padding-box);
+ background-clip: padding-box;
// Aligns the dropdown menu to right
&.pull-right {
}
// Hover/Focus state
-// -----------
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
- #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
+ background-color: @dropdown-link-hover-bg;
}
}
// Active state
-// ------------
.dropdown-menu > .active > a {
&,
&:hover,
color: @dropdown-link-active-color;
text-decoration: none;
outline: 0;
- #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
+ background-color: @dropdown-link-active-bg;
}
}
// 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
.caret {
- border-top: 0;
- border-bottom: 4px solid @dropdown-caret-color;
+ // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
+ // gets fixed, restore `border-top: 0;`.
+ border-top: 0 dotted;
+ border-bottom: @caret-width-base solid @dropdown-caret-color;
content: "";
}
// Different positioning for bottom up menu
margin-bottom: 1px;
}
}
+
+
+// Component alignment
+//
+// Reiterate per navbar.less and the modified component alignment there.
+
+@media (min-width: @grid-float-breakpoint) {
+ .navbar-right {
+ .dropdown-menu {
+ .pull-right > .dropdown-menu();
+ }
+ }
+}
+