summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_bubble.scss14
-rw-r--r--tpl/objects/bubble.pug7
-rw-r--r--tpl/objects/text-field.pug6
-rw-r--r--tpl/views/bubble.pug4
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 @@
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --200), 7 --pad-x: fn.global-dim(--size --200),
8 --pad-y: fn.global-dim(--size --150), 8 --pad-y: fn.global-dim(--size --150),
9 --rounding: 3px, 9 --rounding: 0,
10 --arrow-size: fn.global-dim(--size --100), 10 --arrow-size: fn.global-dim(--size --100),
11 11
12 --75: ( 12 --75: (
@@ -16,6 +16,12 @@
16 ) 16 )
17 ), 'dims'); 17 ), 'dims');
18 18
19 @include iro.props-store((
20 --colors: (
21 --highlight: fn.global-color(--fg-lo),
22 ),
23 ), 'colors');
24
19 @include iro.bem-object(iro.props-namespace()) { 25 @include iro.bem-object(iro.props-namespace()) {
20 position: relative; 26 position: relative;
21 padding: fn.dim(--pad-y) fn.dim(--pad-x); 27 padding: fn.dim(--pad-y) fn.dim(--pad-x);
@@ -33,8 +39,12 @@
33 border-bottom-color: transparent; 39 border-bottom-color: transparent;
34 border-left-color: transparent; 40 border-left-color: transparent;
35 } 41 }
42
43 @include iro.bem-modifier('highlight') {
44 box-shadow: -3px 0 0 0 fn.color(--highlight);
45 }
36 46
37 @include iro.bem-elem('time') { 47 @include iro.bem-elem('suffix') {
38 margin-left: 1em; 48 margin-left: 1em;
39 float: right; 49 float: right;
40 transform: translate(.2em, .2em); 50 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)
8 block ? block() : undefined 8 block ? block() : undefined
9 9
10 let classes = { 10 let classes = {
11 'o-bubble': true, 11 'o-bubble': true,
12 'o-bubble--75': attributes.compact, 12 'o-bubble--75': attributes.compact,
13 't-raised': !attributes.theme 13 'o-bubble--highlight': attributes.highlight,
14 't-raised': !attributes.theme
14 } 15 }
15 if (attributes.class) { 16 if (attributes.class) {
16 classes[attributes.class] = true 17 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
14 'o-text-field--extended': !!block, 14 'o-text-field--extended': !!block,
15 'is-invalid': attributes.invalid, 15 'is-invalid': attributes.invalid,
16 'is-disabled': attributes.disabled, 16 'is-disabled': attributes.disabled,
17 'l-media': !!block, 17 'l-media': !!block,
18 'l-media--flush': !!block, 18 'l-media--flush': !!block,
19 'l-media--gapless': !!block, 19 'l-media--gapless': !!block,
20 } 20 }
21 if (attributes.class) { 21 if (attributes.class) {
22 classes[attributes.class] = true; 22 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
7 = '12:34' 7 = '12:34'
8 +icon('lock')(class='u-ml-100') 8 +icon('lock')(class='u-ml-100')
9 9
10 .c-box
11 +bubble('Volpeon')(compact=true, highlight=true)
12 +slot('body')= loremIpsum
13
10 .c-box.u-themed.t-hi 14 .c-box.u-themed.t-hi
11 +bubble()(compact=true theme='t-def') 15 +bubble()(compact=true theme='t-def')
12 +slot('body')= loremIpsum 16 +slot('body')= loremIpsum