summaryrefslogtreecommitdiffstats
path: root/src/objects/_card.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_card.scss')
-rw-r--r--src/objects/_card.scss430
1 files changed, 232 insertions, 198 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index c87e676..ebab339 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -8,236 +8,270 @@
8@use 'card.vars' as vars; 8@use 'card.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.object('card') { 13 @include bem.object('card') {
14 position: relative; 14 position: relative;
15 display: flex; 15 display: flex;
16 flex-direction: column; 16 flex-direction: column;
17 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 17 background-color: props.get(vars.$bg-color);
18 background-color: props.get(vars.$bg-color); 18 border: props.get(vars.$border-width) solid transparent;
19 background-clip: content-box; 19 border-color: props.get(vars.$border-color);
20 border: props.get(vars.$key-focus--border-offset) solid transparent; 20 border-radius: props.get(vars.$rounding);
21 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 21 transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
22 transition: transform .2s;
23 22
24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
25 &:hover, 24 &:hover,
26 &:active, 25 &:active,
27 &:focus-visible { 26 &:focus-visible {
28 transform: translateY(props.get(vars.$hover--offset-b)); 27 background-color: props.get(vars.$hover--bg-color);
28 border-color: props.get(vars.$hover--border-color);
29 box-shadow: none;
30 transform: translateY(props.get(vars.$hover--offset-b));
31 }
29 32
30 @include bem.elem('body') { 33 &:focus-visible {
31 @include bem.modifier('hidden') { 34 margin: calc(-1 * props.get(vars.$key-focus--border-width));
32 visibility: visible; 35 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
33 opacity: 1; 36 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
34 transition: 37 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
35 opacity .2s ease, 38 box-shadow:
36 visibility .2s linear; 39 0 0 0
37 } 40 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
38 } 41 props.get(vars.$key-focus--outline-color);
39 } 42 transition: transform .2s;
43 }
44 }
40 45
41 &:focus-visible { 46 @include bem.modifier('borderless') {
42 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 47 border-color: props.get(vars.$bg-color);
43 box-shadow: 48 }
44 0
45 0
46 0
47 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
48 props.get(vars.$key-focus--outline-color);
49 }
50 }
51 49
52 @include bem.elem('avatar') { 50 @include bem.modifier('shadow') {
53 margin-block-start: props.get(vars.$pad-b); 51 box-shadow:
54 margin-inline-start: props.get(vars.$pad-i); 52 props.get(vars.$shadow-x)
55 } 53 props.get(vars.$shadow-y)
54 props.get(vars.$shadow-blur)
55 props.get(vars.$shadow-grow)
56 props.get(vars.$shadow-color);
56 57
57 @include bem.elem('image') { 58 @include bem.modifier('quiet') {
58 position: relative; 59 @include bem.elem('image') {
59 display: block; 60 box-shadow:
60 flex: 0 0 auto; 61 props.get(vars.$shadow-x)
61 inline-size: 100%; 62 props.get(vars.$shadow-y)
62 overflow: hidden; 63 props.get(vars.$shadow-blur)
63 object-fit: cover; 64 props.get(vars.$shadow-grow)
64 transition: background-color .2s, transform .2s, opacity .2s; 65 props.get(vars.$shadow-color);
66 }
67 }
68 }
65 69
66 &:first-child { 70 @include bem.elem('avatar') {
67 border-start-start-radius: props.get(vars.$rounding); 71 margin-block-start: props.get(vars.$pad-b);
68 border-start-end-radius: props.get(vars.$rounding); 72 margin-inline-start: props.get(vars.$pad-i);
69 } 73 }
70 74
71 &:last-child { 75 @include bem.elem('image') {
72 border-end-start-radius: props.get(vars.$rounding); 76 position: relative;
73 border-end-end-radius: props.get(vars.$rounding); 77 display: block;
74 } 78 flex: 0 0 auto;
79 inline-size: calc(100% + 2 * props.get(vars.$border-width));
80 margin: calc(-1 * props.get(vars.$border-width));
81 overflow: hidden;
82 object-fit: cover;
83 transition: background-color .2s, transform .2s, opacity .2s;
75 84
76 @include bem.next-elem('avatar') { 85 &:first-child {
77 margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); 86 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
78 } 87 border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
79 } 88 }
80 89
81 @include bem.elem('image-img') { 90 &:last-child {
82 display: block; 91 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
83 inline-size: 100%; 92 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
84 object-fit: cover; 93 }
85 }
86 94
87 @include bem.elem('image-overlay') { 95 @include bem.next-elem('avatar') {
88 position: absolute; 96 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
89 inset-block-end: 0; 97 }
90 inset-inline: 0; 98 }
91 z-index: 5;
92 padding-block: props.get(vars.$image-overlay--pad-b);
93 padding-inline: props.get(vars.$image-overlay--pad-i);
94 }
95 99
96 @include bem.elem('body') { 100 @include bem.elem('image-img') {
97 flex: 1 0 auto; 101 display: block;
98 padding-block: props.get(vars.$pad-b); 102 inline-size: 100%;
99 padding-inline: props.get(vars.$pad-i); 103 object-fit: cover;
104 }
100 105
101 &::before { 106 @include bem.elem('image-overlay') {
102 display: block; 107 position: absolute;
103 margin-block: -100em 100em; 108 inset-block-end: 0;
104 content: ''; 109 inset-inline: 0;
105 } 110 z-index: 5;
111 padding-block: props.get(vars.$image-overlay--pad-b);
112 padding-inline: props.get(vars.$image-overlay--pad-i);
113 }
106 114
107 @include bem.modifier('hidden') { 115 @include bem.elem('body') {
108 position: absolute; 116 flex: 1 0 auto;
109 inset-block-end: 0; 117 padding-block: props.get(vars.$pad-b);
110 inset-inline: 0; 118 padding-inline: props.get(vars.$pad-i);
111 z-index: 10;
112 visibility: hidden;
113 background-color: props.get(vars.$bg-color);
114 //border-end-start-radius: props.get(vars.$rounding);
115 //border-end-end-radius: props.get(vars.$rounding);
116 opacity: 0;
117 transition:
118 opacity .2s ease,
119 visibility 0s .2s linear;
120 119
121 @include bem.next-elem('image') { 120 &::before {
122 border-start-start-radius: props.get(vars.$rounding); 121 display: block;
123 border-start-end-radius: props.get(vars.$rounding); 122 margin-block: -100em 100em;
124 } 123 content: '';
125 } 124 }
126 } 125 }
127 126
128 @include bem.elem('content') { 127 @include bem.elem('content') {
129 margin-block-start: props.get(vars.$spacing); 128 margin-block-start: props.get(vars.$spacing);
130 } 129 }
131 130
132 @include bem.elem('footer') { 131 @include bem.elem('footer') {
133 flex: 0 0 auto; 132 flex: 0 0 auto;
134 padding-block: 0 props.get(vars.$pad-b); 133 padding-block: 0 props.get(vars.$pad-b);
135 padding-inline: props.get(vars.$pad-i); 134 padding-inline: props.get(vars.$pad-i);
136 margin-block-start: calc(-1 * props.get(vars.$pad-b)); 135 margin-block-start: calc(-1 * props.get(vars.$pad-b));
137 136
138 &::before { 137 &::before {
139 display: block; 138 display: block;
140 block-size: props.get(vars.$divider-width); 139 block-size: props.get(vars.$divider-width);
141 margin-block: props.get(vars.$spacing); 140 margin-block: props.get(vars.$spacing);
142 content: ''; 141 content: '';
143 background-color: props.get(vars.$divider-width); 142 background-color: props.get(vars.$divider-width);
144 } 143 }
145 } 144 }
146 145
147 @include bem.modifier('quiet') { 146 @include bem.modifier('quiet') {
148 margin-inline: 0; 147 margin-inline: 0;
149 background-color: transparent; 148 background-color: transparent;
150 border: 0; 149 border: 0;
150 box-shadow: none;
151 151
152 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 152 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
153 &:hover, 153 &:hover,
154 &:active, 154 &:active,
155 &:focus-visible { 155 &:focus-visible {
156 transform: none; 156 background-color: transparent;
157 transform: none;
157 158
158 @include bem.elem('image') { 159 @include bem.elem('image') {
159 background-color: props.get(vars.$quiet--hover--image-color); 160 background-color: props.get(vars.$quiet--hover--image-color);
160 opacity: .75; 161 opacity: .75;
161 transform: translateY(props.get(vars.$hover--offset-b)); 162 transform: translateY(props.get(vars.$hover--offset-b));
162 } 163 }
164 }
163 165
164 @include bem.elem('body') { 166 &:focus-visible {
165 @include bem.modifier('hidden') { 167 margin: 0;
166 transform: translateY(props.get(vars.$hover--offset-b)); 168 outline: none;
167 } 169 border: 0;
168 } 170 box-shadow: none;
169 }
170 171
171 &:focus-visible { 172 @include bem.elem('image') {
172 outline: none; 173 margin: calc(-1 * props.get(vars.$key-focus--border-width));
173 box-shadow: none; 174 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
175 background-color: props.get(vars.$quiet--hover--image-color);
176 border: props.get(vars.$key-focus--border-offset) solid transparent;
177 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
178 box-shadow:
179 0
180 0
181 0
182 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
183 props.get(vars.$key-focus--outline-color);
184 opacity: 1;
185 }
186 }
187 }
174 188
175 @include bem.elem('image') { 189 @include bem.elem('image') {
176 background-color: props.get(vars.$quiet--hover--image-color); 190 position: relative;
177 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 191 background-color: props.get(vars.$quiet--image-color);
178 box-shadow: 192 background-clip: padding-box;
179 0 193 border-radius: props.get(vars.$rounding);
180 0 194 }
181 0
182 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
183 props.get(vars.$key-focus--outline-color);
184 opacity: 1;
185 }
186 }
187 }
188 195
189 @include bem.elem('image') { 196 @include bem.elem('body') {
190 position: relative; 197 padding: 0;
191 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 198 padding-block-start: props.get(vars.$spacing);
192 background-color: props.get(vars.$quiet--image-color); 199 }
193 background-clip: padding-box;
194 border: props.get(vars.$key-focus--border-offset) solid transparent;
195 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
196 }
197 200
198 @include bem.elem('body') { 201 @include bem.elem('footer') {
199 padding: 0; 202 padding-inline: 0;
200 padding-block-start: props.get(vars.$spacing); 203 }
204 }
201 205
202 @include bem.modifier('hidden') { 206 @include bem.modifier('thumbnail') {
203 padding-block: props.get(vars.$pad-b); 207 @include bem.elem('image') {
204 padding-inline: props.get(vars.$pad-i); 208 border-radius: props.get(vars.$rounding);
205 } 209 }
206 }
207 210
208 @include bem.elem('footer') { 211 @include bem.elem('body') {
209 padding-inline: 0; 212 position: absolute;
210 } 213 inset-block-end: calc(-1 * props.get(vars.$border-width));
211 } 214 inset-inline: calc(-1 * props.get(vars.$border-width));
215 z-index: 10;
216 visibility: hidden;
217 background-color: props.get(vars.$hover--bg-color);
218 border-color: transparent;
219 border-style: solid;
220 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
221 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
222 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
223 opacity: 0;
224 transition:
225 border-color .2s ease,
226 opacity .2s ease,
227 visibility 0s .2s linear;
228 }
212 229
213 @include bem.modifier('horizontal') { 230 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
214 flex-direction: row; 231 &:hover,
215 align-items: center; 232 &:active,
233 &:focus-visible {
234 @include bem.elem('body') {
235 visibility: visible;
236 border-color: props.get(vars.$hover--border-color);
237 opacity: 1;
238 transition:
239 border-color .2s ease,
240 opacity .2s ease,
241 visibility .2s linear;
242 }
243 }
244 }
245 }
216 246
217 @include bem.elem('image') { 247 @include bem.modifier('horizontal') {
218 align-self: stretch; 248 flex-direction: row;
219 inline-size: auto; 249 align-items: center;
220 250
221 &:first-child { 251 @include bem.elem('image') {
222 border-start-end-radius: 0; 252 align-self: stretch;
223 border-end-start-radius: props.get(vars.$rounding); 253 inline-size: auto;
224 } 254
255 &:first-child {
256 border-start-end-radius: 0;
257 border-end-start-radius: props.get(vars.$rounding);
258 }
225 259
226 &:last-child { 260 &:last-child {
227 border-start-end-radius: props.get(vars.$rounding); 261 border-start-end-radius: props.get(vars.$rounding);
228 border-end-start-radius: 0; 262 border-end-start-radius: 0;
229 } 263 }
230 } 264 }
231 265
232 @include bem.elem('body') { 266 @include bem.elem('body') {
233 flex: 0 0 auto; 267 flex: 0 0 auto;
234 268
235 @include bem.modifier('main') { 269 @include bem.modifier('main') {
236 flex-shrink: 1; 270 flex-shrink: 1;
237 inline-size: 100%; 271 inline-size: 100%;
238 min-inline-size: 0; 272 min-inline-size: 0;
239 } 273 }
240 } 274 }
241 } 275 }
242 } 276 }
243} 277}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-09-15 15:56:06 +0000