| 1 |
efrain |
1 |
// .modal-open - body class for killing the scroll
|
|
|
2 |
// .modal - container to scroll within
|
|
|
3 |
// .modal-dialog - positioning shell for the actual modal
|
|
|
4 |
// .modal-content - actual modal w/ bg and corners and stuff
|
|
|
5 |
|
|
|
6 |
|
|
|
7 |
.modal-open {
|
|
|
8 |
// Kill the scroll on the body
|
|
|
9 |
overflow: hidden;
|
|
|
10 |
|
|
|
11 |
.modal {
|
|
|
12 |
overflow-x: hidden;
|
|
|
13 |
overflow-y: auto;
|
|
|
14 |
}
|
|
|
15 |
}
|
|
|
16 |
|
|
|
17 |
// Container that the modal scrolls within
|
|
|
18 |
.modal {
|
|
|
19 |
position: fixed;
|
|
|
20 |
top: 0;
|
|
|
21 |
left: 0;
|
|
|
22 |
z-index: $zindex-modal + 1;
|
|
|
23 |
display: none;
|
|
|
24 |
width: 100%;
|
|
|
25 |
height: 100%;
|
|
|
26 |
overflow: hidden;
|
|
|
27 |
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
|
|
28 |
// https://github.com/twbs/bootstrap/pull/10951.
|
|
|
29 |
outline: 0;
|
|
|
30 |
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
|
|
|
31 |
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
|
|
32 |
// See also https://github.com/twbs/bootstrap/issues/17695
|
|
|
33 |
}
|
|
|
34 |
|
|
|
35 |
// Shell div to position the modal with bottom padding
|
|
|
36 |
.modal-dialog {
|
|
|
37 |
position: relative;
|
|
|
38 |
width: auto;
|
|
|
39 |
margin: $modal-dialog-margin;
|
|
|
40 |
// allow clicks to pass through for custom click handling to close modal
|
|
|
41 |
pointer-events: none;
|
|
|
42 |
|
|
|
43 |
// When fading in the modal, animate it to slide down
|
|
|
44 |
.modal.fade & {
|
|
|
45 |
@include transition($modal-transition);
|
|
|
46 |
transform: $modal-fade-transform;
|
|
|
47 |
}
|
|
|
48 |
.modal.show & {
|
|
|
49 |
transform: $modal-show-transform;
|
|
|
50 |
}
|
|
|
51 |
|
|
|
52 |
// When trying to close, animate focus to scale
|
|
|
53 |
.modal.modal-static & {
|
|
|
54 |
transform: $modal-scale-transform;
|
|
|
55 |
}
|
|
|
56 |
|
|
|
57 |
&:focus {
|
|
|
58 |
outline: none;
|
|
|
59 |
}
|
|
|
60 |
}
|
|
|
61 |
|
|
|
62 |
.modal-dialog-scrollable {
|
|
|
63 |
display: flex; // IE10/11
|
|
|
64 |
max-height: subtract(100%, $modal-dialog-margin * 2);
|
|
|
65 |
|
|
|
66 |
.modal-content {
|
|
|
67 |
max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
|
|
|
68 |
overflow: hidden;
|
|
|
69 |
}
|
|
|
70 |
|
|
|
71 |
.modal-header,
|
|
|
72 |
.modal-footer {
|
|
|
73 |
flex-shrink: 0;
|
|
|
74 |
}
|
|
|
75 |
|
|
|
76 |
.modal-body {
|
|
|
77 |
overflow-x: hidden;
|
|
|
78 |
overflow-y: scroll;
|
|
|
79 |
|
|
|
80 |
@include thin-scrolls($scroll-bg-track);
|
|
|
81 |
|
|
|
82 |
.theme-dark & {
|
|
|
83 |
@include thin-scrolls($dm-drawer-scroll-bg-track);
|
|
|
84 |
}
|
|
|
85 |
}
|
|
|
86 |
}
|
|
|
87 |
|
|
|
88 |
.modal-dialog-centered {
|
|
|
89 |
display: flex;
|
|
|
90 |
align-items: center;
|
|
|
91 |
min-height: subtract(100%, $modal-dialog-margin * 2);
|
|
|
92 |
|
|
|
93 |
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
|
|
|
94 |
&::before {
|
|
|
95 |
display: block; // IE10
|
|
|
96 |
height: subtract(100vh, $modal-dialog-margin * 2);
|
|
|
97 |
height: min-content; // Reset height to 0 except on IE
|
|
|
98 |
content: "";
|
|
|
99 |
}
|
|
|
100 |
|
|
|
101 |
// Ensure `.modal-body` shows scrollbar (IE10/11)
|
|
|
102 |
&.modal-dialog-scrollable {
|
|
|
103 |
flex-direction: column;
|
|
|
104 |
justify-content: center;
|
|
|
105 |
height: 100%;
|
|
|
106 |
|
|
|
107 |
.modal-content {
|
|
|
108 |
max-height: none;
|
|
|
109 |
}
|
|
|
110 |
|
|
|
111 |
&::before {
|
|
|
112 |
content: none;
|
|
|
113 |
}
|
|
|
114 |
}
|
|
|
115 |
}
|
|
|
116 |
|
|
|
117 |
// Actual modal
|
|
|
118 |
.modal-content {
|
|
|
119 |
position: relative;
|
|
|
120 |
display: flex;
|
|
|
121 |
flex-direction: column;
|
|
|
122 |
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
|
|
|
123 |
// counteract the pointer-events: none; in the .modal-dialog
|
|
|
124 |
color: $modal-content-color;
|
|
|
125 |
pointer-events: auto;
|
|
|
126 |
background-color: $modal-content-bg;
|
|
|
127 |
background-clip: padding-box;
|
|
|
128 |
border: $modal-content-border-width solid $modal-content-border-color;
|
|
|
129 |
@include border-radius($modal-content-border-radius);
|
|
|
130 |
@include box-shadow($modal-content-box-shadow-xs);
|
|
|
131 |
// Remove focus outline from opened modal
|
|
|
132 |
outline: 0;
|
|
|
133 |
|
|
|
134 |
.theme-dark & {
|
|
|
135 |
color: $dm-modal-content-color;
|
|
|
136 |
background-color: $dm-modal-content-bg;
|
|
|
137 |
border-color: $dm-modal-content-border-color;
|
|
|
138 |
}
|
|
|
139 |
}
|
|
|
140 |
|
|
|
141 |
// Modal background
|
|
|
142 |
.modal-backdrop {
|
|
|
143 |
position: fixed;
|
|
|
144 |
top: 0;
|
|
|
145 |
left: 0;
|
|
|
146 |
width: 100vw;
|
|
|
147 |
height: 100vh;
|
|
|
148 |
z-index: 1249!important;
|
|
|
149 |
background-color: $modal-backdrop-bg;
|
|
|
150 |
|
|
|
151 |
// Fade for backdrop
|
|
|
152 |
&.fade { opacity: 0; }
|
|
|
153 |
&.show { opacity: $modal-backdrop-opacity; }
|
|
|
154 |
|
|
|
155 |
.theme-dark & {
|
|
|
156 |
border-color: $dm-modal-backdrop-bg;
|
|
|
157 |
}
|
|
|
158 |
}
|
|
|
159 |
|
|
|
160 |
// Modal header
|
|
|
161 |
// Top section of the modal w/ title and dismiss
|
|
|
162 |
.modal-header {
|
|
|
163 |
display: flex;
|
|
|
164 |
align-items: flex-start; // so the close btn always stays on the upper right corner
|
|
|
165 |
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
|
|
166 |
padding: $modal-header-padding;
|
|
|
167 |
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
|
|
168 |
@include border-top-radius($modal-content-inner-border-radius);
|
|
|
169 |
|
|
|
170 |
position: relative;
|
|
|
171 |
min-height: 48px; // If title is empty.
|
|
|
172 |
|
|
|
173 |
.theme-dark & {
|
|
|
174 |
border-color: $dm-modal-header-border-color;
|
|
|
175 |
}
|
|
|
176 |
}
|
|
|
177 |
|
|
|
178 |
// Title text within header
|
|
|
179 |
.modal-title {
|
|
|
180 |
max-width: 85%;
|
|
|
181 |
|
|
|
182 |
margin-bottom: 0;
|
|
|
183 |
font-family: $font-family-base;
|
|
|
184 |
font-size: $font-size-sm;
|
|
|
185 |
font-weight: $font-weight-bold;
|
|
|
186 |
color: $body-color;
|
|
|
187 |
line-height: $modal-title-line-height;
|
|
|
188 |
|
|
|
189 |
.theme-dark & {
|
|
|
190 |
color: $dm-body-color;
|
|
|
191 |
}
|
|
|
192 |
}
|
|
|
193 |
|
|
|
194 |
// Modal body
|
|
|
195 |
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
|
|
196 |
.modal-body {
|
|
|
197 |
position: relative;
|
|
|
198 |
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
|
|
199 |
// when there should be a fixed height on `.modal-dialog`.
|
|
|
200 |
flex: 1 1 auto;
|
|
|
201 |
padding: $modal-inner-padding;
|
|
|
202 |
}
|
|
|
203 |
|
|
|
204 |
// Footer (for actions)
|
|
|
205 |
.modal-footer {
|
|
|
206 |
display: flex;
|
|
|
207 |
flex-wrap: wrap;
|
|
|
208 |
align-items: center; // vertically center
|
|
|
209 |
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
|
|
210 |
padding: $modal-inner-padding - $modal-footer-margin-between * 0.5;
|
|
|
211 |
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
|
|
212 |
@include border-bottom-radius($modal-content-inner-border-radius);
|
|
|
213 |
|
|
|
214 |
// Place margin between footer elements
|
|
|
215 |
// This solution is far from ideal because of the universal selector usage,
|
|
|
216 |
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
|
|
|
217 |
> * {
|
|
|
218 |
margin: $modal-footer-margin-between * 0.5;
|
|
|
219 |
}
|
|
|
220 |
|
|
|
221 |
.theme-dark & {
|
|
|
222 |
border-color: $dm-modal-footer-border-color;
|
|
|
223 |
}
|
|
|
224 |
}
|
|
|
225 |
|
|
|
226 |
// Measure scrollbar width for padding body during modal show/hide
|
|
|
227 |
.modal-scrollbar-measure {
|
|
|
228 |
position: absolute;
|
|
|
229 |
top: -9999px;
|
|
|
230 |
width: 50px;
|
|
|
231 |
height: 50px;
|
|
|
232 |
overflow: scroll;
|
|
|
233 |
}
|
|
|
234 |
|
|
|
235 |
// Scale up the modal
|
|
|
236 |
@include media-breakpoint-up(sm) {
|
|
|
237 |
// Automatically set modal's width for larger viewports
|
|
|
238 |
.modal-dialog {
|
|
|
239 |
max-width: $modal-md;
|
|
|
240 |
margin: $modal-dialog-margin-y-sm-up auto;
|
|
|
241 |
}
|
|
|
242 |
|
|
|
243 |
.modal-dialog-scrollable {
|
|
|
244 |
max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
|
|
245 |
|
|
|
246 |
.modal-content {
|
|
|
247 |
max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
|
|
248 |
}
|
|
|
249 |
}
|
|
|
250 |
|
|
|
251 |
.modal-dialog-centered {
|
|
|
252 |
min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
|
|
253 |
|
|
|
254 |
&::before {
|
|
|
255 |
height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
|
|
256 |
height: min-content;
|
|
|
257 |
}
|
|
|
258 |
}
|
|
|
259 |
|
|
|
260 |
.modal-content {
|
|
|
261 |
@include box-shadow($modal-content-box-shadow-sm-up);
|
|
|
262 |
}
|
|
|
263 |
|
|
|
264 |
.modal-sm { max-width: $modal-sm; }
|
|
|
265 |
}
|
|
|
266 |
|
|
|
267 |
.modal-sm {
|
|
|
268 |
@include media-breakpoint-only(sm) {
|
|
|
269 |
max-width: 300px;
|
|
|
270 |
}
|
|
|
271 |
}
|
|
|
272 |
|
|
|
273 |
@include media-breakpoint-up(lg) {
|
|
|
274 |
.modal-lg,
|
|
|
275 |
.modal-xl {
|
|
|
276 |
max-width: $modal-lg;
|
|
|
277 |
}
|
|
|
278 |
}
|
|
|
279 |
|
|
|
280 |
@include media-breakpoint-up(xl) {
|
|
|
281 |
.modal-xl { max-width: $modal-xl; }
|
|
|
282 |
}
|