8 files changed, 71 insertions, 6 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 14bfa10..6ff502c 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -29,6 +29,8 @@ 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
 
 mixin view(id, title)
     -
@@ -70,6 +72,8 @@ include views/lightbox.pug
 include views/list-group.pug
 include views/table.pug
 include views/alert.pug
+include views/bubble.pug
+include views/bubble-group.pug
 
 
 doctype html
@@ -104,7 +108,9 @@ html
             +view-lightbox
             +view-list-group
             +view-table
-            +view-alert 
+            +view-alert
+            +view-bubble
+            +view-bubble-group
 
         +sidebar(class='c-sidebar')
             +menu
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index 9e08a16..a2ff941 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -5,7 +5,7 @@ mixin avatar
         let classes = {
             'o-avatar':         true,
             'o-avatar--circle': attributes.circle,
-            'u-d-block':            attributes.block
+            'u-d-block':        attributes.block
         }
         if (attributes.class) {
             classes[attributes.class] = true;
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
new file mode 100644
index 0000000..c2e502a
--- /dev/null
+++ b/tpl/objects/bubble-group.pug
@@ -0,0 +1,22 @@
+mixin bubble-group(user)
+    -
+        let first = true 
+
+    mixin bubble-group-bubble(time)
+        +bubble(time, first ? user : undefined)(class='l-bubble-group__bubble')
+            block
+        -
+            first = false
+
+    -
+        let classes = {
+            'l-bubble-group': true
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true
+        }
+
+    section(class=classes)
+        .l-bubble-group__avatar
+            +avatar= user.slice(0, 2)
+        block
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
new file mode 100644
index 0000000..a79f119
--- /dev/null
+++ b/tpl/objects/bubble.pug
@@ -0,0 +1,21 @@
+mixin bubble(time, user)
+    -
+        let classes = {
+            'o-bubble': true,
+            't-raised':         true
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true
+        }
+
+    article(class=classes)
+        if user
+            header.o-bubble__user
+                strong= user
+        span.s-colored-links
+            block
+        small.o-bubble__time
+            = time
+            if attributes.scope
+                = ' '
+                +icon(attributes.scope)
diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug
index 4518afc..0d9d7ee 100644
--- a/tpl/objects/header.pug
+++ b/tpl/objects/header.pug
@@ -8,5 +8,5 @@ mixin header
         }
 
     header(class=classes)
-        .o-header__content.t-lowered
+        .o-header__content.t-lo
             block
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 673aa27..53d1362 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -16,7 +16,7 @@ mixin text-field
             'is-disabled':            attributes.disabled,
             'l-card':                 !!block,
             'l-card--flush':          !!block,
-            'l-card--gapless':        !!block
+            'l-card--gapless':        !!block,
         }
         if (attributes.class) {
             classes[attributes.class] = true;
@@ -30,11 +30,11 @@ mixin text-field
     div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
         if !!block
             if slots.pre
-                .u-d-contents.t-raised
+                .u-d-contents.t-hi
                     - slots.pre()
             input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr)
             if slots.post
-                .u-d-contents.t-raised
+                .u-d-contents.t-hi
                     - slots.post()
             .o-text-field__bg
         else
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
new file mode 100644
index 0000000..6f057c0
--- /dev/null
+++ b/tpl/views/bubble-group.pug
@@ -0,0 +1,9 @@
+mixin view-bubble-group
+    +view('bubble-group', 'Bubble group')
+        .c-box.l-overflow(style='max-height: 13em')
+            +bubble-group('Volpeon')
+                +bubble-group-bubble('12:34')= loremIpsum
+                +bubble-group-bubble('12:35')= loremIpsum
+                +bubble-group-bubble('12:36')= loremIpsum
+                +bubble-group-bubble('12:38')= loremIpsum
+                +bubble-group-bubble('12:39')= loremIpsum
diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug
new file mode 100644
index 0000000..037398f
--- /dev/null
+++ b/tpl/views/bubble.pug
@@ -0,0 +1,7 @@
+mixin view-bubble
+    +view('bubble', 'Bubble')
+        .c-box
+            +bubble('12:34', 'Volpeon')= loremIpsum
+
+        .c-box
+            +bubble('12:34', 'Volpeon')(scope='lock')= loremIpsum