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