Add persistent pre- and post-body area to dialog

2 files changed, 16 insertions, 1 deletions

diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 54cd5fe..431e138 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -42,11 +42,13 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         display:               grid;
-        grid-template-rows:    auto 1fr auto;
+        grid-template-rows:    auto auto 1fr auto auto;
         grid-template-columns: auto 1fr;
         grid-template-areas:
             'sidebar-header header'
+            'sidebar        top'
             'sidebar        body'
+            'sidebar        bottom'
             'sidebar        footer';
         position:              relative;
         box-sizing:            border-box;
@@ -99,6 +101,12 @@
             border-right: 1px solid fn.color(--border);
         }
 
+        @include iro.bem-elem('top') {
+            grid-area: top;
+            min-width: 0;
+            padding:   fn.dim(--body --pad-y) fn.dim(--body --pad-x) 0;
+        }
+
         @include iro.bem-elem('body') {
             grid-area:  body;
             min-width:  0;
@@ -106,6 +114,12 @@
             padding:    fn.dim(--body --pad-y) fn.dim(--body --pad-x);
         }
 
+        @include iro.bem-elem('bottom') {
+            grid-area: bottom;
+            min-width: 0;
+            padding:   0 fn.dim(--body --pad-x) fn.dim(--body --pad-y);
+        }
+
         @include iro.bem-elem('footer') {
             grid-area:       footer;
             justify-content: flex-end;
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 55dc8ad..3ceae69 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -18,6 +18,7 @@ mixin dialog(title)
         let headerClass = {
             'o-dialog__header': true,
             'l-media':          true,
+            'u-bb-1':           !!slots.sidebar && !(slots['sidebar-header'] || attributes.sidebarTitle),
         }
 
         let sidebarHeaderClass = {