summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_dialog.scss16
-rw-r--r--tpl/objects/dialog.pug1
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 @@
42 42
43 @include iro.bem-object(iro.props-namespace()) { 43 @include iro.bem-object(iro.props-namespace()) {
44 display: grid; 44 display: grid;
45 grid-template-rows: auto 1fr auto; 45 grid-template-rows: auto auto 1fr auto auto;
46 grid-template-columns: auto 1fr; 46 grid-template-columns: auto 1fr;
47 grid-template-areas: 47 grid-template-areas:
48 'sidebar-header header' 48 'sidebar-header header'
49 'sidebar top'
49 'sidebar body' 50 'sidebar body'
51 'sidebar bottom'
50 'sidebar footer'; 52 'sidebar footer';
51 position: relative; 53 position: relative;
52 box-sizing: border-box; 54 box-sizing: border-box;
@@ -99,6 +101,12 @@
99 border-right: 1px solid fn.color(--border); 101 border-right: 1px solid fn.color(--border);
100 } 102 }
101 103
104 @include iro.bem-elem('top') {
105 grid-area: top;
106 min-width: 0;
107 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x) 0;
108 }
109
102 @include iro.bem-elem('body') { 110 @include iro.bem-elem('body') {
103 grid-area: body; 111 grid-area: body;
104 min-width: 0; 112 min-width: 0;
@@ -106,6 +114,12 @@
106 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); 114 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
107 } 115 }
108 116
117 @include iro.bem-elem('bottom') {
118 grid-area: bottom;
119 min-width: 0;
120 padding: 0 fn.dim(--body --pad-x) fn.dim(--body --pad-y);
121 }
122
109 @include iro.bem-elem('footer') { 123 @include iro.bem-elem('footer') {
110 grid-area: footer; 124 grid-area: footer;
111 justify-content: flex-end; 125 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)
18 let headerClass = { 18 let headerClass = {
19 'o-dialog__header': true, 19 'o-dialog__header': true,
20 'l-media': true, 20 'l-media': true,
21 'u-bb-1': !!slots.sidebar && !(slots['sidebar-header'] || attributes.sidebarTitle),
21 } 22 }
22 23
23 let sidebarHeaderClass = { 24 let sidebarHeaderClass = {