Switch to tab indentation

author: Volpeon <git@volpeon.ink> 2025-08-06 16:40:56 +0200
committer: Volpeon <git@volpeon.ink> 2025-08-06 16:40:56 +0200
commit: 41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree: 015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/layouts/_card-list.scss
parent: Fix button font size (diff)
download: iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip
1 files changed, 123 insertions, 123 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index cca6e72..aedbfd0 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -8,151 +8,151 @@
 @use 'card-list.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.layout('card-list') {
+        @include bem.layout('card-list') {
-        display:        flex;
+                display:        flex;
-        flex-direction: column;
+                flex-direction: column;
-        gap:            props.get(vars.$row-gap);
+                gap:            props.get(vars.$row-gap);
-        @include bem.modifier('merge') {
+                @include bem.modifier('merge') {
-            position:         relative;
+                        position:         relative;
-            gap:              calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
+                        gap:              calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
-            padding:          props.get(vars.$merge-padding);
+                        padding:          props.get(vars.$merge-padding);
-            background-color: props.get(vars.$card-bg-color);
+                        background-color: props.get(vars.$card-bg-color);
-            border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
+                        border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
-            border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
+                        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
-            @include bem.elem('card') {
+                        @include bem.elem('card') {
-                &:not(:last-child) {
+                                &:not(:last-child) {
-                    position:                relative;
+                                        position:                relative;
-                    border-end-start-radius: 0;
+                                        border-end-start-radius: 0;
-                    border-end-end-radius:   0;
+                                        border-end-end-radius:   0;
-                    &::after {
+                                        &::after {
-                        position:          absolute;
+                                                position:          absolute;
-                        inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
+                                                inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
-                        inset-inline:      calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
+                                                inset-inline:      calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
-                        content:           '';
+                                                display:           block;
-                        display:           block;
+                                                block-size:        props.get(vars.$border-width);
-                        block-size:        props.get(vars.$border-width);
+                                                content:           '';
-                        background-color:  props.get(vars.$border-color);
+                                                background-color:  props.get(vars.$border-color);
-                    }
+                                        }
-                }
+                                }
-                &:hover,
+                                &:hover,
-                &:active,
+                                &:active,
-                &:focus-visible {
+                                &:focus-visible {
-                    transform:  none;
+                                        transform:  none;
-                }
+                                }
-                @include bem.next-twin-elem {
+                                @include bem.next-twin-elem {
-                    border-start-start-radius: 0;
+                                        border-start-start-radius: 0;
-                    border-start-end-radius:   0;
+                                        border-start-end-radius:   0;
-                }
+                                }
-            }
+                        }
-            @include bem.modifier('borderless') {
+                        @include bem.modifier('borderless') {
-                border-color: props.get(vars.$card-bg-color);
+                                border-color: props.get(vars.$card-bg-color);
-                @include bem.elem('card') {
+                                @include bem.elem('card') {
-                    &:not(:last-child) {
+                                        &:not(:last-child) {
-                        &::after {
+                                                &::after {
-                            inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
+                                                        inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-            @include bem.modifier('shadow') {
+                        @include bem.modifier('shadow') {
-                box-shadow:
+                                box-shadow:
-                    props.get(vars.$shadow-x)
+                                        props.get(vars.$shadow-x)
-                    props.get(vars.$shadow-y)
+                                        props.get(vars.$shadow-y)
-                    props.get(vars.$shadow-blur)
+                                        props.get(vars.$shadow-blur)
-                    props.get(vars.$shadow-grow)
+                                        props.get(vars.$shadow-grow)
-                    props.get(vars.$shadow-color);
+                                        props.get(vars.$shadow-color);
-            }
+                        }
-        }
+                }
-        @include bem.modifier('quiet') {
+                @include bem.modifier('quiet') {
-            row-gap: props.get(vars.$quiet--row-gap);
+                        row-gap: props.get(vars.$quiet--row-gap);
-        }
+                }
-        @include bem.modifier('grid') {
+                @include bem.modifier('grid') {
-            display:               grid;
+                        display:               grid;
-            grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
+                        grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
-            gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
+                        gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
-            @include bem.modifier('quiet') {
+                        @include bem.modifier('quiet') {
-                row-gap: props.get(vars.$grid--quiet--row-gap);
+                                row-gap: props.get(vars.$grid--quiet--row-gap);
-            }
+                        }
-        }
+                }
-        @include bem.modifier('grid-sm') {
+                @include bem.modifier('grid-sm') {
-            display:               grid;
+                        display:               grid;
-            grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
+                        grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
-            gap:                   props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
+                        gap:                   props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
-            @include bem.modifier("grid-sm") {
+                        @include bem.modifier('grid-sm') {
-                @include media.media("<=md") {
+                                @include media.media('<=md') {
-                    display: flex;
+                                        display: flex;
-                    gap:     props.get(vars.$row-gap);
+                                        gap:     props.get(vars.$row-gap);
-                }
+                                }
-            }
+                        }
-            @include bem.modifier('quiet') {
+                        @include bem.modifier('quiet') {
-                row-gap: props.get(vars.$grid-sm--quiet--row-gap);
+                                row-gap: props.get(vars.$grid-sm--quiet--row-gap);
-            }
+                        }
-        }
+                }
-        @include bem.modifier('masonry') {
+                @include bem.modifier('masonry') {
-            display:    block;
+                        display:    block;
-            columns:    auto props.get(vars.$masonry--col-width);
+                        columns:    auto props.get(vars.$masonry--col-width);
-            column-gap: props.get(vars.$masonry--col-gap);
+                        column-gap: props.get(vars.$masonry--col-gap);
-            @include bem.elem('card') {
+                        @include bem.elem('card') {
-                margin-block-end: props.get(vars.$masonry--row-gap);
+                                margin-block-end: props.get(vars.$masonry--row-gap);
-                break-inside:     avoid;
+                                break-inside:     avoid;
-            }
+                        }
-            @include bem.modifier('quiet') {
+                        @include bem.modifier('quiet') {
-                @include bem.elem('card') {
+                                @include bem.elem('card') {
-                    margin-block-end: props.get(vars.$masonry--quiet--row-gap);
+                                        margin-block-end: props.get(vars.$masonry--quiet--row-gap);
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('masonry-h') {
+                @include bem.modifier('masonry-h') {
-            flex-flow: row wrap;
+                        flex-flow: row wrap;
-            gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
+                        gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
-            @include bem.modifier('no-flush') {
+                        @include bem.modifier('no-flush') {
-                &::after {
+                                &::after {
-                    display:     block;
+                                        display:     block;
-                    flex:        1 0 auto;
+                                        flex:        1 0 auto;
-                    inline-size: props.get(vars.$masonry-h--row-height);
+                                        inline-size: props.get(vars.$masonry-h--row-height);
-                    content:     '';
+                                        content:     '';
-                }
+                                }
-            }
+                        }
-            @include bem.elem('card') {
+                        @include bem.elem('card') {
-                flex:            1 0 auto;
+                                flex:            1 0 auto;
-                max-inline-size: 100%;
+                                max-inline-size: 100%;
-            }
+                        }
-            @include bem.elem('card-image') {
+                        @include bem.elem('card-image') {
-                block-size: props.get(vars.$masonry-h--row-height);
+                                block-size: props.get(vars.$masonry-h--row-height);
-            }
+                        }
-            @include bem.modifier('quiet') {
+                        @include bem.modifier('quiet') {
-                row-gap: props.get(vars.$masonry-h--quiet--row-gap);
+                                row-gap: props.get(vars.$masonry-h--quiet--row-gap);
-            }
+                        }
-        }
+                }
-        @include bem.modifier('aspect-5\\/4') {
+                @include bem.modifier('aspect-5\\/4') {
-            @include bem.elem('card-image') {
+                        @include bem.elem('card-image') {
-                aspect-ratio: 5 / 4;
+                                aspect-ratio: 5 / 4;
-            }
+                        }
-        }
+                }
-    }
+        }
 }
author	Volpeon <git@volpeon.ink>	2025-08-06 16:40:56 +0200
committer	Volpeon <git@volpeon.ink>	2025-08-06 16:40:56 +0200
commit	41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree	015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/layouts/_card-list.scss
parent	Fix button font size (diff)
download	iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2 iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index cca6e72..aedbfd0 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss
@@ -8,151 +8,151 @@
8	@use 'card-list.vars' as vars;	8	@use 'card-list.vars' as vars;
9		9
10	@mixin styles {	10	@mixin styles {
11	@include materialize-at-root(meta.module-variables('vars'));	11	@include materialize-at-root(meta.module-variables('vars'));
12		12
13	@include bem.layout('card-list') {	13	@include bem.layout('card-list') {
14	display: flex;	14	display: flex;
15	flex-direction: column;	15	flex-direction: column;
16	gap: props.get(vars.$row-gap);	16	gap: props.get(vars.$row-gap);
17		17
18	@include bem.modifier('merge') {	18	@include bem.modifier('merge') {
19	position: relative;	19	position: relative;
20	gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));	20	gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
21	padding: props.get(vars.$merge-padding);	21	padding: props.get(vars.$merge-padding);
22	background-color: props.get(vars.$card-bg-color);	22	background-color: props.get(vars.$card-bg-color);
23	border: props.get(vars.$border-width) solid props.get(vars.$border-color);	23	border: props.get(vars.$border-width) solid props.get(vars.$border-color);
24	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));	24	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
25		25
26	@include bem.elem('card') {	26	@include bem.elem('card') {
27	&:not(:last-child) {	27	&:not(:last-child) {
28	position: relative;	28	position: relative;
29	border-end-start-radius: 0;	29	border-end-start-radius: 0;
30	border-end-end-radius: 0;	30	border-end-end-radius: 0;
31		31
32	&::after {	32	&::after {
33	position: absolute;	33	position: absolute;
34	inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));	34	inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
35	inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));	35	inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
36	content: '';	36	display: block;
37	display: block;	37	block-size: props.get(vars.$border-width);
38	block-size: props.get(vars.$border-width);	38	content: '';
39	background-color: props.get(vars.$border-color);	39	background-color: props.get(vars.$border-color);
40	}	40	}
41	}	41	}
42		42
43	&:hover,	43	&:hover,
44	&:active,	44	&:active,
45	&:focus-visible {	45	&:focus-visible {
46	transform: none;	46	transform: none;
47	}	47	}
48		48
49	@include bem.next-twin-elem {	49	@include bem.next-twin-elem {
50	border-start-start-radius: 0;	50	border-start-start-radius: 0;
51	border-start-end-radius: 0;	51	border-start-end-radius: 0;
52	}	52	}
53	}	53	}
54		54
55	@include bem.modifier('borderless') {	55	@include bem.modifier('borderless') {
56	border-color: props.get(vars.$card-bg-color);	56	border-color: props.get(vars.$card-bg-color);
57		57
58	@include bem.elem('card') {	58	@include bem.elem('card') {
59	&:not(:last-child) {	59	&:not(:last-child) {
60	&::after {	60	&::after {
61	inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));	61	inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
62	}	62	}
63	}	63	}
64	}	64	}
65	}	65	}
66		66
67	@include bem.modifier('shadow') {	67	@include bem.modifier('shadow') {
68	box-shadow:	68	box-shadow:
69	props.get(vars.$shadow-x)	69	props.get(vars.$shadow-x)
70	props.get(vars.$shadow-y)	70	props.get(vars.$shadow-y)
71	props.get(vars.$shadow-blur)	71	props.get(vars.$shadow-blur)
72	props.get(vars.$shadow-grow)	72	props.get(vars.$shadow-grow)
73	props.get(vars.$shadow-color);	73	props.get(vars.$shadow-color);
74	}	74	}
75	}	75	}
76		76
77	@include bem.modifier('quiet') {	77	@include bem.modifier('quiet') {
78	row-gap: props.get(vars.$quiet--row-gap);	78	row-gap: props.get(vars.$quiet--row-gap);
79	}	79	}
80		80
81	@include bem.modifier('grid') {	81	@include bem.modifier('grid') {
82	display: grid;	82	display: grid;
83	grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));	83	grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
84	gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);	84	gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
85		85
86	@include bem.modifier('quiet') {	86	@include bem.modifier('quiet') {
87	row-gap: props.get(vars.$grid--quiet--row-gap);	87	row-gap: props.get(vars.$grid--quiet--row-gap);
88	}	88	}
89	}	89	}
90		90
91	@include bem.modifier('grid-sm') {	91	@include bem.modifier('grid-sm') {
92	display: grid;	92	display: grid;
93	grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));	93	grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
94	gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);	94	gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
95		95
96	@include bem.modifier("grid-sm") {	96	@include bem.modifier('grid-sm') {
97	@include media.media("<=md") {	97	@include media.media('<=md') {
98	display: flex;	98	display: flex;
99	gap: props.get(vars.$row-gap);	99	gap: props.get(vars.$row-gap);
100	}	100	}
101	}	101	}
102		102
103	@include bem.modifier('quiet') {	103	@include bem.modifier('quiet') {
104	row-gap: props.get(vars.$grid-sm--quiet--row-gap);	104	row-gap: props.get(vars.$grid-sm--quiet--row-gap);
105	}	105	}
106	}	106	}
107		107
108	@include bem.modifier('masonry') {	108	@include bem.modifier('masonry') {
109	display: block;	109	display: block;
110	columns: auto props.get(vars.$masonry--col-width);	110	columns: auto props.get(vars.$masonry--col-width);
111	column-gap: props.get(vars.$masonry--col-gap);	111	column-gap: props.get(vars.$masonry--col-gap);
112		112
113	@include bem.elem('card') {	113	@include bem.elem('card') {
114	margin-block-end: props.get(vars.$masonry--row-gap);	114	margin-block-end: props.get(vars.$masonry--row-gap);
115	break-inside: avoid;	115	break-inside: avoid;
116	}	116	}
117		117
118	@include bem.modifier('quiet') {	118	@include bem.modifier('quiet') {
119	@include bem.elem('card') {	119	@include bem.elem('card') {
120	margin-block-end: props.get(vars.$masonry--quiet--row-gap);	120	margin-block-end: props.get(vars.$masonry--quiet--row-gap);
121	}	121	}
122	}	122	}
123	}	123	}
124		124
125	@include bem.modifier('masonry-h') {	125	@include bem.modifier('masonry-h') {
126	flex-flow: row wrap;	126	flex-flow: row wrap;
127	gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);	127	gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
128		128
129	@include bem.modifier('no-flush') {	129	@include bem.modifier('no-flush') {
130	&::after {	130	&::after {
131	display: block;	131	display: block;
132	flex: 1 0 auto;	132	flex: 1 0 auto;
133	inline-size: props.get(vars.$masonry-h--row-height);	133	inline-size: props.get(vars.$masonry-h--row-height);
134	content: '';	134	content: '';
135	}	135	}
136	}	136	}
137		137
138	@include bem.elem('card') {	138	@include bem.elem('card') {
139	flex: 1 0 auto;	139	flex: 1 0 auto;
140	max-inline-size: 100%;	140	max-inline-size: 100%;
141	}	141	}
142		142
143	@include bem.elem('card-image') {	143	@include bem.elem('card-image') {
144	block-size: props.get(vars.$masonry-h--row-height);	144	block-size: props.get(vars.$masonry-h--row-height);
145	}	145	}
146		146
147	@include bem.modifier('quiet') {	147	@include bem.modifier('quiet') {
148	row-gap: props.get(vars.$masonry-h--quiet--row-gap);	148	row-gap: props.get(vars.$masonry-h--quiet--row-gap);
149	}	149	}
150	}	150	}
151		151
152	@include bem.modifier('aspect-5\\/4') {	152	@include bem.modifier('aspect-5\\/4') {
153	@include bem.elem('card-image') {	153	@include bem.elem('card-image') {
154	aspect-ratio: 5 / 4;	154	aspect-ratio: 5 / 4;
155	}	155	}
156	}	156	}
157	}	157	}
158	}	158	}