summaryrefslogtreecommitdiffstats
path: root/src_old/objects/_card.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-19 19:37:18 +0200
committerVolpeon <git@volpeon.ink>2024-10-19 19:37:18 +0200
commit4f472e44dbd2ffa1e4e10c63b7ab74105d8e894b (patch)
tree287b995743e5e4e4437b955df9f8cad8d2598ab0 /src_old/objects/_card.scss
parentRefactoring complete (diff)
downloadiro-design-4f472e44dbd2ffa1e4e10c63b7ab74105d8e894b.tar.gz
iro-design-4f472e44dbd2ffa1e4e10c63b7ab74105d8e894b.tar.bz2
iro-design-4f472e44dbd2ffa1e4e10c63b7ab74105d8e894b.zip
Remove old code
Diffstat (limited to 'src_old/objects/_card.scss')
-rw-r--r--src_old/objects/_card.scss170
1 files changed, 0 insertions, 170 deletions
diff --git a/src_old/objects/_card.scss b/src_old/objects/_card.scss
deleted file mode 100644
index 650ec3f..0000000
--- a/src_old/objects/_card.scss
+++ /dev/null
@@ -1,170 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('card') {
5 @include iro.props-store((
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
13 --hover: (
14 --offset-b: calc(-1 * fn.global-dim(--size --65)),
15 ),
16
17 --key-focus: (
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;
45 margin: calc(-1 * fn.dim(--key-focus --border));
46 transition: transform .2s;
47 border: fn.dim(--key-focus --border-offset) solid transparent;
48 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
49 background-color: fn.color(--bg);
50 background-clip: content-box;
51
52 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
53 &:hover,
54 &:active,
55 &:focus-visible {
56 transform: translateY(fn.dim(--hover --offset-b));
57 }
58
59 &:focus-visible {
60 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
61 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
62 }
63 }
64
65 @include iro.bem-elem('avatar') {
66 margin-block-start: fn.dim(--pad-b);
67 margin-inline-start: fn.dim(--pad-i);
68 }
69
70 @include iro.bem-elem('image') {
71 display: block;
72 inline-size: 100%;
73 object-fit: cover;
74 transition: transform .2s, opacity .2s;
75
76 &:first-child {
77 border-start-start-radius: fn.dim(--rounding);
78 border-start-end-radius: fn.dim(--rounding);
79 }
80
81 &:last-child {
82 border-end-start-radius: fn.dim(--rounding);
83 border-end-end-radius: fn.dim(--rounding);
84 }
85
86 @include iro.bem-next-elem('avatar') {
87 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
88 }
89 }
90
91 @include iro.bem-elem('body') {
92 padding-block: fn.dim(--pad-b);
93 padding-inline: fn.dim(--pad-i);
94
95 &::before {
96 content: '';
97 display: block;
98 margin-block: -100em 100em;
99 }
100 }
101
102 @include iro.bem-elem('content') {
103 margin-block-start: fn.dim(--spacing);
104 }
105
106 @include iro.bem-elem('footer') {
107 padding-block: 0 fn.dim(--pad-b);
108 padding-inline: fn.dim(--pad-i);
109 margin-block-start: calc(-1 * fn.dim(--pad-b));
110
111 &::before {
112 content: '';
113 display: block;
114 block-size: fn.dim(--divider);
115 margin-block: fn.dim(--spacing);
116 background-color: fn.color(--divider);
117 }
118 }
119
120 @include iro.bem-modifier('quiet') {
121 position: relative;
122 border: 0;
123 background-color: transparent;
124
125 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
126 &:hover,
127 &:active,
128 &:focus-visible {
129 transform: none;
130
131 @include iro.bem-elem('image') {
132 transform: translateY(fn.dim(--hover --offset-b));
133 opacity: .75;
134 background-color: fn.color(--quiet --hover --image);
135 }
136 }
137
138 &:focus-visible {
139 outline: none;
140 box-shadow: none;
141
142 @include iro.bem-elem('image') {
143 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
144 opacity: 1;
145 background-color: fn.color(--quiet --hover --image);
146 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
147 }
148 }
149 }
150
151 @include iro.bem-elem('image') {
152 position: relative;
153 margin: calc(-1 * fn.dim(--key-focus --border));
154 border: fn.dim(--key-focus --border-offset) solid transparent;
155 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
156 background-color: fn.color(--quiet --image);
157 background-clip: padding-box;
158 }
159
160 @include iro.bem-elem('body') {
161 padding: 0;
162 padding-block-start: fn.dim(--spacing);
163 }
164
165 @include iro.bem-elem('footer') {
166 padding-inline: 0;
167 }
168 }
169 }
170}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 10:21:02 +0000