1 // The dropdown wrapper (`<div>`)
14 // Generate the caret automatically
20 // scss-docs-start dropdown-css-vars
21 --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
22 --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
23 --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
24 --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
25 --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
26 @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
27 --#{$prefix}dropdown-color: #{$dropdown-color};
28 --#{$prefix}dropdown-bg: #{$dropdown-bg};
29 --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
30 --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
31 --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
32 --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
33 --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
34 --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
35 --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
36 --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
37 --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
38 --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
39 --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
40 --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
41 --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
42 --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
43 --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
44 --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
45 --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
46 --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
47 // scss-docs-end dropdown-css-vars
50 z-index: var(--#{$prefix}dropdown-zindex);
51 display: none; // none by default, but block on "open" of the menu
52 min-width: var(--#{$prefix}dropdown-min-width);
53 padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
54 margin: 0; // Override default margin of ul
55 @include font-size(var(--#{$prefix}dropdown-font-size));
56 color: var(--#{$prefix}dropdown-color);
57 text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
59 background-color: var(--#{$prefix}dropdown-bg);
60 background-clip: padding-box;
61 border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
62 @include border-radius(var(--#{$prefix}dropdown-border-radius));
63 @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
68 margin-top: var(--#{$prefix}dropdown-spacer);
71 @if $dropdown-padding-y == 0 {
72 > .dropdown-item:first-child,
73 > li:first-child .dropdown-item {
74 @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
76 > .dropdown-item:last-child,
77 > li:last-child .dropdown-item {
78 @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
84 // scss-docs-start responsive-breakpoints
85 // We deliberately hardcode the `bs-` prefix because we check
86 // this custom property in JS to determine Popper's positioning
88 @each $breakpoint in map-keys($grid-breakpoints) {
89 @include media-breakpoint-up($breakpoint) {
90 $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
92 .dropdown-menu#{$infix}-start {
101 .dropdown-menu#{$infix}-end {
111 // scss-docs-end responsive-breakpoints
113 // Allow for dropdowns to go bottom up (aka, dropup-menu)
114 // Just add .dropup after the standard .dropdown class and you're set.
116 .dropdown-menu[data-bs-popper] {
120 margin-bottom: var(--#{$prefix}dropdown-spacer);
129 .dropdown-menu[data-bs-popper] {
134 margin-left: var(--#{$prefix}dropdown-spacer);
146 .dropdown-menu[data-bs-popper] {
151 margin-right: var(--#{$prefix}dropdown-spacer);
155 @include caret(start);
163 // Dividers (basically an `<hr>`) within the dropdown
166 margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
168 border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
169 opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
172 // Links, buttons, and more within the dropdown menu
174 // `<button>`-specific styles are denoted with `// For <button>s`
177 width: 100%; // For `<button>`s
178 padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
180 font-weight: $font-weight-normal;
181 color: var(--#{$prefix}dropdown-link-color);
182 text-align: inherit; // For `<button>`s
183 text-decoration: if($link-decoration == none, null, none);
184 white-space: nowrap; // prevent links from randomly breaking onto new lines
185 background-color: transparent; // For `<button>`s
186 border: 0; // For `<button>`s
190 color: var(--#{$prefix}dropdown-link-hover-color);
191 text-decoration: if($link-hover-decoration == underline, none, null);
192 @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
197 color: var(--#{$prefix}dropdown-link-active-color);
198 text-decoration: none;
199 @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
204 color: var(--#{$prefix}dropdown-link-disabled-color);
205 pointer-events: none;
206 background-color: transparent;
207 // Remove CSS gradients if they're enabled
208 background-image: if($enable-gradients, none, null);
212 .dropdown-menu.show {
216 // Dropdown section headers
219 padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
220 margin-bottom: 0; // for use with heading elements
221 @include font-size($font-size-sm);
222 color: var(--#{$prefix}dropdown-header-color);
223 white-space: nowrap; // as with > li > a
227 .dropdown-item-text {
229 padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
230 color: var(--#{$prefix}dropdown-link-color);
234 .dropdown-menu-dark {
235 // scss-docs-start dropdown-dark-css-vars
236 --#{$prefix}dropdown-color: #{$dropdown-dark-color};
237 --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
238 --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
239 --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
240 --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
241 --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
242 --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
243 --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
244 --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
245 --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
246 --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
247 --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
248 // scss-docs-end dropdown-dark-css-vars