Made dialog scrollable

7 files changed, 49 insertions, 21 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index 7525f34..f663733 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -20,3 +20,7 @@
 @include iro.bem-utility('pr') {
     position: relative;
 }
+
+@include iro.bem-utility('mt-0') {
+    margin-top: 0;
+}
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);
         }
     }
 }
diff --git a/tpl/index.pug b/tpl/index.pug
index 605fa35..a6a8f87 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -1,5 +1,5 @@
 -
-    let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat'
+    let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
 
 include layouts/container.pug
 
@@ -528,4 +528,13 @@ html
                     +dialog('Lorem ipsum')
                         = loremIpsum
 
+            +box
+                +backdrop
+                    +dialog('Lorem ipsum')
+                        p.u-mt-0= loremIpsum
+                        p= loremIpsum
+                        p= loremIpsum
+                        p= loremIpsum
+                        p= loremIpsum
+
 
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 6ad72d7..3e3eb7f 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -1,3 +1,3 @@
 mixin backdrop
-    .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em' })
+    .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' })
         block
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 3cbe95e..7e3e2d6 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -7,7 +7,7 @@ mixin dialog(title)
         header.o-dialog__header
             +div-heading('lg')(class='o-dialog__title')
                 = title
-        +rule('medium')
+        +rule('medium')(class='o-dialog__rule')
         section.o-dialog__body
             block
         footer.o-dialog__footer.l-button-group
diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug
index 63a039f..b2f3a38 100644
--- a/tpl/objects/rule.pug
+++ b/tpl/objects/rule.pug
@@ -6,7 +6,7 @@ mixin rule(level)
             ['o-rule--' + level]: true
         }
 
-    div(class=classes)
+    div(class=classes)&attributes(attributes)
         if block
             .o-rule__label
                 block