1 files changed, 36 insertions, 47 deletions

diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 54e9c59..f6e8e63 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -1,18 +1,20 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
+@use 'header';
+
 @include iro.props-namespace('dialog') {
     @include iro.props-store((
         --dims: (
-            --pad-x:    fn.global-dim(--size --300),
-            --pad-y:    fn.global-dim(--size --300),
             --width-sm: iro.fn-px-to-rem(500px),
             --width-md: iro.fn-px-to-rem(800px),
             --width-lg: iro.fn-px-to-rem(1100px),
             --rounding: 3px,
-            --sidebar: (
-                --pad-x: fn.global-dim(--size --150),
-                --pad-y: fn.global-dim(--size --300),
+            --border:   1px,
+
+            --body: (
+                --pad-x: fn.global-dim(--size --200),
+                --pad-y: fn.global-dim(--size --200),
             )
         ),
     ), 'dims');
@@ -26,20 +28,18 @@
 
     @include iro.props-store((
         --colors: (
+            --border: rgba(#000, .05),
             --shadow: 0 .2em .5em rgba(#000, .2),
+
             --sidebar: (
-                --bg:     fn.global-color(--bg),
                 --border: fn.global-color(--obj),
-            )
+            ),
         ),
     ), 'colors');
 
     @include iro.props-store((
         --colors: (
-            --sidebar: (
-                --bg:     fn.global-color(--bg-hi2),
-                --border: fn.global-color(--bg-hi2),
-            ),
+            --border: rgba(#fff, .2),
         ),
     ), 'colors-dark');
 
@@ -48,9 +48,9 @@
         grid-template-rows:    auto 1fr auto;
         grid-template-columns: auto 1fr;
         grid-template-areas:
-            'sidebar header'
-            'sidebar body'
-            'sidebar footer';
+            'sidebar-header header'
+            'sidebar        body'
+            'sidebar        footer';
         position:              relative;
         box-sizing:            border-box;
         width:                 100%;
@@ -59,7 +59,7 @@
         overflow:              hidden;
         border-radius:         fn.dim(--rounding);
         background-color:      fn.global-color(--bg);
-        box-shadow:            fn.color(--shadow);
+        box-shadow:            0 0 0 1px fn.color(--border), fn.color(--shadow);
         color:                 fn.global-color(--fg);
 
         @include iro.bem-modifier('sm') {
@@ -70,52 +70,41 @@
             max-width: fn.dim(--width-lg);
         }
 
-        @include iro.bem-elem('sidebar') {
-            grid-area:        sidebar;
-            padding:          fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
-            border-right:     1px solid fn.color(--sidebar --border);
-            background-color: fn.color(--sidebar --bg);
+        @include iro.bem-elem('sidebar-header') {
+            grid-area:    sidebar-header;
+            border-right: 1px solid fn.color(--sidebar --border);
+
+            @include iro.bem-sibling-elem('header') {
+                grid-area: header;
+            }
         }
 
         @include iro.bem-elem('header') {
-            grid-area: header;
-            margin:    fn.dim(--pad-y) fn.dim(--pad-x) 0;
+            grid-area: sidebar-header / sidebar-header / header / header;
+        }
 
-            @include iro.bem-sibling-elem('body') {
-                &::before {
-                    display: none;
-                }
-            }
+        @include iro.bem-elem('close-btn') {
+            margin-left: auto;
         }
 
-        @include iro.bem-elem('body') {
-            grid-area:  body;
-            min-height: 0;
-            margin:     fn.dim(--pad-y) fn.dim(--pad-x);
+        @include iro.bem-elem('label') {
+            padding: 0 calc(fn.dim(--body --pad-x) - fn.foreign-dim(--header, --pad-x));
+        }
 
-            &::before {
-                content: '';
-                width:   fn.global-dim(--size --500);
-                height:  fn.global-dim(--size --500);
-                float:   right;
-            }
+        @include iro.bem-elem('sidebar') {
+            grid-area: sidebar;
         }
 
-        @include iro.bem-elem('close-btn') {
-            position:  absolute;
-            top:       fn.global-dim(--size --150);
-            right:     fn.global-dim(--size --150);
-            font-size: fn.global-dim(--font-size --150);
+        @include iro.bem-elem('body') {
+            grid-area:  body;
+            min-height: 0;
+            padding:    fn.dim(--body --pad-y) fn.dim(--body --pad-x);
         }
 
         @include iro.bem-elem('footer') {
             grid-area:       footer;
             justify-content: flex-end;
-            margin:          0 fn.dim(--pad-x) fn.dim(--pad-y);
-        }
-
-        @include iro.bem-elem('title') {
-            margin-top: 0;
+            padding:         fn.dim(--body --pad-y) fn.dim(--body --pad-x);
         }
     }
 }