blob: f5584e6c2698a599c650b5aae646b49b4e5543fe (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
@use "sass:meta";
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "../props" as *;
@forward "dialog.vars";
@use "dialog.vars" as vars;
@use "backdrop.vars" as backdrop;
@use "divider.vars" as divider;
@mixin styles {
@include materialize-at-root(meta.module-variables("vars"));
@include bem.object("dialog") {
display: none;
box-sizing: border-box;
inline-size: 100%;
max-inline-size: none;
block-size: 100%;
min-block-size: 0;
max-block-size: none;
padding: props.get(vars.$pad-b) props.get(vars.$pad-i);
margin: 0;
background-color: transparent;
border: 0;
&::backdrop {
background-color: props.get(backdrop.$bg-color);
backdrop-filter: blur(props.get(backdrop.$blur));
}
&[open],
&:popover-open {
display: flex;
flex-direction: column;
}
@include bem.elem("content") {
pointer-events: auto;
border-radius: props.get(vars.$rounding);
background-color: props.get(vars.$bg-color);
}
@include bem.elem("header") {
display: flex;
align-items: center;
padding: props.get(vars.$body--pad-i) props.get(vars.$body--pad-i) 0;
}
@include bem.elem("divider") {
margin-inline: props.get(vars.$body--pad-i);
@include bem.next-elem("body") {
padding-block-start: calc(
0.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b)
);
}
}
@include bem.elem("body") {
padding: props.get(vars.$body--pad-b) props.get(vars.$body--pad-i);
&::before {
display: block;
margin-block: -100em 100em;
content: "";
}
}
}
}
|
