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.scss246
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 @@
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}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-08-12 08:28:19 +0000