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.scss276
1 files changed, 177 insertions, 99 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index f56a96c..c87e676 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,132 +1,170 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5@use 'avatar.vars' as avatar;
3 6
4@include iro.props-namespace('card') { 7@forward 'card.vars';
5 @include iro.props-store(( 8@use 'card.vars' as vars;
6 --dims: (
7 --border: fn.global-dim(--border --thin),
8 --divider: fn.global-dim(--border --thin),
9 --pad-i: fn.global-dim(--size --300),
10 --pad-b: fn.global-dim(--size --250),
11 --spacing: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding),
13 9
14 --key-focus: ( 10@mixin styles {
15 --border: fn.global-dim(--key-focus --border), 11 @include materialize-at-root(meta.module-variables('vars'));
16 --border-offset: fn.global-dim(--key-focus --border-offset),
17 --outline: fn.global-dim(--key-focus --outline),
18 ),
19 ),
20 --colors: (
21 --bg: fn.global-color(--bg-l2),
22 --border: fn.global-color(--border-mute),
23 --divider: fn.global-color(--border-mute),
24 12
25 --hover: ( 13 @include bem.object('card') {
26 --border: fn.global-color(--border), 14 position: relative;
27 ), 15 display: flex;
16 flex-direction: column;
17 margin: calc(-1 * props.get(vars.$key-focus--border-width));
18 background-color: props.get(vars.$bg-color);
19 background-clip: content-box;
20 border: props.get(vars.$key-focus--border-offset) solid transparent;
21 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
22 transition: transform .2s;
28 23
29 --key-focus: ( 24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
30 --label: fn.global-color(--focus --text),
31 --border: fn.global-color(--focus --border),
32 --outline: fn.global-color(--focus --outline),
33 ),
34
35 --quiet: (
36 --image: fn.global-color(--bg-base),
37
38 --hover: (
39 --image: fn.global-color(--border),
40 ),
41 )
42 ),
43 ));
44
45 @include iro.bem-object(iro.props-namespace()) {
46 display: block;
47 border: fn.dim(--border) solid fn.color(--border);
48 border-radius: fn.dim(--rounding);
49 background-color: fn.color(--bg);
50
51 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
52 &:hover, 25 &:hover,
53 &:focus-visible, 26 &:active,
54 &:active { 27 &:focus-visible {
55 border-color: fn.color(--hover --border); 28 transform: translateY(props.get(vars.$hover--offset-b));
29
30 @include bem.elem('body') {
31 @include bem.modifier('hidden') {
32 visibility: visible;
33 opacity: 1;
34 transition:
35 opacity .2s ease,
36 visibility .2s linear;
37 }
38 }
56 } 39 }
57 40
58 &:focus-visible { 41 &:focus-visible {
59 border-color: fn.color(--key-focus --border); 42 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
60 outline: fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border)); 43 box-shadow:
61 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 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);
62 } 49 }
63 } 50 }
64 51
65 @include iro.bem-elem('avatar') { 52 @include bem.elem('avatar') {
66 margin-block-start: fn.dim(--pad-b); 53 margin-block-start: props.get(vars.$pad-b);
67 margin-inline-start: fn.dim(--pad-i); 54 margin-inline-start: props.get(vars.$pad-i);
68 } 55 }
69 56
70 @include iro.bem-elem('image') { 57 @include bem.elem('image') {
71 display: block; 58 position: relative;
72 inline-size: 100%; 59 display: block;
73 object-fit: cover; 60 flex: 0 0 auto;
61 inline-size: 100%;
62 overflow: hidden;
63 object-fit: cover;
64 transition: background-color .2s, transform .2s, opacity .2s;
74 65
75 &:first-child { 66 &:first-child {
76 border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 67 border-start-start-radius: props.get(vars.$rounding);
77 border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 68 border-start-end-radius: props.get(vars.$rounding);
78 } 69 }
79 70
80 &:last-child { 71 &:last-child {
81 border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 72 border-end-start-radius: props.get(vars.$rounding);
82 border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 73 border-end-end-radius: props.get(vars.$rounding);
83 } 74 }
84 75
85 @include iro.bem-next-elem('avatar') { 76 @include bem.next-elem('avatar') {
86 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); 77 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
87 } 78 }
88 } 79 }
89 80
90 @include iro.bem-elem('body') { 81 @include bem.elem('image-img') {
91 padding-block: fn.dim(--pad-b); 82 display: block;
92 padding-inline: fn.dim(--pad-i); 83 inline-size: 100%;
84 object-fit: cover;
85 }
86
87 @include bem.elem('image-overlay') {
88 position: absolute;
89 inset-block-end: 0;
90 inset-inline: 0;
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
96 @include bem.elem('body') {
97 flex: 1 0 auto;
98 padding-block: props.get(vars.$pad-b);
99 padding-inline: props.get(vars.$pad-i);
93 100
94 &::before { 101 &::before {
95 content: '';
96 display: block; 102 display: block;
97 margin-block: -100em 100em; 103 margin-block: -100em 100em;
104 content: '';
105 }
106
107 @include bem.modifier('hidden') {
108 position: absolute;
109 inset-block-end: 0;
110 inset-inline: 0;
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
121 @include bem.next-elem('image') {
122 border-start-start-radius: props.get(vars.$rounding);
123 border-start-end-radius: props.get(vars.$rounding);
124 }
98 } 125 }
99 } 126 }
100 127
101 @include iro.bem-elem('content') { 128 @include bem.elem('content') {
102 margin-block-start: fn.dim(--spacing); 129 margin-block-start: props.get(vars.$spacing);
103 } 130 }
104 131
105 @include iro.bem-elem('footer') { 132 @include bem.elem('footer') {
106 padding-block: 0 fn.dim(--pad-b); 133 flex: 0 0 auto;
107 padding-inline: fn.dim(--pad-i); 134 padding-block: 0 props.get(vars.$pad-b);
108 margin-block-start: calc(-1 * fn.dim(--pad-b)); 135 padding-inline: props.get(vars.$pad-i);
136 margin-block-start: calc(-1 * props.get(vars.$pad-b));
109 137
110 &::before { 138 &::before {
111 content: '';
112 display: block; 139 display: block;
113 block-size: fn.dim(--divider); 140 block-size: props.get(vars.$divider-width);
114 margin-block: fn.dim(--spacing); 141 margin-block: props.get(vars.$spacing);
115 background-color: fn.color(--divider); 142 content: '';
143 background-color: props.get(vars.$divider-width);
116 } 144 }
117 } 145 }
118 146
119 @include iro.bem-modifier('quiet') { 147 @include bem.modifier('quiet') {
120 position: relative; 148 margin-inline: 0;
121 border: 0;
122 background-color: transparent; 149 background-color: transparent;
150 border: 0;
123 151
124 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 152 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
125 &:hover, 153 &:hover,
126 &:active { 154 &:active,
127 @include iro.bem-elem('image') { 155 &:focus-visible {
156 transform: none;
157
158 @include bem.elem('image') {
159 background-color: props.get(vars.$quiet--hover--image-color);
128 opacity: .75; 160 opacity: .75;
129 background-color: fn.color(--quiet --hover --image); 161 transform: translateY(props.get(vars.$hover--offset-b));
162 }
163
164 @include bem.elem('body') {
165 @include bem.modifier('hidden') {
166 transform: translateY(props.get(vars.$hover--offset-b));
167 }
130 } 168 }
131 } 169 }
132 170
@@ -134,32 +172,72 @@
134 outline: none; 172 outline: none;
135 box-shadow: none; 173 box-shadow: none;
136 174
137 @include iro.bem-elem('image') { 175 @include bem.elem('image') {
138 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 176 background-color: props.get(vars.$quiet--hover--image-color);
177 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
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);
139 opacity: 1; 184 opacity: 1;
140 background-color: fn.color(--quiet --hover --image);
141 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
142 } 185 }
143 } 186 }
144 } 187 }
145 188
146 @include iro.bem-elem('image') { 189 @include bem.elem('image') {
147 position: relative; 190 position: relative;
148 margin: calc(-1 * fn.dim(--key-focus --border)); 191 margin: calc(-1 * props.get(vars.$key-focus--border-width));
149 border: fn.dim(--key-focus --border-offset) solid transparent; 192 background-color: props.get(vars.$quiet--image-color);
150 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
151 background-color: fn.color(--quiet --image);
152 background-clip: padding-box; 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));
153 } 196 }
154 197
155 @include iro.bem-elem('body') { 198 @include bem.elem('body') {
156 padding: 0; 199 padding: 0;
157 padding-block-start: fn.dim(--spacing); 200 padding-block-start: props.get(vars.$spacing);
201
202 @include bem.modifier('hidden') {
203 padding-block: props.get(vars.$pad-b);
204 padding-inline: props.get(vars.$pad-i);
205 }
158 } 206 }
159 207
160 @include iro.bem-elem('footer') { 208 @include bem.elem('footer') {
161 padding-inline: 0; 209 padding-inline: 0;
162 } 210 }
163 } 211 }
212
213 @include bem.modifier('horizontal') {
214 flex-direction: row;
215 align-items: center;
216
217 @include bem.elem('image') {
218 align-self: stretch;
219 inline-size: auto;
220
221 &:first-child {
222 border-start-end-radius: 0;
223 border-end-start-radius: props.get(vars.$rounding);
224 }
225
226 &:last-child {
227 border-start-end-radius: props.get(vars.$rounding);
228 border-end-start-radius: 0;
229 }
230 }
231
232 @include bem.elem('body') {
233 flex: 0 0 auto;
234
235 @include bem.modifier('main') {
236 flex-shrink: 1;
237 inline-size: 100%;
238 min-inline-size: 0;
239 }
240 }
241 }
164 } 242 }
165} 243}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-01 07:45:03 +0000