diff options
-rw-r--r-- | src/objects/_dialog.scss | 16 | ||||
-rw-r--r-- | tpl/objects/dialog.pug | 1 |
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 = { |