From 7ef3a81eab1aa167d3c9abb3b5100bf26001244d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 5 Feb 2023 19:34:44 +0100
Subject: Bubble

---
 src/objects/_bubble.scss   | 14 ++++++++++++--
 tpl/objects/bubble.pug     |  7 ++++---
 tpl/objects/text-field.pug |  6 +++---
 tpl/views/bubble.pug       |  4 ++++
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
index f1d053f..fc2044b 100644
--- a/src/objects/_bubble.scss
+++ b/src/objects/_bubble.scss
@@ -6,7 +6,7 @@
         --dims: (
             --pad-x:      fn.global-dim(--size --200),
             --pad-y:      fn.global-dim(--size --150),
-            --rounding:   3px,
+            --rounding:   0,
             --arrow-size: fn.global-dim(--size --100),
 
             --75: (
@@ -16,6 +16,12 @@
         )
     ), 'dims');
 
+    @include iro.props-store((
+        --colors: (
+            --highlight: fn.global-color(--fg-lo),
+        ),
+    ), 'colors');
+
     @include iro.bem-object(iro.props-namespace()) {
         position:         relative;
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
@@ -33,8 +39,12 @@
             border-bottom-color: transparent;
             border-left-color:   transparent;
         }
+
+        @include iro.bem-modifier('highlight') {
+            box-shadow: -3px 0 0 0 fn.color(--highlight);
+        }
         
-        @include iro.bem-elem('time') {
+        @include iro.bem-elem('suffix') {
             margin-left: 1em;
             float:       right;
             transform:   translate(.2em, .2em);
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index 03fb10d..52f8949 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -8,9 +8,10 @@ mixin bubble(user)
         block ? block() : undefined
 
         let classes = {
-            'o-bubble':     true,
-            'o-bubble--75': attributes.compact,
-            't-raised':     !attributes.theme
+            'o-bubble':            true,
+            'o-bubble--75':        attributes.compact,
+            'o-bubble--highlight': attributes.highlight,
+            't-raised':            !attributes.theme
         }
         if (attributes.class) {
             classes[attributes.class] = true
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index d5c4444..895770d 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -14,9 +14,9 @@ mixin text-field
             'o-text-field--extended': !!block,
             'is-invalid':             attributes.invalid,
             'is-disabled':            attributes.disabled,
-            'l-media':                 !!block,
-            'l-media--flush':          !!block,
-            'l-media--gapless':        !!block,
+            'l-media':                !!block,
+            'l-media--flush':         !!block,
+            'l-media--gapless':       !!block,
         }
         if (attributes.class) {
             classes[attributes.class] = true;
diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug
index be9cf38..84d0912 100644
--- a/tpl/views/bubble.pug
+++ b/tpl/views/bubble.pug
@@ -7,6 +7,10 @@ mixin view-bubble
                     = '12:34'
                     +icon('lock')(class='u-ml-100')
 
+        .c-box
+            +bubble('Volpeon')(compact=true, highlight=true)
+                +slot('body')= loremIpsum
+
         .c-box.u-themed.t-hi
             +bubble()(compact=true theme='t-def')
                 +slot('body')= loremIpsum
-- 
cgit v1.2.3-54-g00ecf