summaryrefslogtreecommitdiffstats
path: root/src/objects/_card.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-19 08:51:30 +0200
committerVolpeon <git@volpeon.ink>2024-10-19 08:51:30 +0200
commit6448b40f6224b271acb6010cac0672dec4755341 (patch)
treee0f103be526e9d19b244b1ab2d9ff95d99a1419e /src/objects/_card.scss
parentUpdate (diff)
downloadiro-design-6448b40f6224b271acb6010cac0672dec4755341.tar.gz
iro-design-6448b40f6224b271acb6010cac0672dec4755341.tar.bz2
iro-design-6448b40f6224b271acb6010cac0672dec4755341.zip
Update
Diffstat (limited to 'src/objects/_card.scss')
-rw-r--r--src/objects/_card.scss123
1 files changed, 51 insertions, 72 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index cc9afc9..25e68d2 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,70 +1,44 @@
1@use 'sass:meta';
1@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn; 3@use '../props';
4@use 'avatar.vars' as avatar;
3 5
4@include iro.props-namespace('card') { 6@forward 'card.vars';
5 @include iro.props-store(( 7@use 'card.vars' as vars;
6 --dims: (
7 --divider: fn.global-dim(--border --thin),
8 --pad-i: fn.global-dim(--size --300),
9 --pad-b: fn.global-dim(--size --250),
10 --spacing: fn.global-dim(--size --200),
11 --rounding: fn.global-dim(--rounding),
12 8
13 --hover: ( 9@mixin styles {
14 --offset-b: calc(-1 * fn.global-dim(--size --65)), 10 @include props.materialize(meta.module-variables('vars'));
15 ),
16 11
17 --key-focus: ( 12 @include iro.bem-object('card') {
18 --border: fn.global-dim(--key-focus --border),
19 --border-offset: fn.global-dim(--key-focus --border-offset),
20 --outline: fn.global-dim(--key-focus --outline),
21 ),
22 ),
23 --colors: (
24 --bg: fn.global-color(--bg-l2),
25 --divider: fn.global-color(--border-mute),
26
27 --key-focus: (
28 --label: fn.global-color(--focus --text),
29 --border: fn.global-color(--focus --border),
30 --outline: fn.global-color(--focus --outline),
31 ),
32
33 --quiet: (
34 --image: fn.global-color(--bg-base),
35
36 --hover: (
37 --image: fn.global-color(--border),
38 ),
39 )
40 ),
41 ));
42
43 @include iro.bem-object(iro.props-namespace()) {
44 display: block; 13 display: block;
45 margin: calc(-1 * fn.dim(--key-focus --border)); 14 margin: calc(-1 * props.get(vars.$key-focus--border-width));
46 background-color: fn.color(--bg); 15 background-color: props.get(vars.$bg-color);
47 background-clip: content-box; 16 background-clip: content-box;
48 border: fn.dim(--key-focus --border-offset) solid transparent; 17 border: props.get(vars.$key-focus--border-offset) solid transparent;
49 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); 18 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
50 transition: transform .2s; 19 transition: transform .2s;
51 20
52 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 21 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
53 &:hover, 22 &:hover,
54 &:active, 23 &:active,
55 &:focus-visible { 24 &:focus-visible {
56 transform: translateY(fn.dim(--hover --offset-b)); 25 transform: translateY(props.get(vars.$hover--offset-b));
57 } 26 }
58 27
59 &:focus-visible { 28 &:focus-visible {
60 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 29 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
61 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 30 box-shadow:
31 0
32 0
33 0
34 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
35 props.get(vars.$key-focus--outline-color);
62 } 36 }
63 } 37 }
64 38
65 @include iro.bem-elem('avatar') { 39 @include iro.bem-elem('avatar') {
66 margin-block-start: fn.dim(--pad-b); 40 margin-block-start: props.get(vars.$pad-b);
67 margin-inline-start: fn.dim(--pad-i); 41 margin-inline-start: props.get(vars.$pad-i);
68 } 42 }
69 43
70 @include iro.bem-elem('image') { 44 @include iro.bem-elem('image') {
@@ -74,23 +48,23 @@
74 transition: transform .2s, opacity .2s; 48 transition: transform .2s, opacity .2s;
75 49
76 &:first-child { 50 &:first-child {
77 border-start-start-radius: fn.dim(--rounding); 51 border-start-start-radius: props.get(vars.$rounding);
78 border-start-end-radius: fn.dim(--rounding); 52 border-start-end-radius: props.get(vars.$rounding);
79 } 53 }
80 54
81 &:last-child { 55 &:last-child {
82 border-end-start-radius: fn.dim(--rounding); 56 border-end-start-radius: props.get(vars.$rounding);
83 border-end-end-radius: fn.dim(--rounding); 57 border-end-end-radius: props.get(vars.$rounding);
84 } 58 }
85 59
86 @include iro.bem-next-elem('avatar') { 60 @include iro.bem-next-elem('avatar') {
87 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); 61 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
88 } 62 }
89 } 63 }
90 64
91 @include iro.bem-elem('body') { 65 @include iro.bem-elem('body') {
92 padding-block: fn.dim(--pad-b); 66 padding-block: props.get(vars.$pad-b);
93 padding-inline: fn.dim(--pad-i); 67 padding-inline: props.get(vars.$pad-i);
94 68
95 &::before { 69 &::before {
96 display: block; 70 display: block;
@@ -100,20 +74,20 @@
100 } 74 }
101 75
102 @include iro.bem-elem('content') { 76 @include iro.bem-elem('content') {
103 margin-block-start: fn.dim(--spacing); 77 margin-block-start: props.get(vars.$spacing);
104 } 78 }
105 79
106 @include iro.bem-elem('footer') { 80 @include iro.bem-elem('footer') {
107 padding-block: 0 fn.dim(--pad-b); 81 padding-block: 0 props.get(vars.$pad-b);
108 padding-inline: fn.dim(--pad-i); 82 padding-inline: props.get(vars.$pad-i);
109 margin-block-start: calc(-1 * fn.dim(--pad-b)); 83 margin-block-start: calc(-1 * props.get(vars.$pad-b));
110 84
111 &::before { 85 &::before {
112 display: block; 86 display: block;
113 block-size: fn.dim(--divider); 87 block-size: props.get(vars.$divider-width);
114 margin-block: fn.dim(--spacing); 88 margin-block: props.get(vars.$spacing);
115 content: ''; 89 content: '';
116 background-color: fn.color(--divider); 90 background-color: props.get(vars.$divider-width);
117 } 91 }
118 } 92 }
119 93
@@ -129,9 +103,9 @@
129 transform: none; 103 transform: none;
130 104
131 @include iro.bem-elem('image') { 105 @include iro.bem-elem('image') {
132 background-color: fn.color(--quiet --hover --image); 106 background-color: props.get(vars.$quiet--hover--image-color);
133 opacity: .75; 107 opacity: .75;
134 transform: translateY(fn.dim(--hover --offset-b)); 108 transform: translateY(props.get(vars.$hover--offset-b));
135 } 109 }
136 } 110 }
137 111
@@ -140,9 +114,14 @@
140 box-shadow: none; 114 box-shadow: none;
141 115
142 @include iro.bem-elem('image') { 116 @include iro.bem-elem('image') {
143 background-color: fn.color(--quiet --hover --image); 117 background-color: props.get(vars.$quiet--hover--image-color);
144 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 118 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
145 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 119 box-shadow:
120 0
121 0
122 0
123 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
124 props.get(vars.$key-focus--outline-width);
146 opacity: 1; 125 opacity: 1;
147 } 126 }
148 } 127 }
@@ -150,16 +129,16 @@
150 129
151 @include iro.bem-elem('image') { 130 @include iro.bem-elem('image') {
152 position: relative; 131 position: relative;
153 margin: calc(-1 * fn.dim(--key-focus --border)); 132 margin: calc(-1 * props.get(vars.$key-focus--border-width));
154 background-color: fn.color(--quiet --image); 133 background-color: props.get(vars.$quiet--image-color);
155 background-clip: padding-box; 134 background-clip: padding-box;
156 border: fn.dim(--key-focus --border-offset) solid transparent; 135 border: props.get(vars.$key-focus--border-offset) solid transparent;
157 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); 136 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
158 } 137 }
159 138
160 @include iro.bem-elem('body') { 139 @include iro.bem-elem('body') {
161 padding: 0; 140 padding: 0;
162 padding-block-start: fn.dim(--spacing); 141 padding-block-start: props.get(vars.$spacing);
163 } 142 }
164 143
165 @include iro.bem-elem('footer') { 144 @include iro.bem-elem('footer') {
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2025-12-17 09:33:52 +0000