Made dialog scrollable

2 files changed, 32 insertions, 17 deletions

diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index bc63a27..e989e53 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -23,6 +23,7 @@
     ), 'sm');
 
     @include iro.bem-object(iro.props-namespace()) {
+        display:          flex;
         position:         fixed;
         z-index:          fn.dim(--z-index);
         top:              0;
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 4f18b08..d83f348 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -4,12 +4,13 @@
 @include iro.props-namespace('dialog') {
     @include iro.props-store((
         --dims: (
-            --pad-x:     iro.fn-px-to-rem(40px),
-            --pad-y:     iro.fn-px-to-rem(40px),
-            --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,
+            --pad-x:              iro.fn-px-to-rem(40px),
+            --pad-y:              iro.fn-px-to-rem(40px),
+            --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(--spacing --y --sm),
         ),
     ), 'dims');
 
@@ -20,14 +21,17 @@
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
-        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 auto 1fr auto;
+        grid-template-areas: 'header' 'rule' 'body' 'footer';
+        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);
 
         @include iro.bem-modifier('sm') {
             max-width: fn.dim(--width-sm);
@@ -38,7 +42,13 @@
         }
 
         @include iro.bem-elem('header') {
-            padding-bottom: .5rem;
+            grid-area:     header;
+            margin-bottom: fn.dim(--title-body-spacing);
+        }
+
+        @include iro.bem-elem('rule') {
+            grid-area: rule;
+            margin:    0;
         }
 
         @include iro.bem-elem('title') {
@@ -46,12 +56,16 @@
         }
 
         @include iro.bem-elem('body') {
-            padding-top: .5rem;
+            grid-area:  body;
+            min-height: 0;
+            margin-top: fn.dim(--title-body-spacing);
+            overflow:   auto;
         }
 
         @include iro.bem-elem('footer') {
+            grid-area:       footer;
             justify-content: flex-end;
-            padding-top:     fn.dim(--pad-y);
+            margin-top:      fn.dim(--pad-y);
         }
     }
 }