Update dialog

1 files changed, 32 insertions, 0 deletions

diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 479bcc6..5a323bb 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -7,11 +7,13 @@
 @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;
@@ -28,10 +30,40 @@
                         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:       '';
+                        }
+                }
         }
 }