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