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