Update

1 files changed, 25 insertions, 10 deletions

diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 2474cc3..91b99d9 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -1,6 +1,4 @@
 include heading.pug
-include header.pug
-include sidebar.pug
 
 mixin dialog(title)
     - const slots = {}
@@ -12,9 +10,23 @@ mixin dialog(title)
         block ? block() : undefined 
 
         let classes = {
-            'o-dialog': true,
+            'o-dialog':       true,
+            'o-dialog--flat': attributes.flat,
         }
 
+        let headerClass = {
+            'o-dialog__header': true,
+            'u-themed':         !attributes.flat,
+            't-lowered':        !attributes.flat,
+            'l-card':           true,
+        }
+
+        let sidebarHeaderClass = {
+            'o-dialog__header--sidebar': true,
+        }
+
+        Object.assign(sidebarHeaderClass, headerClass);
+
         let bodyClass = {
             'o-dialog__body': true
         }
@@ -23,21 +35,24 @@ mixin dialog(title)
         }
 
     div(class=classes)
-        if slots['sidebar-header']
-            +header(class='o-dialog__sidebar-header')
-                - slots['sidebar-header']()
+        if slots['sidebar-header'] || attributes.sidebarTitle
+            div(class=sidebarHeaderClass)
+                if slots['sidebar-header']
+                    - slots['sidebar-header']()
+                else
+                    +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= attributes.sidebarTitle
 
         if slots.sidebar
-            +sidebar(class='o-dialog__sidebar')
+            .o-dialog__sidebar.l-overflow
                 - slots.sidebar()
 
-        +header(class='o-dialog__header')
+        div(class=headerClass)
             if slots.header
                 - slots.header()
             else
                 if title
-                    +div-heading('sm')(class='o-dialog__label')= title
-            +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
+                    +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= title
+            +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-card__block')
 
         section(class=bodyClass)
             if slots.body