3 // --------------------------------------------------
6 // Dropdown arrow/caret
12 vertical-align: middle;
13 border-top: @caret-width-base solid;
14 border-right: @caret-width-base solid transparent;
15 border-left: @caret-width-base solid transparent;
18 // The dropdown wrapper (div)
23 // Prevent the focus on the dropdown toggle when closing dropdowns
24 .dropdown-toggle:focus {
28 // The dropdown menu (ul)
33 z-index: @zindex-dropdown;
34 display: none; // none by default, but block on "open" of the menu
38 margin: 2px 0 0; // override default ul
40 font-size: @font-size-base;
41 background-color: @dropdown-bg;
42 border: 1px solid @dropdown-fallback-border; // IE8 fallback
43 border: 1px solid @dropdown-border;
44 border-radius: @border-radius-base;
45 .box-shadow(0 6px 12px rgba(0,0,0,.175));
46 background-clip: padding-box;
48 // Aligns the dropdown menu to right
50 // Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]`
56 // Dividers (basically an hr) within the dropdown
58 .nav-divider(@dropdown-divider-bg);
61 // Links within the dropdown menu
67 line-height: @line-height-base;
68 color: @dropdown-link-color;
69 white-space: nowrap; // prevent links from randomly breaking onto new lines
74 .dropdown-menu > li > a {
77 text-decoration: none;
78 color: @dropdown-link-hover-color;
79 background-color: @dropdown-link-hover-bg;
84 .dropdown-menu > .active > a {
88 color: @dropdown-link-active-color;
89 text-decoration: none;
91 background-color: @dropdown-link-active-bg;
97 // Gray out text and ensure the hover/focus state remains gray
99 .dropdown-menu > .disabled > a {
103 color: @dropdown-link-disabled-color;
106 // Nuke hover/focus effects
107 .dropdown-menu > .disabled > a {
110 text-decoration: none;
111 background-color: transparent;
112 background-image: none; // Remove CSS gradient
118 // Open state for the dropdown
125 // Remove the outline when :focus is triggered
133 // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
134 // menu with the parent.
135 .dropdown-menu-right {
136 left: auto; // Reset the default from `.dropdown-menu`
139 // With v3, we enabled auto-flipping if you have a dropdown within a right
140 // aligned nav component. To enable the undoing of that, we provide an override
141 // to restore the default dropdown menu alignment.
143 // This is only for left-aligning a dropdown menu within a `.navbar-right` or
144 // `.pull-right` nav component.
145 .dropdown-menu-left {
150 // Dropdown section headers
154 font-size: @font-size-small;
155 line-height: @line-height-base;
156 color: @dropdown-header-color;
159 // Backdrop to catch body clicks on mobile, etc.
166 z-index: (@zindex-dropdown - 10);
169 // Right aligned dropdowns
170 .pull-right > .dropdown-menu {
175 // Allow for dropdowns to go bottom up (aka, dropup-menu)
177 // Just add .dropup after the standard .dropdown class and you're set, bro.
178 // TODO: abstract this so that the navbar fixed styles are not placed here?
181 .navbar-fixed-bottom .dropdown {
185 border-bottom: @caret-width-base solid;
188 // Different positioning for bottom up menu
197 // Component alignment
199 // Reiterate per navbar.less and the modified component alignment there.
201 @media (min-width: @grid-float-breakpoint) {
204 .dropdown-menu-right();
206 // Necessary for overrides of the default right aligned menu.
207 // Will remove come v4 in all likelihood.
208 .dropdown-menu-left {
209 .dropdown-menu-left();