diff options
author | Volpeon <git@volpeon.ink> | 2023-10-19 12:20:28 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2023-10-19 12:20:28 +0200 |
commit | 76481202462b24963083e9a8d9a6af55d034bc21 (patch) | |
tree | 537093fa9f78c95ab6a8f274d295ca3b7c4c57bd /src/layouts | |
parent | Implement bubble group with flex (diff) | |
download | iro-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.scss | 66 |
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 | } |