From 42a9720adf75f3bc9e2c0d96f416dcc6706a81c7 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 28 Feb 2026 17:15:59 +0100 Subject: Update dialog --- src/objects/_dialog.scss | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) (limited to 'src/objects/_dialog.scss') 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: ''; + } + } } } -- cgit v1.2.3-70-g09d2