source: Application/ocrent/wwwroot/lib/bootstrap/scss/_dropdown.scss@ f5f7c24

Last change on this file since f5f7c24 was f5f7c24, checked in by 192011 <mk.snicker@…>, 15 months ago

Initial commit

  • Property mode set to 100644
File size: 7.8 KB
Line 
1// The dropdown wrapper (`<div>`)
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 // Generate the caret automatically
15 @include caret();
16}
17
18// The dropdown menu
19.dropdown-menu {
20 // scss-docs-start dropdown-css-vars
21 --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
22 --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
23 --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
24 --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
25 --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
26 @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
27 --#{$prefix}dropdown-color: #{$dropdown-color};
28 --#{$prefix}dropdown-bg: #{$dropdown-bg};
29 --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
30 --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
31 --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
32 --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
33 --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
34 --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
35 --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
36 --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
37 --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
38 --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
39 --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
40 --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
41 --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
42 --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
43 --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
44 --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
45 --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
46 --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
47 // scss-docs-end dropdown-css-vars
48
49 position: absolute;
50 z-index: var(--#{$prefix}dropdown-zindex);
51 display: none; // none by default, but block on "open" of the menu
52 min-width: var(--#{$prefix}dropdown-min-width);
53 padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
54 margin: 0; // Override default margin of ul
55 @include font-size(var(--#{$prefix}dropdown-font-size));
56 color: var(--#{$prefix}dropdown-color);
57 text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
58 list-style: none;
59 background-color: var(--#{$prefix}dropdown-bg);
60 background-clip: padding-box;
61 border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
62 @include border-radius(var(--#{$prefix}dropdown-border-radius));
63 @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
64
65 &[data-bs-popper] {
66 top: 100%;
67 left: 0;
68 margin-top: var(--#{$prefix}dropdown-spacer);
69 }
70
71 @if $dropdown-padding-y == 0 {
72 > .dropdown-item:first-child,
73 > li:first-child .dropdown-item {
74 @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
75 }
76 > .dropdown-item:last-child,
77 > li:last-child .dropdown-item {
78 @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
79 }
80
81 }
82}
83
84// scss-docs-start responsive-breakpoints
85// We deliberately hardcode the `bs-` prefix because we check
86// this custom property in JS to determine Popper's positioning
87
88@each $breakpoint in map-keys($grid-breakpoints) {
89 @include media-breakpoint-up($breakpoint) {
90 $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
91
92 .dropdown-menu#{$infix}-start {
93 --bs-position: start;
94
95 &[data-bs-popper] {
96 right: auto;
97 left: 0;
98 }
99 }
100
101 .dropdown-menu#{$infix}-end {
102 --bs-position: end;
103
104 &[data-bs-popper] {
105 right: 0;
106 left: auto;
107 }
108 }
109 }
110}
111// scss-docs-end responsive-breakpoints
112
113// Allow for dropdowns to go bottom up (aka, dropup-menu)
114// Just add .dropup after the standard .dropdown class and you're set.
115.dropup {
116 .dropdown-menu[data-bs-popper] {
117 top: auto;
118 bottom: 100%;
119 margin-top: 0;
120 margin-bottom: var(--#{$prefix}dropdown-spacer);
121 }
122
123 .dropdown-toggle {
124 @include caret(up);
125 }
126}
127
128.dropend {
129 .dropdown-menu[data-bs-popper] {
130 top: 0;
131 right: auto;
132 left: 100%;
133 margin-top: 0;
134 margin-left: var(--#{$prefix}dropdown-spacer);
135 }
136
137 .dropdown-toggle {
138 @include caret(end);
139 &::after {
140 vertical-align: 0;
141 }
142 }
143}
144
145.dropstart {
146 .dropdown-menu[data-bs-popper] {
147 top: 0;
148 right: 100%;
149 left: auto;
150 margin-top: 0;
151 margin-right: var(--#{$prefix}dropdown-spacer);
152 }
153
154 .dropdown-toggle {
155 @include caret(start);
156 &::before {
157 vertical-align: 0;
158 }
159 }
160}
161
162
163// Dividers (basically an `<hr>`) within the dropdown
164.dropdown-divider {
165 height: 0;
166 margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
167 overflow: hidden;
168 border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
169 opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
170}
171
172// Links, buttons, and more within the dropdown menu
173//
174// `<button>`-specific styles are denoted with `// For <button>s`
175.dropdown-item {
176 display: block;
177 width: 100%; // For `<button>`s
178 padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
179 clear: both;
180 font-weight: $font-weight-normal;
181 color: var(--#{$prefix}dropdown-link-color);
182 text-align: inherit; // For `<button>`s
183 text-decoration: if($link-decoration == none, null, none);
184 white-space: nowrap; // prevent links from randomly breaking onto new lines
185 background-color: transparent; // For `<button>`s
186 border: 0; // For `<button>`s
187
188 &:hover,
189 &:focus {
190 color: var(--#{$prefix}dropdown-link-hover-color);
191 text-decoration: if($link-hover-decoration == underline, none, null);
192 @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
193 }
194
195 &.active,
196 &:active {
197 color: var(--#{$prefix}dropdown-link-active-color);
198 text-decoration: none;
199 @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
200 }
201
202 &.disabled,
203 &:disabled {
204 color: var(--#{$prefix}dropdown-link-disabled-color);
205 pointer-events: none;
206 background-color: transparent;
207 // Remove CSS gradients if they're enabled
208 background-image: if($enable-gradients, none, null);
209 }
210}
211
212.dropdown-menu.show {
213 display: block;
214}
215
216// Dropdown section headers
217.dropdown-header {
218 display: block;
219 padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
220 margin-bottom: 0; // for use with heading elements
221 @include font-size($font-size-sm);
222 color: var(--#{$prefix}dropdown-header-color);
223 white-space: nowrap; // as with > li > a
224}
225
226// Dropdown text
227.dropdown-item-text {
228 display: block;
229 padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
230 color: var(--#{$prefix}dropdown-link-color);
231}
232
233// Dark dropdowns
234.dropdown-menu-dark {
235 // scss-docs-start dropdown-dark-css-vars
236 --#{$prefix}dropdown-color: #{$dropdown-dark-color};
237 --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
238 --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
239 --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
240 --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
241 --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
242 --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
243 --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
244 --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
245 --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
246 --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
247 --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
248 // scss-docs-end dropdown-dark-css-vars
249}
Note: See TracBrowser for help on using the repository browser.