summaryrefslogtreecommitdiffstats
path: root/src/layouts/_card-list.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-17 16:45:00 +0200
committerVolpeon <git@volpeon.ink>2024-10-17 16:45:00 +0200
commit50f6acc739f24bfa2ca080d08e90d82f8fa83543 (patch)
tree404dbe97d34b7e4fc3293c8e6a8c92d9941ac51e /src/layouts/_card-list.scss
parentColors (diff)
downloadiro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.tar.gz
iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.tar.bz2
iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.zip
Revamped variable management
Diffstat (limited to 'src/layouts/_card-list.scss')
-rw-r--r--src/layouts/_card-list.scss96
1 files changed, 0 insertions, 96 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
deleted file mode 100644
index 65b6a66..0000000
--- a/src/layouts/_card-list.scss
+++ /dev/null
@@ -1,96 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use 'include-media/dist/include-media' as media;
4
5@include iro.props-namespace('card-list') {
6 @include iro.props-store((
7 --dims: (
8 --row-gap: fn.global-dim(--size --800),
9 --col-gap: fn.global-dim(--size --400),
10
11 --grid: (
12 --row-gap: fn.global-dim(--size --800),
13 --col-gap: fn.global-dim(--size --400),
14 --col-width: fn.global-dim(--size --3200),
15 ),
16 --masonry: (
17 --row-gap: fn.global-dim(--size --800),
18 --col-gap: fn.global-dim(--size --400),
19 --col-width: fn.global-dim(--size --3200),
20 ),
21 --masonry-h: (
22 --row-gap: fn.global-dim(--size --800),
23 --col-gap: fn.global-dim(--size --400),
24 --row-height: fn.global-dim(--size --3200),
25 )
26 ),
27 --colors: (
28 --border: fn.global-color(--border),
29 ),
30 ));
31
32 @include iro.bem-layout(iro.props-namespace()) {
33 display: flex;
34 flex-direction: column;
35 gap: fn.dim(--row-gap) fn.dim(--col-gap);
36
37 @include iro.bem-modifier('grid') {
38 display: grid;
39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
40 gap: fn.dim(--grid --col-gap);
41
42 @include iro.bem-modifier('quiet') {
43 row-gap: fn.dim(--grid --row-gap);
44 }
45 }
46
47 @include iro.bem-modifier('masonry') {
48 display: block;
49 columns: auto fn.dim(--masonry --col-width);
50 column-gap: fn.dim(--masonry --col-gap);
51
52 @include iro.bem-elem('card') {
53 margin-block-end: 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-block-end: fn.dim(--masonry --row-gap);
60 }
61 }
62 }
63
64 @include iro.bem-modifier('masonry-h') {
65 flex-flow: row wrap;
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 }
75
76 @include iro.bem-elem('card') {
77 flex: 1 0 auto;
78 max-inline-size: 100%;
79 }
80
81 @include iro.bem-elem('card-image') {
82 block-size: fn.dim(--masonry-h --row-height);
83 }
84
85 @include iro.bem-modifier('quiet') {
86 row-gap: fn.dim(--masonry-h --row-gap);
87 }
88 }
89
90 @include iro.bem-modifier('aspect-5\\/4') {
91 @include iro.bem-elem('card-image') {
92 aspect-ratio: 5 / 4;
93 }
94 }
95 }
96}