summaryrefslogtreecommitdiffstats
path: root/src/layouts/_bubble-group.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts/_bubble-group.scss')
-rw-r--r--src/layouts/_bubble-group.scss38
1 files changed, 38 insertions, 0 deletions
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
new file mode 100644
index 0000000..4db70d0
--- /dev/null
+++ b/src/layouts/_bubble-group.scss
@@ -0,0 +1,38 @@
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 --50),
9 )
10 ), 'dims');
11
12 @include iro.bem-layout(iro.props-namespace()) {
13 display: grid;
14 grid-template-columns: auto 1fr;
15 grid-auto-rows: auto;
16 grid-template-areas: 'avatar bubble';
17 justify-items: start;
18 align-items: flex-start;
19 gap: fn.dim(--spacing-y) fn.dim(--spacing-x);
20
21 @include iro.bem-elem('avatar') {
22 grid-area: avatar;
23 position: sticky;
24 top: 0;
25 justify-self: end;
26
27 @include iro.bem-next-elem('bubble') {
28 &::before {
29 display: block;
30 }
31 }
32 }
33
34 @include iro.bem-elem('bubble') {
35 grid-column: bubble;
36 }
37 }
38}