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