summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-10-18 18:09:33 +0200
committerVolpeon <git@volpeon.ink>2023-10-18 18:09:33 +0200
commita6b0d8432b737d974a22781b8a210f7c75977bde (patch)
tree4dc47778234493099af8019606509740a8228527
parentUpdate (diff)
downloadiro-design-a6b0d8432b737d974a22781b8a210f7c75977bde.tar.gz
iro-design-a6b0d8432b737d974a22781b8a210f7c75977bde.tar.bz2
iro-design-a6b0d8432b737d974a22781b8a210f7c75977bde.zip
Improved bubble group customization
-rw-r--r--src/layouts/_bubble-group.scss30
-rw-r--r--src/objects/_bubble.scss15
-rw-r--r--tpl/objects/bubble-group.pug2
-rw-r--r--tpl/objects/bubble.pug2
-rw-r--r--tpl/views/bubble-group.pug2
5 files changed, 44 insertions, 7 deletions
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index 9336b44..6ee5c2e 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -32,8 +32,20 @@
32 } 32 }
33 33
34 @include iro.bem-modifier('compact') { 34 @include iro.bem-modifier('compact') {
35 justify-items: start; 35 gap: fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x);
36 gap: fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x); 36
37 @include iro.bem-modifier('left') {
38 justify-items: start;
39 }
40
41 @include iro.bem-modifier('right') {
42 justify-items: end;
43 }
44 }
45
46 @include iro.bem-modifier('right') {
47 grid-template-columns: 1fr auto;
48 grid-template-areas: 'bubble avatar';
37 } 49 }
38 50
39 @include iro.bem-modifier('arrow') { 51 @include iro.bem-modifier('arrow') {
@@ -44,6 +56,20 @@
44 } 56 }
45 } 57 }
46 } 58 }
59
60 @include iro.bem-modifier('right') {
61 @include iro.bem-elem('avatar') {
62 @include iro.bem-next-elem('bubble') {
63 &::before {
64 display: none;
65 }
66
67 &::after {
68 display: block;
69 }
70 }
71 }
72 }
47 } 73 }
48 } 74 }
49} 75}
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
index fc2044b..477f475 100644
--- a/src/objects/_bubble.scss
+++ b/src/objects/_bubble.scss
@@ -29,15 +29,24 @@
29 background-color: fn.global-color(--bg); 29 background-color: fn.global-color(--bg);
30 color: fn.global-color(--fg); 30 color: fn.global-color(--fg);
31 31
32 &::before { 32 &::before,
33 &::after {
33 content: ''; 34 content: '';
34 display: none; 35 display: none;
35 position: absolute; 36 position: absolute;
36 top: 0; 37 top: 0;
37 left: calc(-1 * fn.dim(--arrow-size));
38 border: fn.dim(--arrow-size) solid fn.global-color(--bg); 38 border: fn.dim(--arrow-size) solid fn.global-color(--bg);
39 border-bottom-color: transparent; 39 border-bottom-color: transparent;
40 border-left-color: transparent; 40 }
41
42 &::before {
43 left: calc(-1 * fn.dim(--arrow-size));
44 border-left-color: transparent;
45 }
46
47 &::after {
48 right: calc(-1 * fn.dim(--arrow-size));
49 border-right-color: transparent;
41 } 50 }
42 51
43 @include iro.bem-modifier('highlight') { 52 @include iro.bem-modifier('highlight') {
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
index e6a6d19..4fcb1a4 100644
--- a/tpl/objects/bubble-group.pug
+++ b/tpl/objects/bubble-group.pug
@@ -3,6 +3,8 @@ mixin bubble-group(user)
3 let classes = { 3 let classes = {
4 'l-bubble-group': true, 4 'l-bubble-group': true,
5 'l-bubble-group--compact': attributes.compact, 5 'l-bubble-group--compact': attributes.compact,
6 'l-bubble-group--left': attributes.left,
7 'l-bubble-group--right': attributes.right,
6 'l-bubble-group--arrow': attributes.arrow 8 'l-bubble-group--arrow': attributes.arrow
7 } 9 }
8 if (attributes.class) { 10 if (attributes.class) {
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index 5782ca5..6a3ea8b 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -35,7 +35,7 @@ mixin bubble(user)
35 span.s-links.s-links--colored 35 span.s-links.s-links--colored
36 - slots.body() 36 - slots.body()
37 if slots.time 37 if slots.time
38 small.o-bubble__time 38 small.o-bubble__suffix
39 - slots.time() 39 - slots.time()
40 if slots.footer 40 if slots.footer
41 footer.o-bubble__footer 41 footer.o-bubble__footer
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
index 8464bc7..ce00067 100644
--- a/tpl/views/bubble-group.pug
+++ b/tpl/views/bubble-group.pug
@@ -1,7 +1,7 @@
1mixin view-bubble-group 1mixin view-bubble-group
2 +view('bubble-group', 'Bubble group') 2 +view('bubble-group', 'Bubble group')
3 .c-box.l-overflow(style='resize: vertical') 3 .c-box.l-overflow(style='resize: vertical')
4 +bubble-group('Volpeon')(compact=true arrow=true) 4 +bubble-group('Volpeon')(compact=true arrow=true left=true)
5 +bubble('Volpeon')(compact=true class='l-bubble-group__bubble') 5 +bubble('Volpeon')(compact=true class='l-bubble-group__bubble')
6 +slot('body')= 'Compact bubbles test' 6 +slot('body')= 'Compact bubbles test'
7 +slot('time')= '12:34' 7 +slot('time')= '12:34'