`)
2 | .dropup,
3 | .dropright,
4 | .dropdown,
5 | .dropleft {
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 | top: 100%;
20 | left: 0;
21 | z-index: $zindex-dropdown;
22 | display: none; // none by default, but block on "open" of the menu
23 | float: left;
24 | min-width: $dropdown-min-width;
25 | padding: $dropdown-padding-y 0;
26 | margin: $dropdown-spacer 0 0; // override default ul
27 | @include font-size($dropdown-font-size);
28 | color: $dropdown-color;
29 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
30 | list-style: none;
31 | background-color: $dropdown-bg;
32 | background-clip: padding-box;
33 | border: $dropdown-border-width solid $dropdown-border-color;
34 | @include border-radius($dropdown-border-radius);
35 | @include box-shadow($dropdown-box-shadow);
36 | }
37 |
38 | @each $breakpoint in map-keys($grid-breakpoints) {
39 | @include media-breakpoint-up($breakpoint) {
40 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
41 |
42 | .dropdown-menu#{$infix}-left {
43 | right: auto;
44 | left: 0;
45 | }
46 |
47 | .dropdown-menu#{$infix}-right {
48 | right: 0;
49 | left: auto;
50 | }
51 | }
52 | }
53 |
54 | // Allow for dropdowns to go bottom up (aka, dropup-menu)
55 | // Just add .dropup after the standard .dropdown class and you're set.
56 | .dropup {
57 | .dropdown-menu {
58 | top: auto;
59 | bottom: 100%;
60 | margin-top: 0;
61 | margin-bottom: $dropdown-spacer;
62 | }
63 |
64 | .dropdown-toggle {
65 | @include caret(up);
66 | }
67 | }
68 |
69 | .dropright {
70 | .dropdown-menu {
71 | top: 0;
72 | right: auto;
73 | left: 100%;
74 | margin-top: 0;
75 | margin-left: $dropdown-spacer;
76 | }
77 |
78 | .dropdown-toggle {
79 | @include caret(right);
80 | &::after {
81 | vertical-align: 0;
82 | }
83 | }
84 | }
85 |
86 | .dropleft {
87 | .dropdown-menu {
88 | top: 0;
89 | right: 100%;
90 | left: auto;
91 | margin-top: 0;
92 | margin-right: $dropdown-spacer;
93 | }
94 |
95 | .dropdown-toggle {
96 | @include caret(left);
97 | &::before {
98 | vertical-align: 0;
99 | }
100 | }
101 | }
102 |
103 | // When enabled Popper.js, reset basic dropdown position
104 | // stylelint-disable-next-line no-duplicate-selectors
105 | .dropdown-menu {
106 | &[x-placement^="top"],
107 | &[x-placement^="right"],
108 | &[x-placement^="bottom"],
109 | &[x-placement^="left"] {
110 | right: auto;
111 | bottom: auto;
112 | }
113 | }
114 |
115 | // Dividers (basically an `
`) within the dropdown
116 | .dropdown-divider {
117 | @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y);
118 | }
119 |
120 | // Links, buttons, and more within the dropdown menu
121 | //
122 | // `