summaryrefslogtreecommitdiffstats
path: root/src/layouts/_message-group.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts/_message-group.scss')
-rw-r--r--src/layouts/_message-group.scss139
1 files changed, 0 insertions, 139 deletions
diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss
deleted file mode 100644
index 235e242..0000000
--- a/src/layouts/_message-group.scss
+++ /dev/null
@@ -1,139 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4// @use '../objects/message';
5
6@include iro.props-namespace('message-group') {
7 @include iro.props-store((
8 --dims: (
9 --spacing-x: fn.global-dim(--size --225),
10 --spacing-y: fn.global-dim(--size --150),
11 --arrow-size: fn.global-dim(--size --100),
12
13 --compact: (
14 --spacing-x: fn.global-dim(--size --225),
15 --spacing-y: fn.global-dim(--size --50),
16 )
17 )
18 ));
19
20 @include iro.bem-layout(iro.props-namespace()) {
21 display: grid;
22 grid-template-columns: auto 1fr;
23 grid-auto-rows: auto;
24 grid-template-areas: 'avatar message' 'avatar .';
25 align-items: flex-start;
26 gap: 0 fn.dim(--spacing-x);
27
28 @include iro.bem-elem('avatar') {
29 grid-area: avatar;
30 block-size: 0;
31 }
32
33 @include iro.bem-elem('message') {
34 grid-column: message;
35 position: relative;
36 box-sizing: border-box;
37 min-inline-size: 0;
38 max-inline-size: 100%;
39
40 &::before {
41 content: '';
42 display: none;
43 position: absolute;
44 top: 0;
45 left: calc(-1 * fn.dim(--arrow-size));
46 border: fn.dim(--arrow-size) solid fn.global-color(--bg-l2);
47 border-bottom-color: transparent;
48 border-left-color: transparent;
49 }
50
51 @include iro.bem-next-twin-elem {
52 margin-top: fn.dim(--spacing-y);
53 }
54 }
55
56 @include iro.bem-modifier('right') {
57 @include iro.bem-elem('message') {
58 &::before {
59 right: calc(-1 * fn.dim(--arrow-size));
60 left: auto;
61 border-right-color: transparent;
62 border-left-color: fn.global-color(--bg-l2);
63 }
64 }
65 }
66
67 @include iro.bem-modifier('compact') {
68 gap: 0 fn.dim(--compact --spacing-x);
69
70 @include iro.bem-modifier('left') {
71 justify-items: start;
72 }
73
74 @include iro.bem-modifier('right') {
75 justify-items: end;
76 }
77
78 @include iro.bem-elem('message') {
79 @include iro.bem-next-twin-elem {
80 margin-top: fn.dim(--compact --spacing-y);
81 }
82 }
83 }
84
85 @include iro.bem-modifier('right') {
86 grid-template-columns: 1fr auto;
87 grid-template-areas: 'message avatar' '. avatar';
88 }
89
90 @include iro.bem-modifier('no-avatar') {
91 grid-template-columns: 1fr;
92 grid-template-areas: 'message';
93
94 @include iro.bem-elem('avatar') {
95 display: none;
96 }
97 }
98
99 @include iro.bem-modifier('arrow') {
100 @include iro.bem-elem('message') {
101 &::before {
102 display: block;
103 }
104
105 @include iro.bem-next-twin-elem {
106 &::before {
107 display: none;
108 }
109 }
110 }
111 }
112
113 & + & {
114 @include iro.bem-modifier('merge') {
115 margin-top: fn.dim(--spacing-y);
116
117 @include iro.bem-elem('avatar') {
118 visibility: hidden;
119 }
120
121 @include iro.bem-modifier('compact') {
122 margin-top: fn.dim(--compact --spacing-y);
123 }
124
125 @include iro.bem-elem('merge-hide') {
126 display: none;
127 }
128
129 @include iro.bem-modifier('arrow') {
130 @include iro.bem-elem('message') {
131 &::before {
132 display: none;
133 }
134 }
135 }
136 }
137 }
138 }
139}