1 |
|
2 | .dropup,
|
3 | .dropend,
|
4 | .dropdown,
|
5 | .dropstart,
|
6 | .dropup-center,
|
7 | .dropdown-center {
|
8 | position: relative;
|
9 | }
|
10 |
|
11 | .dropdown-toggle {
|
12 | white-space: nowrap;
|
13 |
|
14 |
|
15 | @include caret();
|
16 | }
|
17 |
|
18 |
|
19 | .dropdown-menu {
|
20 |
|
21 | --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
|
22 | --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
|
23 | --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
|
24 | --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
|
25 | @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
|
26 | --#{$prefix}dropdown-color: #{$dropdown-color};
|
27 | --#{$prefix}dropdown-bg: #{$dropdown-bg};
|
28 | --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
|
29 | --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
|
30 | --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
|
31 | --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
|
32 | --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
|
33 | --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
|
34 | --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
|
35 | --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
|
36 | --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
|
37 | --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
|
38 | --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
|
39 | --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
|
40 | --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
|
41 | --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
|
42 | --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
|
43 | --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
|
44 | --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
|
45 | --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
|
46 |
|
47 |
|
48 | position: absolute;
|
49 | z-index: $zindex-dropdown;
|
50 | display: none;
|
51 | min-width: var(--#{$prefix}dropdown-min-width);
|
52 | padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
|
53 | margin: 0;
|
54 | @include font-size(var(--#{$prefix}dropdown-font-size));
|
55 | color: var(--#{$prefix}dropdown-color);
|
56 | text-align: left;
|
57 | list-style: none;
|
58 | background-color: var(--#{$prefix}dropdown-bg);
|
59 | background-clip: padding-box;
|
60 | border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
|
61 | @include border-radius(var(--#{$prefix}dropdown-border-radius));
|
62 | @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
|
63 |
|
64 | &[data-bs-popper] {
|
65 | top: 100%;
|
66 | left: 0;
|
67 | margin-top: var(--#{$prefix}dropdown-spacer);
|
68 | }
|
69 |
|
70 | @if $dropdown-padding-y == 0 {
|
71 | > .dropdown-item:first-child,
|
72 | > li:first-child .dropdown-item {
|
73 | @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
|
74 | }
|
75 | > .dropdown-item:last-child,
|
76 | > li:last-child .dropdown-item {
|
77 | @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
|
78 | }
|
79 |
|
80 | }
|
81 | }
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 | @each $breakpoint in map-keys($grid-breakpoints) {
|
88 | @include media-breakpoint-up($breakpoint) {
|
89 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
90 |
|
91 | .dropdown-menu#{$infix}-start {
|
92 | --bs-position: start;
|
93 |
|
94 | &[data-bs-popper] {
|
95 | right: auto;
|
96 | left: 0;
|
97 | }
|
98 | }
|
99 |
|
100 | .dropdown-menu#{$infix}-end {
|
101 | --bs-position: end;
|
102 |
|
103 | &[data-bs-popper] {
|
104 | right: 0;
|
105 | left: auto;
|
106 | }
|
107 | }
|
108 | }
|
109 | }
|
110 |
|
111 |
|
112 |
|
113 |
|
114 | .dropup {
|
115 | .dropdown-menu[data-bs-popper] {
|
116 | top: auto;
|
117 | bottom: 100%;
|
118 | margin-top: 0;
|
119 | margin-bottom: var(--#{$prefix}dropdown-spacer);
|
120 | }
|
121 |
|
122 | .dropdown-toggle {
|
123 | @include caret(up);
|
124 | }
|
125 | }
|
126 |
|
127 | .dropend {
|
128 | .dropdown-menu[data-bs-popper] {
|
129 | top: 0;
|
130 | right: auto;
|
131 | left: 100%;
|
132 | margin-top: 0;
|
133 | margin-left: var(--#{$prefix}dropdown-spacer);
|
134 | }
|
135 |
|
136 | .dropdown-toggle {
|
137 | @include caret(end);
|
138 | &::after {
|
139 | vertical-align: 0;
|
140 | }
|
141 | }
|
142 | }
|
143 |
|
144 | .dropstart {
|
145 | .dropdown-menu[data-bs-popper] {
|
146 | top: 0;
|
147 | right: 100%;
|
148 | left: auto;
|
149 | margin-top: 0;
|
150 | margin-right: var(--#{$prefix}dropdown-spacer);
|
151 | }
|
152 |
|
153 | .dropdown-toggle {
|
154 | @include caret(start);
|
155 | &::before {
|
156 | vertical-align: 0;
|
157 | }
|
158 | }
|
159 | }
|
160 |
|
161 |
|
162 |
|
163 | .dropdown-divider {
|
164 | height: 0;
|
165 | margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
|
166 | overflow: hidden;
|
167 | border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
|
168 | opacity: 1;
|
169 | }
|
170 |
|
171 |
|
172 |
|
173 |
|
174 | .dropdown-item {
|
175 | display: block;
|
176 | width: 100%;
|
177 | padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
|
178 | clear: both;
|
179 | font-weight: $font-weight-normal;
|
180 | color: var(--#{$prefix}dropdown-link-color);
|
181 | text-align: inherit;
|
182 | text-decoration: if($link-decoration == none, null, none);
|
183 | white-space: nowrap;
|
184 | background-color: transparent;
|
185 | border: 0;
|
186 |
|
187 | &:hover,
|
188 | &:focus {
|
189 | color: var(--#{$prefix}dropdown-link-hover-color);
|
190 | text-decoration: if($link-hover-decoration == underline, none, null);
|
191 | @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
|
192 | }
|
193 |
|
194 | &.active,
|
195 | &:active {
|
196 | color: var(--#{$prefix}dropdown-link-active-color);
|
197 | text-decoration: none;
|
198 | @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
|
199 | }
|
200 |
|
201 | &.disabled,
|
202 | &:disabled {
|
203 | color: var(--#{$prefix}dropdown-link-disabled-color);
|
204 | pointer-events: none;
|
205 | background-color: transparent;
|
206 |
|
207 | background-image: if($enable-gradients, none, null);
|
208 | }
|
209 | }
|
210 |
|
211 | .dropdown-menu.show {
|
212 | display: block;
|
213 | }
|
214 |
|
215 |
|
216 | .dropdown-header {
|
217 | display: block;
|
218 | padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
|
219 | margin-bottom: 0;
|
220 | @include font-size($font-size-sm);
|
221 | color: var(--#{$prefix}dropdown-header-color);
|
222 | white-space: nowrap;
|
223 | }
|
224 |
|
225 |
|
226 | .dropdown-item-text {
|
227 | display: block;
|
228 | padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
|
229 | color: var(--#{$prefix}dropdown-link-color);
|
230 | }
|
231 |
|
232 |
|
233 | .dropdown-menu-dark {
|
234 |
|
235 | --#{$prefix}dropdown-color: #{$dropdown-dark-color};
|
236 | --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
|
237 | --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
|
238 | --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
|
239 | --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
|
240 | --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
|
241 | --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
|
242 | --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
|
243 | --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
|
244 | --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
|
245 | --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
|
246 | --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
|
247 |
|
248 | }
|