1 // The dropdown wrapper (`<div>`)
10 // Generate the caret automatically
19 z-index: $zindex-dropdown;
20 display: none; // none by default, but block on "open" of the menu
22 min-width: $dropdown-min-width;
23 padding: $dropdown-padding-y 0;
24 margin: $dropdown-spacer 0 0; // override default ul
25 font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
27 text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
29 background-color: $dropdown-bg;
30 background-clip: padding-box;
31 border: $dropdown-border-width solid $dropdown-border-color;
32 @include border-radius($dropdown-border-radius);
33 @include box-shadow($dropdown-box-shadow);
36 @each $breakpoint in map-keys($grid-breakpoints) {
37 @include media-breakpoint-up($breakpoint) {
38 $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
40 .dropdown-menu#{$infix}-right {
47 @each $breakpoint in map-keys($grid-breakpoints) {
48 @include media-breakpoint-up($breakpoint) {
49 $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
51 .dropdown-menu#{$infix}-left {
58 // Allow for dropdowns to go bottom up (aka, dropup-menu)
59 // Just add .dropup after the standard .dropdown class and you're set.
65 margin-bottom: $dropdown-spacer;
79 margin-left: $dropdown-spacer;
83 @include caret(right);
96 margin-right: $dropdown-spacer;
100 @include caret(left);
107 // When enabled Popper.js, reset basic dropdown position
108 // stylelint-disable-next-line no-duplicate-selectors
110 &[x-placement^="top"],
111 &[x-placement^="right"],
112 &[x-placement^="bottom"],
113 &[x-placement^="left"] {
119 // Dividers (basically an `<hr>`) within the dropdown
121 @include nav-divider($dropdown-divider-bg);
124 // Links, buttons, and more within the dropdown menu
126 // `<button>`-specific styles are denoted with `// For <button>s`
129 width: 100%; // For `<button>`s
130 padding: $dropdown-item-padding-y $dropdown-item-padding-x;
132 font-weight: $font-weight-normal;
133 color: $dropdown-link-color;
134 text-align: inherit; // For `<button>`s
135 white-space: nowrap; // prevent links from randomly breaking onto new lines
136 background-color: transparent; // For `<button>`s
137 border: 0; // For `<button>`s
140 @include border-top-radius($dropdown-inner-border-radius);
144 @include border-bottom-radius($dropdown-inner-border-radius);
147 @include hover-focus {
148 color: $dropdown-link-hover-color;
149 text-decoration: none;
150 @include gradient-bg($dropdown-link-hover-bg);
155 color: $dropdown-link-active-color;
156 text-decoration: none;
157 @include gradient-bg($dropdown-link-active-bg);
162 color: $dropdown-link-disabled-color;
163 pointer-events: none;
164 background-color: transparent;
165 // Remove CSS gradients if they're enabled
166 @if $enable-gradients {
167 background-image: none;
172 .dropdown-menu.show {
176 // Dropdown section headers
179 padding: $dropdown-padding-y $dropdown-item-padding-x;
180 margin-bottom: 0; // for use with heading elements
181 font-size: $font-size-sm;
182 color: $dropdown-header-color;
183 white-space: nowrap; // as with > li > a
187 .dropdown-item-text {
189 padding: $dropdown-item-padding-y $dropdown-item-padding-x;
190 color: $dropdown-link-color;