`)
2 | .dropup,
3 | .dropright,
4 | .dropdown,
5 | .dropleft {
6 | position: relative;
7 | }
8 |
9 | .dropdown-toggle {
10 | // Generate the caret automatically
11 | @include caret;
12 | }
13 |
14 | // The dropdown menu
15 | .dropdown-menu {
16 | position: absolute;
17 | top: 100%;
18 | left: 0;
19 | z-index: $zindex-dropdown;
20 | display: none; // none by default, but block on "open" of the menu
21 | float: left;
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
26 | color: $body-color;
27 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
28 | list-style: none;
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);
34 | }
35 |
36 | .dropdown-menu-right {
37 | right: 0;
38 | left: auto;
39 | }
40 |
41 | // Allow for dropdowns to go bottom up (aka, dropup-menu)
42 | // Just add .dropup after the standard .dropdown class and you're set.
43 | .dropup {
44 | .dropdown-menu {
45 | top: auto;
46 | bottom: 100%;
47 | margin-top: 0;
48 | margin-bottom: $dropdown-spacer;
49 | }
50 |
51 | .dropdown-toggle {
52 | @include caret(up);
53 | }
54 | }
55 |
56 | .dropright {
57 | .dropdown-menu {
58 | top: 0;
59 | right: auto;
60 | left: 100%;
61 | margin-top: 0;
62 | margin-left: $dropdown-spacer;
63 | }
64 |
65 | .dropdown-toggle {
66 | @include caret(right);
67 | &::after {
68 | vertical-align: 0;
69 | }
70 | }
71 | }
72 |
73 | .dropleft {
74 | .dropdown-menu {
75 | top: 0;
76 | right: 100%;
77 | left: auto;
78 | margin-top: 0;
79 | margin-right: $dropdown-spacer;
80 | }
81 |
82 | .dropdown-toggle {
83 | @include caret(left);
84 | &::before {
85 | vertical-align: 0;
86 | }
87 | }
88 | }
89 |
90 | // When enabled Popper.js, reset basic dropdown position
91 | // stylelint-disable no-duplicate-selectors
92 | .dropdown-menu {
93 | &[x-placement^="top"],
94 | &[x-placement^="right"],
95 | &[x-placement^="bottom"],
96 | &[x-placement^="left"] {
97 | right: auto;
98 | bottom: auto;
99 | }
100 | }
101 | // stylelint-enable no-duplicate-selectors
102 |
103 | // Dividers (basically an `
`) within the dropdown
104 | .dropdown-divider {
105 | @include nav-divider($dropdown-divider-bg);
106 | }
107 |
108 | // Links, buttons, and more within the dropdown menu
109 | //
110 | // `
12 | 
13 | 
14 |
15 |