Update

8 files changed, 42 insertions, 60 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 6ff502c..4ed1ae3 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -27,8 +27,6 @@ include objects/lightbox.pug
 include objects/list-group.pug
 include objects/table.pug
 include objects/alert.pug
-include objects/header.pug
-include objects/sidebar.pug
 include objects/bubble.pug
 include objects/bubble-group.pug
 
@@ -36,7 +34,7 @@ mixin view(id, title)
     -
         views.push({ id, title });
 
-    +container(padX=true padY=true narrow=true class='c-view' id=id)
+    +container(narrow=true class='u-p-700 c-view' id=id)
         +h1-heading('xl')= title
         +divider('medium')
         block
@@ -112,7 +110,7 @@ html
             +view-bubble
             +view-bubble-group
 
-        +sidebar(class='c-sidebar')
+        .c-sidebar.l-overflow.u-themed.t-raised.u-p-75.u-br-1
             +menu
                 each view in views
                     +menu-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index c1affc4..0973b74 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -2,11 +2,8 @@ mixin container
     -
         let classes = {
             'l-container':            true,
-            'l-container--pad-x':     attributes.padX,
-            'l-container--pad-y':     attributes.padY,
             'l-container--narrow':    attributes.narrow,
-            'l-container--sm-narrow': attributes.smNarrow,
-            'l-container--in-page':   attributes.inPage,
+            'l-container--narrow-50': attributes.narrow50,
             'u-themed':               !!attributes.theme
         }
         if (!!attributes.theme) {
@@ -17,5 +14,4 @@ mixin container
         }
 
     div(class=classes)&attributes(attributes)
-        .l-container__inner
-            block
+        block
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index 1e0df38..fad7242 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -31,11 +31,11 @@ mixin bubble(user)
         else if user
             header(class=headerClasses)
                 strong= user
-        div.o-bubble__body.s-colored-links
+        span.s-colored-links
             - slots.body()
-            if slots.time
-                small.o-bubble__time
-                    - slots.time()
+        if slots.time
+            small.o-bubble__time
+                - slots.time()
         if slots.footer
             footer.o-bubble__footer
                 - slots.footer()
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
diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug
deleted file mode 100644
index 0d9d7ee..0000000
--- a/tpl/objects/header.pug
+++ /dev/null
@@ -1,12 +0,0 @@
-mixin header
-    -
-        let classes = {
-            'o-header': true
-        }
-        if (attributes.class) {
-            classes[attributes.class] = true;
-        }
-
-    header(class=classes)
-        .o-header__content.t-lo
-            block
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
index 1ed6052..67bcf37 100644
--- a/tpl/objects/icon.pug
+++ b/tpl/objects/icon.pug
@@ -2,8 +2,8 @@ mixin icon(id)
     -
         let href    = 'icons.svg#' + id
         let classes = {
-            'o-icon':        true,
-            'o-icon--block': attributes.block,
+            'o-icon':    true,
+            'u-d-block': attributes.block,
         }
         if (attributes.class) {
             classes[attributes.class] = true;
diff --git a/tpl/objects/sidebar.pug b/tpl/objects/sidebar.pug
deleted file mode 100644
index caa0f1f..0000000
--- a/tpl/objects/sidebar.pug
+++ /dev/null
@@ -1,12 +0,0 @@
-mixin sidebar
-    -
-        let classes = {
-            'o-sidebar': true
-        }
-        if (attributes.class) {
-            classes[attributes.class] = true;
-        }
-
-    aside(class=classes)
-        .o-sidebar__content.l-overflow
-            block
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 0b6f8e7..f90ef21 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -2,7 +2,7 @@ mixin view-dialog
     +view('dialog', 'Dialog')
         .c-box
             +backdrop
-                +dialog('Lorem ipsum')
+                +dialog('Lorem ipsum')(flat=true)
                     +slot('body')
                         = loremIpsum
 
@@ -18,9 +18,7 @@ mixin view-dialog
 
         .c-box
             +backdrop
-                +dialog('Tags')
-                    +slot('sidebar-header')
-                        +div-heading('sm')(class='o-dialog__label')= '#channel'
+                +dialog('Tags')(sidebarTitle='#channel')
                     +slot('sidebar')
                         +menu(style={ 'min-width': '10em' })
                             +menu-item(icon='bookmark')= 'Bookmark'
@@ -44,12 +42,11 @@ mixin view-dialog
             +backdrop
                 +dialog
                     +slot('header')
-                        .l-card.l-card--flush
-                            .l-card__block.l-flex
-                                +action-button(quiet=true icon='chevron-left')
-                                +action-button(quiet=true icon='chevron-right')
-                            .l-card__block.l-card__block--main
-                                +div-heading('sm')= 'Tags'
+                        .l-card__block.l-flex
+                            +action-button(quiet=true icon='chevron-left')
+                            +action-button(quiet=true icon='chevron-right')
+                        .l-card__block.l-card__block--main
+                            +div-heading('sm')= 'Tags'
                     +slot('sidebar')
                         +menu(style={ 'min-width': '10em' })
                             +menu-item(icon='bookmark')= 'Bookmark'