summaryrefslogtreecommitdiffstats
path: root/src/layouts/_card-list.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts/_card-list.scss')
-rw-r--r--src/layouts/_card-list.scss178
1 files changed, 75 insertions, 103 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index c05b798..f2a6ff5 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,44 +1,39 @@
1@use "sass:meta"; 1@use 'sass:meta';
2@use "pkg:include-media/dist/include-media" as media; 2@use 'pkg:include-media/dist/include-media' as media;
3@use "pkg:iro-sass/bem"; 3@use 'pkg:iro-sass/src/bem';
4@use "pkg:iro-sass/props"; 4@use 'pkg:iro-sass/src/props';
5@use "../props" as *; 5@use '../props' as *;
6 6
7@use "../objects/card.vars" as card; 7@use '../objects/card.vars' as card;
8 8
9@forward "card-list.vars"; 9@forward 'card-list.vars';
10@use "card-list.vars" as vars; 10@use 'card-list.vars' as vars;
11 11
12@mixin styles { 12@mixin styles {
13 @include materialize-at-root(meta.module-variables("vars")); 13 @include materialize-at-root(meta.module-variables('vars'));
14 14
15 @include bem.layout("card-list") { 15 @include bem.layout('card-list') {
16 display: flex; 16 display: flex;
17 flex-direction: column; 17 flex-direction: column;
18 gap: props.get(vars.$row-gap); 18 gap: props.get(vars.$row-gap);
19 19
20 @include bem.modifier("merge") { 20 @include bem.modifier('merge') {
21 position: relative; 21 position: relative;
22 gap: 0; 22 gap: 0;
23 border-radius: props.get(card.$rounding); 23 border-radius: props.get(card.$rounding);
24 24
25 @include bem.elem("card") { 25 @include bem.elem('card') {
26 border-color: props.get(card.$border-color) props.get(card.$border-color) 26 border-color: props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
27 props.get(vars.$border-color);
28 background-clip: content-box; 27 background-clip: content-box;
29 box-shadow: none; 28 box-shadow: none;
30 29
31 &:not(:last-child) { 30 &:not(:last-child) {
32 position: relative; 31 position: relative;
33 border-end-start-radius: 0; 32 border-end-start-radius: 0;
34 border-end-end-radius: 0; 33 border-end-end-radius: 0;
35 } 34 }
36 35
37 @include bem.multi( 36 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
38 "&:link, &:visited, &:enabled",
39 "modifier" "interactive",
40 "modifier" "collapsible"
41 ) {
42 &:hover, 37 &:hover,
43 &:active, 38 &:active,
44 &:focus-visible { 39 &:focus-visible {
@@ -51,28 +46,19 @@
51 } 46 }
52 47
53 @include bem.next-twin-elem { 48 @include bem.next-twin-elem {
54 margin-block-start: calc(-1 * props.get(card.$border-width)); 49 margin-block-start: calc(-1 * props.get(card.$border-width));
55 border-block-start-color: transparent; 50 border-block-start-color: transparent;
56 border-start-start-radius: 0; 51 border-start-start-radius: 0;
57 border-start-end-radius: 0; 52 border-start-end-radius: 0;
58 53
59 @include bem.multi( 54 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
60 "&:link, &:visited, &:enabled",
61 "modifier" "interactive",
62 "modifier" "collapsible"
63 ) {
64 &:hover, 55 &:hover,
65 &:active { 56 &:active {
66 border-block-start-color: props.get(card.$hover--border-color); 57 border-block-start-color: props.get(card.$hover--border-color);
67 } 58 }
68 59
69 &:focus-visible { 60 &:focus-visible {
70 margin-block-start: calc( 61 margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
71 -1 *
72 props.get(card.$border-width) - props.get(
73 card.$key-focus--border-width
74 )
75 );
76 } 62 }
77 } 63 }
78 } 64 }
@@ -81,11 +67,7 @@
81 border-block-end-color: props.get(card.$border-color); 67 border-block-end-color: props.get(card.$border-color);
82 } 68 }
83 69
84 @include bem.multi( 70 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
85 "&:link, &:visited, &:enabled",
86 "modifier" "interactive",
87 "modifier" "collapsible"
88 ) {
89 &:hover, 71 &:hover,
90 &:active { 72 &:active {
91 border-color: props.get(card.$hover--border-color); 73 border-color: props.get(card.$hover--border-color);
@@ -93,20 +75,17 @@
93 75
94 &:focus-visible { 76 &:focus-visible {
95 border-color: props.get(card.$hover--bg-color); 77 border-color: props.get(card.$hover--bg-color);
96 box-shadow: 0 0 0 78 box-shadow:
97 calc( 79 0 0 0
98 props.get(card.$key-focus--border-width) + 80 calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width))
99 props.get(card.$key-focus--outline-width)
100 )
101 props.get(card.$key-focus--outline-color); 81 props.get(card.$key-focus--outline-color);
102 } 82 }
103 } 83 }
104 } 84 }
105 85
106 @include bem.modifier("borderless") { 86 @include bem.modifier('borderless') {
107 @include bem.elem("card") { 87 @include bem.elem('card') {
108 border-color: props.get(card.$bg-color) props.get(card.$bg-color) 88 border-color: props.get(card.$bg-color) props.get(card.$bg-color) props.get(vars.$border-color);
109 props.get(vars.$border-color);
110 89
111 @include bem.next-twin-elem { 90 @include bem.next-twin-elem {
112 border-block-start-color: transparent; 91 border-block-start-color: transparent;
@@ -116,11 +95,7 @@
116 border-block-end-color: props.get(card.$bg-color); 95 border-block-end-color: props.get(card.$bg-color);
117 } 96 }
118 97
119 @include bem.multi( 98 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
120 "&:link, &:visited, &:enabled",
121 "modifier" "interactive",
122 "modifier" "collapsible"
123 ) {
124 &:hover, 99 &:hover,
125 &:active { 100 &:active {
126 border-color: props.get(card.$hover--border-color); 101 border-color: props.get(card.$hover--border-color);
@@ -133,87 +108,84 @@
133 } 108 }
134 } 109 }
135 110
136 @include bem.modifier("shadow") { 111 @include bem.modifier('shadow') {
137 box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) 112 box-shadow:
138 props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) 113 props.get(vars.$shadow-x)
114 props.get(vars.$shadow-y)
115 props.get(vars.$shadow-blur)
116 props.get(vars.$shadow-grow)
139 props.get(card.$shadow-color); 117 props.get(card.$shadow-color);
140 } 118 }
141 119
142 @include bem.modifier("interactive") { 120 @include bem.modifier('interactive') {
143 transition: 121 transition: transform .2s, box-shadow .2s;
144 transform 0.2s,
145 box-shadow 0.2s;
146 122
147 &:hover, 123 &:hover,
148 &:active, 124 &:active,
149 &:focus-within { 125 &:focus-within {
150 box-shadow: none; 126 box-shadow: none;
151 transform: translateY(props.get(card.$hover--offset-b)); 127 transform: translateY(props.get(card.$hover--offset-b));
152 } 128 }
153 } 129 }
154 } 130 }
155 131
156 @include bem.modifier("quiet") { 132 @include bem.modifier('quiet') {
157 row-gap: props.get(vars.$quiet--row-gap); 133 row-gap: props.get(vars.$quiet--row-gap);
158 } 134 }
159 135
160 @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, 136 @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts {
161 $breakpoint in vars.$grid-layouts
162 {
163 @include bem.modifier($mod) { 137 @include bem.modifier($mod) {
164 display: grid; 138 display: grid;
165 grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr)); 139 grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr));
166 gap: props.get($row-gap) props.get($col-gap); 140 gap: props.get($row-gap) props.get($col-gap);
167 141
168 @include bem.modifier("quiet") { 142 @include bem.modifier('quiet') {
169 row-gap: props.get($quiet--row-gap); 143 row-gap: props.get($quiet--row-gap);
170 } 144 }
171 145
172 @include media.media("<=#{$breakpoint}") { 146 @include media.media('<=#{$breakpoint}') {
173 display: flex; 147 display: flex;
174 } 148 }
175 } 149 }
176 } 150 }
177 151
178 @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, 152 @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$flex-layouts {
179 $breakpoint in vars.$flex-layouts
180 {
181 @include bem.modifier($mod) { 153 @include bem.modifier($mod) {
182 display: flex; 154 display: flex;
183 flex-flow: row wrap; 155 flex-flow: row wrap;
184 gap: props.get($row-gap) props.get($col-gap); 156 gap: props.get($row-gap) props.get($col-gap);
185 157
186 @include bem.modifier("quiet") { 158 @include bem.modifier('quiet') {
187 row-gap: props.get($quiet--row-gap); 159 row-gap: props.get($quiet--row-gap);
188 } 160 }
189 161
190 @include bem.elem("card") { 162 @include bem.elem('card') {
191 flex: 0.1 0 auto; 163 flex: 0.1 0 auto;
192 inline-size: props.get($col-width); 164 inline-size: props.get($col-width);
193 } 165 }
194 166
195 @include media.media("<=#{$breakpoint}") { 167 @include media.media('<=#{$breakpoint}') {
196 flex-flow: column nowrap; 168 flex-flow: column nowrap;
197 169
198 @include bem.elem("card") { 170 @include bem.elem('card') {
199 inline-size: auto; 171 inline-size: auto;
200 } 172 }
201 } 173 }
202 } 174 }
203 } 175 }
204 176
205 @include bem.modifier("masonry") { 177 @include bem.modifier('masonry') {
206 display: block; 178 display: block;
207 columns: auto props.get(vars.$masonry--col-width); 179 columns: auto props.get(vars.$masonry--col-width);
208 column-gap: props.get(vars.$masonry--col-gap); 180 column-gap: props.get(vars.$masonry--col-gap);
209 181
210 @include bem.elem("card") { 182 @include bem.elem('card') {
211 margin-block-end: props.get(vars.$masonry--row-gap); 183 margin-block-end: props.get(vars.$masonry--row-gap);
212 break-inside: avoid; 184 break-inside: avoid;
213 } 185 }
214 186
215 @include bem.modifier("quiet") { 187 @include bem.modifier('quiet') {
216 @include bem.elem("card") { 188 @include bem.elem('card') {
217 margin-block-end: props.get(vars.$masonry--quiet--row-gap); 189 margin-block-end: props.get(vars.$masonry--quiet--row-gap);
218 } 190 }
219 } 191 }
@@ -222,34 +194,34 @@
222 @each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts { 194 @each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts {
223 @include bem.modifier($mod) { 195 @include bem.modifier($mod) {
224 flex-flow: row wrap; 196 flex-flow: row wrap;
225 gap: props.get($row-gap) props.get($col-gap); 197 gap: props.get($row-gap) props.get($col-gap);
226 198
227 @include bem.modifier("no-flush") { 199 @include bem.modifier('no-flush') {
228 &::after { 200 &::after {
229 display: block; 201 display: block;
230 flex: 1 0 auto; 202 flex: 1 0 auto;
231 inline-size: props.get($row-height); 203 inline-size: props.get($row-height);
232 content: ""; 204 content: '';
233 } 205 }
234 } 206 }
235 207
236 @include bem.elem("card") { 208 @include bem.elem('card') {
237 flex: 1 0 auto; 209 flex: 1 0 auto;
238 max-inline-size: 100%; 210 max-inline-size: 100%;
239 } 211 }
240 212
241 @include bem.elem("card-image") { 213 @include bem.elem('card-image') {
242 block-size: props.get($row-height); 214 block-size: props.get($row-height);
243 } 215 }
244 216
245 @include bem.modifier("quiet") { 217 @include bem.modifier('quiet') {
246 row-gap: props.get($quiet--row-gap); 218 row-gap: props.get($quiet--row-gap);
247 } 219 }
248 } 220 }
249 } 221 }
250 222
251 @include bem.modifier("aspect-5\\/4") { 223 @include bem.modifier('aspect-5\\/4') {
252 @include bem.elem("card-image") { 224 @include bem.elem('card-image') {
253 aspect-ratio: 5 / 4; 225 aspect-ratio: 5 / 4;
254 } 226 }
255 } 227 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 23:09:15 +0000