summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_card-list.scss40
-rw-r--r--src/layouts/_container.scss25
-rw-r--r--src/layouts/_message-group.scss139
3 files changed, 40 insertions, 164 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index c27b297..362325a 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -37,7 +37,11 @@
37 @include iro.bem-modifier('grid') { 37 @include iro.bem-modifier('grid') {
38 display: grid; 38 display: grid;
39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); 39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
40 gap: fn.dim(--grid --row-gap) fn.dim(--grid --col-gap); 40 gap: fn.dim(--grid --col-gap);
41
42 @include iro.bem-modifier('quiet') {
43 row-gap: fn.dim(--grid --row-gap);
44 }
41 } 45 }
42 46
43 @include iro.bem-modifier('masonry') { 47 @include iro.bem-modifier('masonry') {
@@ -46,31 +50,45 @@
46 column-gap: fn.dim(--masonry --col-gap); 50 column-gap: fn.dim(--masonry --col-gap);
47 51
48 @include iro.bem-elem('card') { 52 @include iro.bem-elem('card') {
49 margin-bottom: fn.dim(--masonry --row-gap); 53 margin-bottom: fn.dim(--masonry --col-gap);
54 break-inside: avoid;
55 }
56
57 @include iro.bem-modifier('quiet') {
58 @include iro.bem-elem('card') {
59 margin-bottom: fn.dim(--masonry --row-gap);
60 }
50 } 61 }
51 } 62 }
52 63
53 @include iro.bem-modifier('masonry-h') { 64 @include iro.bem-modifier('masonry-h') {
54 flex-flow: row wrap; 65 flex-flow: row wrap;
55 gap: fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap); 66 gap: fn.dim(--masonry-h --col-gap);
67
68 &::after {
69 content: '';
70 display: block;
71 flex: 1 0 auto;
72 inline-size: fn.dim(--masonry-h --row-height);
73 block-size: 0;
74 }
56 75
57 @include iro.bem-elem('card') { 76 @include iro.bem-elem('card') {
58 flex: 1 0 auto; 77 flex: 1 0 auto;
59 max-width: 100%; 78 max-inline-size: 100%;
60 } 79 }
61 80
62 @include iro.bem-elem('card-content') { 81 @include iro.bem-elem('card-image') {
63 height: fn.dim(--masonry-h --row-height); 82 block-size: fn.dim(--masonry-h --row-height);
64 } 83 }
65 84
66 @include iro.bem-elem('dummy') { 85 @include iro.bem-modifier('quiet') {
67 flex: 1 0 auto; 86 row-gap: fn.dim(--masonry-h --row-gap);
68 width: fn.dim(--masonry-h --row-height);
69 } 87 }
70 } 88 }
71 89
72 @include iro.bem-modifier('aspect-5\\/4') { 90 @include iro.bem-modifier('aspect-5\\/4') {
73 @include iro.bem-elem('card') { 91 @include iro.bem-elem('card-image') {
74 aspect-ratio: 5 / 4; 92 aspect-ratio: 5 / 4;
75 } 93 }
76 } 94 }
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index fcc4837..06607a1 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,22 +7,22 @@
7 --narrow-125: iro.fn-px-to-rem(720px), 7 --narrow-125: iro.fn-px-to-rem(720px),
8 --narrow: iro.fn-px-to-rem(610px), 8 --narrow: iro.fn-px-to-rem(610px),
9 --narrow-75: iro.fn-px-to-rem(500px), 9 --narrow-75: iro.fn-px-to-rem(500px),
10 --pad-x: fn.global-dim(--size --400), 10 --pad-i: fn.global-dim(--size --400),
11 --pad-y: fn.global-dim(--size --800), 11 --pad-b: fn.global-dim(--size --800),
12 ) 12 )
13 )); 13 ));
14 14
15 @include iro.props-store(( 15 @include iro.props-store((
16 --dims: ( 16 --dims: (
17 --pad-x: fn.global-dim(--size --200), 17 --pad-i: fn.global-dim(--size --200),
18 --pad-y: fn.global-dim(--size --600), 18 --pad-b: fn.global-dim(--size --600),
19 ) 19 )
20 ), 'sm'); 20 ), 'sm');
21 21
22 @include iro.props-store(( 22 @include iro.props-store((
23 --dims: ( 23 --dims: (
24 --pad-x: fn.global-dim(--size --150), 24 --pad-i: fn.global-dim(--size --150),
25 --pad-y: fn.global-dim(--size --450), 25 --pad-b: fn.global-dim(--size --450),
26 ) 26 )
27 ), 'xs'); 27 ), 'xs');
28 28
@@ -30,19 +30,16 @@
30 @each $size in 'narrow-125' 'narrow' 'narrow-75' { 30 @each $size in 'narrow-125' 'narrow' 'narrow-75' {
31 @include iro.bem-modifier($size) { 31 @include iro.bem-modifier($size) {
32 max-inline-size: fn.dim(--#{$size}); 32 max-inline-size: fn.dim(--#{$size});
33 margin-right: auto; 33 margin-inline: auto;
34 margin-left: auto;
35 } 34 }
36 } 35 }
37 36
38 @include iro.bem-modifier('pad-x') { 37 @include iro.bem-modifier('pad-i') {
39 padding-right: fn.dim(--pad-x); 38 margin-inline: fn.dim(--pad-i);
40 padding-left: fn.dim(--pad-x);
41 } 39 }
42 40
43 @include iro.bem-modifier('pad-y') { 41 @include iro.bem-modifier('pad-b') {
44 padding-top: fn.dim(--pad-y); 42 padding-block: fn.dim(--pad-b);
45 padding-bottom: fn.dim(--pad-y);
46 } 43 }
47 } 44 }
48} 45}
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}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 09:05:08 +0000