1// The dropdown wrapper (`<div>`)
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 `<hr>`) within the dropdown
116.dropdown-divider {
117  @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
118}
119
120// Links, buttons, and more within the dropdown menu
121//
122// `<button>`-specific styles are denoted with `// For <button>s`
123.dropdown-item {
124  display: block;
125  width: 100%; // For `<button>`s
126  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
127  clear: both;
128  font-weight: $font-weight-normal;
129  color: $dropdown-link-color;
130  text-align: inherit; // For `<button>`s
131  text-decoration: if($link-decoration == none, null, none);
132  white-space: nowrap; // prevent links from randomly breaking onto new lines
133  background-color: transparent; // For `<button>`s
134  border: 0; // For `<button>`s
135
136  // Prevent dropdown overflow if there's no padding
137  // See https://github.com/twbs/bootstrap/pull/27703
138  @if $dropdown-padding-y == 0 {
139    &:first-child {
140      @include border-top-radius($dropdown-inner-border-radius);
141    }
142
143    &:last-child {
144      @include border-bottom-radius($dropdown-inner-border-radius);
145    }
146  }
147
148  @include hover-focus() {
149    color: $dropdown-link-hover-color;
150    text-decoration: none;
151    @include gradient-bg($dropdown-link-hover-bg);
152  }
153
154  &.active,
155  &:active {
156    color: $dropdown-link-active-color;
157    text-decoration: none;
158    @include gradient-bg($dropdown-link-active-bg);
159  }
160
161  &.disabled,
162  &:disabled {
163    color: $dropdown-link-disabled-color;
164    pointer-events: none;
165    background-color: transparent;
166    // Remove CSS gradients if they're enabled
167    @if $enable-gradients {
168      background-image: none;
169    }
170  }
171}
172
173.dropdown-menu.show {
174  display: block;
175}
176
177// Dropdown section headers
178.dropdown-header {
179  display: block;
180  padding: $dropdown-header-padding;
181  margin-bottom: 0; // for use with heading elements
182  @include font-size($font-size-sm);
183  color: $dropdown-header-color;
184  white-space: nowrap; // as with > li > a
185}
186
187// Dropdown text
188.dropdown-item-text {
189  display: block;
190  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
191  color: $dropdown-link-color;
192}
193