UNPKG

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