src/objects/_dialog.scss


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

@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;

@mixin styles {
	@include materialize-at-root(meta.module-variables('vars'));

	@include bem.object('dialog') {
		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));
		}

		@include bem.elem('content') {
			pointer-events:   auto;
			border-radius:    props.get(vars.$rounding);
			background-color: props.get(vars.$bg-color);
		}
	}
}