`)
2 | .dropup,
3 | .dropend,
4 | .dropdown,
5 | .dropstart {
6 | position: relative;
7 | }
8 |
9 | .dropdown-toggle {
10 | white-space: nowrap;
11 |
12 | // Generate the caret automatically
13 | @include caret();
14 | }
15 |
16 | // The dropdown menu
17 | .dropdown-menu {
18 | position: absolute;
19 | z-index: $zindex-dropdown;
20 | display: none; // none by default, but block on "open" of the menu
21 | min-width: $dropdown-min-width;
22 | padding: $dropdown-padding-y $dropdown-padding-x;
23 | margin: 0; // Override default margin of ul
24 | @include font-size($dropdown-font-size);
25 | color: $dropdown-color;
26 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
27 | list-style: none;
28 | background-color: $dropdown-bg;
29 | background-clip: padding-box;
30 | border: $dropdown-border-width solid $dropdown-border-color;
31 | @include border-radius($dropdown-border-radius);
32 | @include box-shadow($dropdown-box-shadow);
33 |
34 | &[data-bs-popper] {
35 | top: 100%;
36 | left: 0;
37 | margin-top: $dropdown-spacer;
38 | }
39 | }
40 |
41 | // scss-docs-start responsive-breakpoints
42 | // We deliberately hardcode the `bs-` prefix because we check
43 | // this custom property in JS to determine Popper's positioning
44 |
45 | @each $breakpoint in map-keys($grid-breakpoints) {
46 | @include media-breakpoint-up($breakpoint) {
47 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
48 |
49 | .dropdown-menu#{$infix}-start {
50 | --bs-position: start;
51 |
52 | &[data-bs-popper] {
53 | right: auto #{"/* rtl:ignore */"};
54 | left: 0 #{"/* rtl:ignore */"};
55 | }
56 | }
57 |
58 | .dropdown-menu#{$infix}-end {
59 | --bs-position: end;
60 |
61 | &[data-bs-popper] {
62 | right: 0 #{"/* rtl:ignore */"};
63 | left: auto #{"/* rtl:ignore */"};
64 | }
65 | }
66 | }
67 | }
68 | // scss-docs-end responsive-breakpoints
69 |
70 | // Allow for dropdowns to go bottom up (aka, dropup-menu)
71 | // Just add .dropup after the standard .dropdown class and you're set.
72 | .dropup {
73 | .dropdown-menu[data-bs-popper] {
74 | top: auto;
75 | bottom: 100%;
76 | margin-top: 0;
77 | margin-bottom: $dropdown-spacer;
78 | }
79 |
80 | .dropdown-toggle {
81 | @include caret(up);
82 | }
83 | }
84 |
85 | .dropend {
86 | .dropdown-menu[data-bs-popper] {
87 | top: 0;
88 | right: auto;
89 | left: 100%;
90 | margin-top: 0;
91 | margin-left: $dropdown-spacer;
92 | }
93 |
94 | .dropdown-toggle {
95 | @include caret(end);
96 | &::after {
97 | vertical-align: 0;
98 | }
99 | }
100 | }
101 |
102 | .dropstart {
103 | .dropdown-menu[data-bs-popper] {
104 | top: 0;
105 | right: 100%;
106 | left: auto;
107 | margin-top: 0;
108 | margin-right: $dropdown-spacer;
109 | }
110 |
111 | .dropdown-toggle {
112 | @include caret(start);
113 | &::before {
114 | vertical-align: 0;
115 | }
116 | }
117 | }
118 |
119 |
120 | // Dividers (basically an `
`) within the dropdown
121 | .dropdown-divider {
122 | height: 0;
123 | margin: $dropdown-divider-margin-y 0;
124 | overflow: hidden;
125 | border-top: 1px solid $dropdown-divider-bg;
126 | }
127 |
128 | // Links, buttons, and more within the dropdown menu
129 | //
130 | // `