UNPKG

14.6 kBCSSView Raw
1/**
2 * @license
3 * Copyright Google LLC All Rights Reserved.
4 *
5 * Use of this source code is governed by an MIT-style license that can be
6 * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
7 */
8.mdc-elevation-overlay {
9 position: absolute;
10 border-radius: inherit;
11 pointer-events: none;
12 opacity: 0;
13 /* @alternate */
14 opacity: var(--mdc-elevation-overlay-opacity, 0);
15 transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
16 background-color: #fff;
17 /* @alternate */
18 background-color: var(--mdc-elevation-overlay-color, #fff);
19}
20
21.mdc-dialog,
22.mdc-dialog__scrim {
23 position: fixed;
24 top: 0;
25 left: 0;
26 align-items: center;
27 justify-content: center;
28 box-sizing: border-box;
29 width: 100%;
30 height: 100%;
31}
32
33.mdc-dialog {
34 display: none;
35 z-index: 7;
36 /* @alternate */
37 z-index: var(--mdc-dialog-z-index, 7);
38}
39.mdc-dialog .mdc-dialog__surface {
40 background-color: #fff;
41 /* @alternate */
42 background-color: var(--mdc-theme-surface, #fff);
43}
44.mdc-dialog .mdc-dialog__scrim {
45 background-color: rgba(0, 0, 0, 0.32);
46}
47.mdc-dialog .mdc-dialog__surface-scrim {
48 background-color: rgba(0, 0, 0, 0.32);
49}
50.mdc-dialog .mdc-dialog__title {
51 color: rgba(0, 0, 0, 0.87);
52}
53.mdc-dialog .mdc-dialog__content {
54 color: rgba(0, 0, 0, 0.6);
55}
56.mdc-dialog .mdc-dialog__close {
57 color: #000;
58 /* @alternate */
59 color: var(--mdc-theme-on-surface, #000);
60}
61.mdc-dialog .mdc-dialog__close::before, .mdc-dialog .mdc-dialog__close::after {
62 background-color: #000;
63 /* @alternate */
64 background-color: var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000));
65}
66.mdc-dialog .mdc-dialog__close:hover::before, .mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover::before {
67 opacity: 0.04;
68 /* @alternate */
69 opacity: var(--mdc-ripple-hover-opacity, 0.04);
70}
71.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused::before, .mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus::before {
72 transition-duration: 75ms;
73 opacity: 0.12;
74 /* @alternate */
75 opacity: var(--mdc-ripple-focus-opacity, 0.12);
76}
77.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded)::after {
78 transition: opacity 150ms linear;
79}
80.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active::after {
81 transition-duration: 75ms;
82 opacity: 0.12;
83 /* @alternate */
84 opacity: var(--mdc-ripple-press-opacity, 0.12);
85}
86.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded {
87 --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
88}
89.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title, .mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions, .mdc-dialog.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer .mdc-dialog__actions {
90 border-color: rgba(0, 0, 0, 0.12);
91}
92.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title {
93 border-bottom: 1px solid rgba(0, 0, 0, 0.12);
94 margin-bottom: 0;
95}
96.mdc-dialog.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header {
97 /* @alternate */
98 box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
99}
100.mdc-dialog .mdc-dialog__content {
101 padding: 20px 24px 20px 24px;
102}
103.mdc-dialog .mdc-dialog__surface {
104 min-width: 280px;
105}
106@media (max-width: 592px) {
107 .mdc-dialog .mdc-dialog__surface {
108 max-width: calc(100vw - 32px);
109 }
110}
111@media (min-width: 592px) {
112 .mdc-dialog .mdc-dialog__surface {
113 max-width: 560px;
114 }
115}
116.mdc-dialog .mdc-dialog__surface {
117 max-height: calc(100% - 32px);
118}
119@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
120 .mdc-dialog .mdc-dialog__container {
121 /* stylelint-disable */
122 /* stylelint-enable*/
123 }
124}
125.mdc-dialog .mdc-dialog__surface {
126 border-radius: 4px;
127 /* @alternate */
128 border-radius: var(--mdc-shape-medium, 4px);
129}
130@media (max-width: 960px) and (max-height: 1440px) {
131 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
132 max-height: 560px;
133 max-width: 560px;
134 }
135 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
136 right: -12px;
137 }
138}
139@media (max-width: 720px) and (max-height: 1023px) and (max-width: 672px) {
140 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
141 max-width: calc(100vw - 112px);
142 }
143}
144@media (max-width: 720px) and (max-height: 1023px) and (min-width: 672px) {
145 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
146 max-width: 560px;
147 }
148}
149@media (max-width: 720px) and (max-height: 1023px) and (max-height: 720px) {
150 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
151 max-height: calc(100vh - 160px);
152 }
153}
154@media (max-width: 720px) and (max-height: 1023px) and (min-height: 720px) {
155 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
156 max-height: 560px;
157 }
158}
159@media (max-width: 720px) and (max-height: 1023px) {
160 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
161 right: -12px;
162 }
163}
164@media (max-width: 720px) and (max-height: 400px) {
165 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
166 max-width: 100vw;
167 width: 100vw;
168 max-height: 100vh;
169 height: 100vh;
170 border-radius: 0;
171 }
172 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
173 order: -1;
174 left: -12px;
175 }
176 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header {
177 padding: 0 16px 9px;
178 justify-content: flex-start;
179 }
180 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title {
181 margin-left: calc(16px - 2 * 12px);
182 }
183}
184@media (max-width: 600px) and (max-height: 960px) {
185 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
186 max-width: 100vw;
187 width: 100vw;
188 max-height: 100vh;
189 height: 100vh;
190 border-radius: 0;
191 }
192 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
193 order: -1;
194 left: -12px;
195 }
196 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header {
197 padding: 0 16px 9px;
198 justify-content: flex-start;
199 }
200 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title {
201 margin-left: calc(16px - 2 * 12px);
202 }
203}
204@media (min-width: 960px) and (min-height: 1440px) {
205 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
206 max-width: calc(100vw - 400px);
207 }
208 .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
209 right: -12px;
210 }
211}
212.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim {
213 opacity: 0;
214}
215
216.mdc-dialog__scrim {
217 opacity: 0;
218 z-index: -1;
219}
220
221.mdc-dialog__container {
222 display: flex;
223 flex-direction: row;
224 align-items: center;
225 justify-content: space-around;
226 box-sizing: border-box;
227 height: 100%;
228 -webkit-transform: scale(0.8);
229 transform: scale(0.8);
230 opacity: 0;
231 pointer-events: none;
232}
233
234.mdc-dialog__surface {
235 /* @alternate */
236 position: relative;
237 /* @alternate */
238 box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
239 display: flex;
240 flex-direction: column;
241 flex-grow: 0;
242 flex-shrink: 0;
243 box-sizing: border-box;
244 max-width: 100%;
245 max-height: 100%;
246 pointer-events: auto;
247 overflow-y: auto;
248}
249.mdc-dialog__surface .mdc-elevation-overlay {
250 width: 100%;
251 height: 100%;
252 top: 0;
253 /* @noflip */
254 left: 0;
255}
256[dir=rtl] .mdc-dialog__surface, .mdc-dialog__surface[dir=rtl] {
257 /* @noflip */
258 text-align: right;
259}
260@media screen and (-ms-high-contrast: active) {
261 .mdc-dialog__surface {
262 outline: 2px solid windowText;
263 }
264}
265.mdc-dialog__surface::before {
266 position: absolute;
267 box-sizing: border-box;
268 width: 100%;
269 height: 100%;
270 top: 0;
271 left: 0;
272 border: 2px solid transparent;
273 border-radius: inherit;
274 content: "";
275 pointer-events: none;
276}
277@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
278 .mdc-dialog__surface::before {
279 content: none;
280 }
281}
282
283.mdc-dialog__title {
284 display: block;
285 margin-top: 0;
286 /* @alternate */
287 line-height: normal;
288 -moz-osx-font-smoothing: grayscale;
289 -webkit-font-smoothing: antialiased;
290 font-family: Roboto, sans-serif;
291 /* @alternate */
292 font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
293 font-size: 1.25rem;
294 /* @alternate */
295 font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
296 line-height: 2rem;
297 /* @alternate */
298 line-height: var(--mdc-typography-headline6-line-height, 2rem);
299 font-weight: 500;
300 /* @alternate */
301 font-weight: var(--mdc-typography-headline6-font-weight, 500);
302 letter-spacing: 0.0125em;
303 /* @alternate */
304 letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
305 text-decoration: inherit;
306 /* @alternate */
307 -webkit-text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
308 text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
309 text-transform: inherit;
310 /* @alternate */
311 text-transform: var(--mdc-typography-headline6-text-transform, inherit);
312 position: relative;
313 flex-shrink: 0;
314 box-sizing: border-box;
315 margin: 0 0 1px;
316 padding: 0 24px 9px;
317}
318.mdc-dialog__title::before {
319 display: inline-block;
320 width: 0;
321 height: 40px;
322 content: "";
323 vertical-align: 0;
324}
325[dir=rtl] .mdc-dialog__title, .mdc-dialog__title[dir=rtl] {
326 /* @noflip */
327 text-align: right;
328}
329
330.mdc-dialog--scrollable .mdc-dialog__title {
331 margin-bottom: 1px;
332 padding-bottom: 15px;
333}
334
335.mdc-dialog--fullscreen .mdc-dialog__header {
336 display: inline-flex;
337 padding: 0 24px 9px;
338 border-bottom: 1px solid transparent;
339 justify-content: space-between;
340 align-items: baseline;
341}
342.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close {
343 right: -12px;
344}
345.mdc-dialog--fullscreen .mdc-dialog__title {
346 margin-bottom: 0;
347 padding: 0;
348 border-bottom: 0;
349}
350.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title {
351 border-bottom: 0;
352 margin-bottom: 0;
353}
354.mdc-dialog--fullscreen .mdc-dialog__close {
355 top: 5px;
356}
357.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions {
358 border-top: 1px solid transparent;
359}
360
361.mdc-dialog__content {
362 -moz-osx-font-smoothing: grayscale;
363 -webkit-font-smoothing: antialiased;
364 font-family: Roboto, sans-serif;
365 /* @alternate */
366 font-family: var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
367 font-size: 1rem;
368 /* @alternate */
369 font-size: var(--mdc-typography-body1-font-size, 1rem);
370 line-height: 1.5rem;
371 /* @alternate */
372 line-height: var(--mdc-typography-body1-line-height, 1.5rem);
373 font-weight: 400;
374 /* @alternate */
375 font-weight: var(--mdc-typography-body1-font-weight, 400);
376 letter-spacing: 0.03125em;
377 /* @alternate */
378 letter-spacing: var(--mdc-typography-body1-letter-spacing, 0.03125em);
379 text-decoration: inherit;
380 /* @alternate */
381 -webkit-text-decoration: var(--mdc-typography-body1-text-decoration, inherit);
382 text-decoration: var(--mdc-typography-body1-text-decoration, inherit);
383 text-transform: inherit;
384 /* @alternate */
385 text-transform: var(--mdc-typography-body1-text-transform, inherit);
386 flex-grow: 1;
387 box-sizing: border-box;
388 margin: 0;
389 overflow: auto;
390 -webkit-overflow-scrolling: touch;
391}
392.mdc-dialog__content > :first-child {
393 margin-top: 0;
394}
395.mdc-dialog__content > :last-child {
396 margin-bottom: 0;
397}
398
399.mdc-dialog__title + .mdc-dialog__content,
400.mdc-dialog__header + .mdc-dialog__content {
401 padding-top: 0;
402}
403
404.mdc-dialog--scrollable .mdc-dialog__title + .mdc-dialog__content {
405 padding-top: 8px;
406 padding-bottom: 8px;
407}
408
409.mdc-dialog__content .mdc-deprecated-list:first-child:last-child {
410 padding: 6px 0 0;
411}
412
413.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child {
414 padding: 0;
415}
416
417.mdc-dialog__actions {
418 display: flex;
419 position: relative;
420 flex-shrink: 0;
421 flex-wrap: wrap;
422 align-items: center;
423 justify-content: flex-end;
424 box-sizing: border-box;
425 min-height: 52px;
426 margin: 0;
427 padding: 8px;
428 border-top: 1px solid transparent;
429}
430.mdc-dialog--stacked .mdc-dialog__actions {
431 flex-direction: column;
432 align-items: flex-end;
433}
434
435.mdc-dialog__button {
436 /* @noflip */
437 margin-left: 8px;
438 /* @noflip */
439 margin-right: 0;
440 max-width: 100%;
441 /* @noflip */
442 text-align: right;
443}
444[dir=rtl] .mdc-dialog__button, .mdc-dialog__button[dir=rtl] {
445 /* @noflip */
446 margin-left: 0;
447 /* @noflip */
448 margin-right: 8px;
449}
450.mdc-dialog__button:first-child {
451 /* @noflip */
452 margin-left: 0;
453 /* @noflip */
454 margin-right: 0;
455}
456[dir=rtl] .mdc-dialog__button:first-child, .mdc-dialog__button:first-child[dir=rtl] {
457 /* @noflip */
458 margin-left: 0;
459 /* @noflip */
460 margin-right: 0;
461}
462[dir=rtl] .mdc-dialog__button, .mdc-dialog__button[dir=rtl] {
463 /* @noflip */
464 text-align: left;
465}
466.mdc-dialog--stacked .mdc-dialog__button:not(:first-child) {
467 margin-top: 12px;
468}
469
470.mdc-dialog--open,
471.mdc-dialog--opening,
472.mdc-dialog--closing {
473 display: flex;
474}
475
476.mdc-dialog--opening .mdc-dialog__scrim {
477 transition: opacity 150ms linear;
478}
479.mdc-dialog--opening .mdc-dialog__container {
480 transition: opacity 75ms linear, -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
481 transition: opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
482 transition: opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
483}
484
485.mdc-dialog--closing .mdc-dialog__scrim,
486.mdc-dialog--closing .mdc-dialog__container {
487 transition: opacity 75ms linear;
488}
489.mdc-dialog--closing .mdc-dialog__container {
490 -webkit-transform: none;
491 transform: none;
492}
493
494.mdc-dialog--open .mdc-dialog__scrim {
495 opacity: 1;
496}
497.mdc-dialog--open .mdc-dialog__container {
498 -webkit-transform: none;
499 transform: none;
500 opacity: 1;
501}
502.mdc-dialog--open.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim {
503 opacity: 1;
504 z-index: 1;
505}
506.mdc-dialog--open.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim {
507 transition: opacity 75ms linear;
508}
509.mdc-dialog--open.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim {
510 transition: opacity 150ms linear;
511}
512
513.mdc-dialog__surface-scrim {
514 display: none;
515 opacity: 0;
516 position: absolute;
517 width: 100%;
518 height: 100%;
519}
520.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim, .mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim, .mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim {
521 display: block;
522}
523
524.mdc-dialog-scroll-lock {
525 overflow: hidden;
526}
527
528/*# sourceMappingURL=mdc.dialog.css.map*/
\No newline at end of file