summaryrefslogtreecommitdiffstats
path: root/src
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 /src
parentUpdate (diff)
downloadiro-design-a6b0d8432b737d974a22781b8a210f7c75977bde.tar.gz
iro-design-a6b0d8432b737d974a22781b8a210f7c75977bde.tar.bz2
iro-design-a6b0d8432b737d974a22781b8a210f7c75977bde.zip
Improved bubble group customization
Diffstat (limited to 'src')
-rw-r--r--src/layouts/_bubble-group.scss30
-rw-r--r--src/objects/_bubble.scss15
2 files changed, 40 insertions, 5 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') {