ASCII text
1
dialog::backdrop {
2
background: var(--color-modal-backdrop);
3
opacity: 0;
4
}
5
dialog[open]::backdrop {
7
opacity: 1;
8
}
9
dialog {
11
max-width: 100dvw;
12
min-width: 100dvw;
13
max-height: 100dvh;
14
min-height: 100dvh;
15
border: none;
16
padding: 0;
17
margin: 0;
18
position: fixed;
19
top: 0;
20
left: 0;
21
background: transparent;
22
border: none;
23
align-items: center;
24
justify-content: center;
25
}
26
dialog[open] {
28
display: flex;
29
}
30
dialog.sheet-left {
32
justify-content: flex-start;
33
align-items: stretch;
34
}
35
dialog.sheet-right {
37
justify-content: flex-end;
38
align-items: stretch;
39
}
40
dialog.sheet-top {
42
justify-content: stretch;
43
align-items: flex-start;
44
}
45
dialog.sheet-bottom {
47
justify-content: stretch;
48
align-items: flex-end;
49
}