Improved dialog

1 files changed, 73 insertions, 42 deletions

diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index d5b6ed9..9c61e93 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -4,13 +4,15 @@
 @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,
-            --title-body-spacing: fn.global-dim(--size --200),
+            --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),
+            )
         ),
     ), 'dims');
 
@@ -24,24 +26,40 @@
     @include iro.props-store((
         --colors: (
             --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-hi),
+                --border: fn.global-color(--bg-hi),
+            ),
+        ),
+    ), 'colors-dark');
+
     @include iro.bem-object(iro.props-namespace()) {
-        display:             grid;
-        grid-template-rows:  auto auto 1fr auto;
-        grid-template-areas: 'header' 'rule' 'body' 'footer';
-        position:            relative;
-        box-sizing:          border-box;
-        width:               100%;
-        max-width:           fn.dim(--width-md);
-        margin:              0 auto;
-        padding:             fn.dim(--pad-y) fn.dim(--pad-x);
-        overflow:            hidden;
-        border-radius:       fn.dim(--rounding);
-        background-color:    fn.global-color(--bg);
-        box-shadow:          fn.color(--shadow);
-        color:               fn.global-color(--fg);
+        display:               grid;
+        grid-template-rows:    auto 1fr auto;
+        grid-template-columns: auto 1fr;
+        grid-template-areas:
+            'sidebar header'
+            'sidebar body'
+            'sidebar footer';
+        position:              relative;
+        box-sizing:            border-box;
+        width:                 100%;
+        max-width:             fn.dim(--width-md);
+        margin:                0 auto;
+        overflow:              hidden;
+        border-radius:         fn.dim(--rounding);
+        background-color:      fn.global-color(--bg);
+        box-shadow:            fn.color(--shadow);
+        color:                 fn.global-color(--fg);
 
         @include iro.bem-modifier('sm') {
             max-width: fn.dim(--width-sm);
@@ -51,39 +69,52 @@
             max-width: fn.dim(--width-lg);
         }
 
-        @include iro.bem-elem('header') {
-            grid-area:     header;
-            margin-bottom: fn.dim(--title-body-spacing);
+        @include iro.bem-elem('sidebar') {
+            grid-area:        sidebar;
+            padding:          fn.dim(--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('close-btn') {
-            position:  absolute;
-            top:       iro.fn-px-to-rem(12px);
-            right:     iro.fn-px-to-rem(12px);
-            font-size: fn.global-dim(--font-size --150);
-        }
+        @include iro.bem-elem('header') {
+            grid-area: header;
+            margin:    fn.dim(--pad-y) fn.dim(--pad-x) 0;
 
-        @include iro.bem-elem('rule') {
-            grid-area: rule;
-            margin:    0;
+            @include iro.bem-sibling-elem('body') {
+                &::before {
+                    display: none;
+                }
+            }
         }
 
-        @include iro.bem-elem('title') {
-            margin-top: 0;
+        @include iro.bem-elem('body') {
+            grid-area:  body;
+            min-height: 0;
+            margin:     fn.dim(--pad-y) fn.dim(--pad-x);
+
+            &::before {
+                content: '';
+                width:   fn.global-dim(--size --500);
+                height:  fn.global-dim(--size --500);
+                float:   right;
+            }
         }
 
-        @include iro.bem-elem('body') {
-            grid-area:       body;
-            min-height:      0;
-            margin-top:      fn.dim(--title-body-spacing);
-            overflow:        auto;
-            scrollbar-color: fn.global-color(--obj-lo) transparent;
+        @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('footer') {
             grid-area:       footer;
             justify-content: flex-end;
-            margin-top:      fn.dim(--pad-y);
+            margin:          fn.dim(--pad-y) fn.dim(--pad-x);
+        }
+
+        @include iro.bem-elem('title') {
+            margin-top: 0;
         }
     }
 }