blob: 5a323bba01dcb8162821beeb5ccbc3d79b1ddf48 (
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
|
@use 'sass:meta';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/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(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: '';
}
}
}
}
|
