summaryrefslogtreecommitdiffstats
path: root/src/layouts/_bubble-group.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-11-09 15:44:54 +0100
committerVolpeon <git@volpeon.ink>2023-11-09 15:44:54 +0100
commit679b9b108101b67ad56b4fdf35ec2bd0568d8d84 (patch)
tree1b097e9f90627ca401174c738a8d754e8f2cce6b /src/layouts/_bubble-group.scss
parentSimplified bubble arrows (diff)
downloadiro-design-679b9b108101b67ad56b4fdf35ec2bd0568d8d84.tar.gz
iro-design-679b9b108101b67ad56b4fdf35ec2bd0568d8d84.tar.bz2
iro-design-679b9b108101b67ad56b4fdf35ec2bd0568d8d84.zip
Renamed "bubble" to "message", added message group merging
Diffstat (limited to 'src/layouts/_bubble-group.scss')
-rw-r--r--src/layouts/_bubble-group.scss109
1 files changed, 0 insertions, 109 deletions
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
deleted file mode 100644
index e4bc666..0000000
--- a/src/layouts/_bubble-group.scss
+++ /dev/null
@@ -1,109 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('bubble-group') {
5 @include iro.props-store((
6 --dims: (
7 --spacing-x: fn.global-dim(--size --225),
8 --spacing-y: fn.global-dim(--size --150),
9 --arrow-size: fn.global-dim(--size --100),
10
11 --compact: (
12 --spacing-x: fn.global-dim(--size --225),
13 --spacing-y: fn.global-dim(--size --50),
14 )
15 )
16 ), 'dims');
17
18 @include iro.bem-layout(iro.props-namespace()) {
19 display: grid;
20 grid-template-columns: auto 1fr;
21 grid-auto-rows: auto;
22 grid-template-areas: 'avatar bubble' 'avatar .';
23 align-items: flex-start;
24 gap: 0 fn.dim(--spacing-x);
25
26 @include iro.bem-elem('avatar') {
27 grid-area: avatar;
28 }
29
30 @include iro.bem-elem('bubble') {
31 grid-column: bubble;
32 box-sizing: border-box;
33 min-width: 0;
34 max-width: 100%;
35
36 &::before {
37 content: '';
38 display: none;
39 position: absolute;
40 top: 0;
41 left: calc(-1 * fn.dim(--arrow-size));
42 border: fn.dim(--arrow-size) solid fn.global-color(--bg);
43 border-bottom-color: transparent;
44 border-left-color: transparent;
45 }
46
47 @include iro.bem-next-twin-elem {
48 margin-top: fn.dim(--spacing-y);
49 }
50 }
51
52 @include iro.bem-modifier('right') {
53 @include iro.bem-elem('bubble') {
54 &::before {
55 right: calc(-1 * fn.dim(--arrow-size));
56 left: auto;
57 border-right-color: transparent;
58 border-left-color: fn.global-color(--bg);
59 }
60 }
61 }
62
63 @include iro.bem-modifier('compact') {
64 gap: 0 fn.dim(--compact --spacing-x);
65
66 @include iro.bem-modifier('left') {
67 justify-items: start;
68 }
69
70 @include iro.bem-modifier('right') {
71 justify-items: end;
72 }
73
74 @include iro.bem-elem('bubble') {
75 @include iro.bem-next-twin-elem {
76 margin-top: fn.dim(--compact --spacing-y);
77 }
78 }
79 }
80
81 @include iro.bem-modifier('right') {
82 grid-template-columns: 1fr auto;
83 grid-template-areas: 'bubble avatar' '. avatar';
84 }
85
86 @include iro.bem-modifier('no-avatar') {
87 grid-template-columns: 1fr;
88 grid-template-areas: 'bubble';
89
90 @include iro.bem-elem('avatar') {
91 display: none;
92 }
93 }
94
95 @include iro.bem-modifier('arrow') {
96 @include iro.bem-elem('bubble') {
97 &::before {
98 display: block;
99 }
100
101 @include iro.bem-next-twin-elem {
102 &::before {
103 display: none;
104 }
105 }
106 }
107 }
108 }
109}