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