summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-10-19 11:47:17 +0200
committerVolpeon <git@volpeon.ink>2023-10-19 11:47:17 +0200
commit47d6ec3256174a518d5cd370fe9aa9197c804f5a (patch)
tree9ad531ea8d9e5e3a5c4181cbd48cb0b88f1b0ecd /src/layouts
parentUpdate (diff)
downloadiro-design-47d6ec3256174a518d5cd370fe9aa9197c804f5a.tar.gz
iro-design-47d6ec3256174a518d5cd370fe9aa9197c804f5a.tar.bz2
iro-design-47d6ec3256174a518d5cd370fe9aa9197c804f5a.zip
Implement bubble group with flex
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_bubble-group.scss66
1 files changed, 39 insertions, 27 deletions
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index d63930a..c0e8e43 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -15,66 +15,78 @@
15 ), 'dims'); 15 ), 'dims');
16 16
17 @include iro.bem-layout(iro.props-namespace()) { 17 @include iro.bem-layout(iro.props-namespace()) {
18 display: grid; 18 display: flex;
19 grid-template-columns: auto 1fr; 19 align-items: flex-start;
20 grid-auto-rows: auto; 20 gap: fn.dim(--spacing-x);
21 grid-template-areas: 'avatar bubble';
22 align-items: flex-start;
23 gap: fn.dim(--spacing-y) fn.dim(--spacing-x);
24 21
25 @include iro.bem-elem('avatar') { 22 @include iro.bem-elem('avatar') {
26 grid-area: avatar; 23 flex: 0 0 auto;
27 } 24 }
28 25
29 @include iro.bem-elem('bubble') { 26 @include iro.bem-elem('content') {
30 grid-column: bubble; 27 grid-column: content;
31 min-width: 0; 28 display: flex;
29 flex-direction: column;
30 min-width: 0;
31 gap: fn.dim(--spacing-y);
32 } 32 }
33 33
34 @include iro.bem-modifier('compact') { 34 @include iro.bem-modifier('compact') {
35 gap: fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x); 35 gap: fn.dim(--compact --spacing-x);
36
37 @include iro.bem-elem('content') {
38 gap: fn.dim(--compact --spacing-y);
39 }
36 40
37 @include iro.bem-modifier('left') { 41 @include iro.bem-modifier('left') {
38 justify-items: start; 42 @include iro.bem-elem('content') {
43 align-items: flex-start;
44 }
39 } 45 }
40 46
41 @include iro.bem-modifier('right') { 47 @include iro.bem-modifier('right') {
42 justify-items: end; 48 @include iro.bem-elem('content') {
49 align-items: flex-end;
50 }
43 } 51 }
44 } 52 }
45 53
46 @include iro.bem-modifier('right') { 54 @include iro.bem-modifier('right') {
47 grid-template-columns: 1fr auto; 55 flex-direction: row-reverse;
48 grid-template-areas: 'bubble avatar';
49 } 56 }
50 57
51 @include iro.bem-modifier('no-avatar') { 58 @include iro.bem-modifier('no-avatar') {
52 grid-template-columns: 1fr;
53 grid-template-areas: 'bubble';
54
55 @include iro.bem-elem('avatar') { 59 @include iro.bem-elem('avatar') {
56 display: none; 60 display: none;
57 } 61 }
58 } 62 }
59 63
60 @include iro.bem-modifier('arrow') { 64 @include iro.bem-modifier('arrow') {
61 @include iro.bem-elem('avatar') { 65 @include iro.bem-elem('bubble') {
62 @include iro.bem-next-elem('bubble') { 66 &::before {
67 display: block;
68 }
69
70 @include iro.bem-sibling-elem('bubble') {
63 &::before { 71 &::before {
64 display: block; 72 display: none;
65 } 73 }
66 } 74 }
67 } 75 }
68 76
69 @include iro.bem-modifier('right') { 77 @include iro.bem-modifier('right') {
70 @include iro.bem-elem('avatar') { 78 @include iro.bem-elem('bubble') {
71 @include iro.bem-next-elem('bubble') { 79 &::before {
72 &::before { 80 display: none;
73 display: none; 81 }
74 }
75 82
83 &::after {
84 display: block;
85 }
86
87 @include iro.bem-sibling-elem('bubble') {
76 &::after { 88 &::after {
77 display: block; 89 display: none;
78 } 90 }
79 } 91 }
80 } 92 }