summaryrefslogtreecommitdiffstats
path: root/src/objects/_checkbox.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-18 18:08:24 +0200
committerVolpeon <git@volpeon.ink>2024-10-18 18:08:24 +0200
commit365c56edcc36b5b92902bac01ce44b43d01e8685 (patch)
tree644611792591a76e605068d0c9e230fad6a633e7 /src/objects/_checkbox.scss
parentRevamped variable management (diff)
downloadiro-design-365c56edcc36b5b92902bac01ce44b43d01e8685.tar.gz
iro-design-365c56edcc36b5b92902bac01ce44b43d01e8685.tar.bz2
iro-design-365c56edcc36b5b92902bac01ce44b43d01e8685.zip
Refactoring
Diffstat (limited to 'src/objects/_checkbox.scss')
-rw-r--r--src/objects/_checkbox.scss261
1 files changed, 261 insertions, 0 deletions
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
new file mode 100644
index 0000000..8d82cd5
--- /dev/null
+++ b/src/objects/_checkbox.scss
@@ -0,0 +1,261 @@
1@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('checkbox') {
5 @include iro.props-store((
6 --dims: (
7 --size: fn.global-dim(--size --175),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-i: fn.global-dim(--size --65),
11 --pad-b: fn.global-dim(--size --65),
12 --rounding: fn.global-dim(--rounding),
13 --spacing-sibling: fn.global-dim(--size --300),
14
15 --key-focus: (
16 --border: fn.global-dim(--key-focus --border),
17 --border-offset: fn.global-dim(--key-focus --border-offset),
18 --outline: fn.global-dim(--key-focus --outline),
19 ),
20 ),
21 --colors: (
22 --box-border: fn.global-color(--text-mute-more),
23 --box-bg: fn.global-color(--base --75),
24
25 --hover: (
26 --label: fn.global-color(--heading),
27 --box-border: fn.global-color(--text-mute),
28 ),
29 --accent: (
30 --box-border: fn.global-color(--accent --900),
31
32 --hover: (
33 --box-border: fn.global-color(--accent --1000),
34 ),
35 ),
36 --disabled: (
37 --label: fn.global-color(--text-disabled),
38 --box-border: fn.global-color(--border-strong),
39 --box-bg: fn.global-color(--base --75),
40 ),
41 --key-focus: (
42 --label: fn.global-color(--focus --text),
43 --border: fn.global-color(--focus --border),
44 --outline: fn.global-color(--focus --outline),
45 ),
46 ),
47 ));
48
49 @include iro.bem-object(iro.props-namespace()) {
50 position: relative;
51 display: inline-block;
52 padding-block: fn.dim(--pad-b);
53 padding-inline: fn.dim(--pad-i);
54 margin-inline:
55 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
56 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset));
57
58 @include iro.bem-elem('box') {
59 position: relative;
60 display: inline-block;
61 flex: 0 0 auto;
62 inline-size: fn.dim(--size);
63 block-size: fn.dim(--size);
64 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset));
65 vertical-align: top;
66 background-color: fn.color(--box-border);
67 background-clip: padding-box;
68 border: fn.dim(--key-focus --border-offset) solid transparent;
69 border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset));
70
71 &::before,
72 &::after {
73 position: absolute;
74 display: block;
75 content: '';
76 }
77
78 &::before {
79 inset-block-start: fn.dim(--border);
80 inset-inline-start: fn.dim(--border);
81 z-index: 2;
82 inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border));
83 block-size: calc(fn.dim(--size) - 2 * fn.dim(--border));
84 background-color: fn.color(--box-bg);
85 transition: transform .2s ease;
86 }
87
88 &::after {
89 inset-block-start: calc(.5 * fn.dim(--size) - 1px);
90 inset-inline-start: calc(1.5 * fn.dim(--border));
91 z-index: 3;
92 box-sizing: border-box;
93 inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border));
94 block-size: 0;
95 border-color: fn.color(--box-bg);
96 border-style: solid;
97 border-radius: 2px;
98 transition: transform .2s ease;
99 transform: scale(0);
100 border-block-width: 0 2px;
101 border-inline-width: 0 2px;
102 }
103 }
104
105 @include iro.bem-elem('check-icon') {
106 position: absolute;
107 inset-block-start: calc(1 * fn.dim(--border));
108 inset-inline-start: calc(1 * fn.dim(--border));
109 z-index: 2;
110 display: block;
111 inline-size: calc(100% - 2 * fn.dim(--border));
112 block-size: calc(100% - 2 * fn.dim(--border));
113 margin: 0;
114 color: fn.color(--box-bg);
115 stroke-width: iro.fn-px-to-rem(3px);
116 transition: transform .2s ease;
117 transform: scale(0);
118 transform-origin: 40% 90%;
119 }
120
121 @include iro.bem-elem('label') {
122 margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
123 }
124
125 @include iro.bem-elem('native') {
126 position: absolute;
127 inset-block-start: 0;
128 inset-inline-start: 0;
129 z-index: -1;
130 inline-size: 100%;
131 block-size: 100%;
132 padding: 0;
133 margin: 0;
134 overflow: hidden;
135 appearance: none;
136 border-radius: fn.dim(--rounding);
137
138 &:hover,
139 &:focus-visible {
140 @include iro.bem-sibling-elem('label') {
141 color: fn.color(--hover --label);
142 }
143
144 @include iro.bem-sibling-elem('box') {
145 background-color: fn.color(--hover --box-border);
146 }
147 }
148
149 &:checked {
150 @include iro.bem-sibling-elem('box') {
151 &::before {
152 transform: scale(0);
153 }
154
155 @include iro.bem-elem('check-icon') {
156 transform: scale(1);
157 }
158 }
159 }
160
161 &:indeterminate {
162 @include iro.bem-sibling-elem('box') {
163 &::before {
164 transform: scale(0);
165 }
166
167 &::after {
168 transform: scale(1);
169 }
170
171 @include iro.bem-elem('check-icon') {
172 transform: scale(0);
173 }
174 }
175 }
176
177 &:disabled {
178 @include iro.bem-sibling-elem('label') {
179 color: fn.color(--disabled --label);
180 }
181
182 @include iro.bem-sibling-elem('box') {
183 background-color: fn.color(--disabled --box-border);
184
185 &::before {
186 background-color: fn.color(--disabled --box-bg);
187 }
188 }
189 }
190
191 &:focus-visible {
192 @include iro.bem-sibling-elem('label') {
193 color: fn.color(--key-focus --label);
194 }
195
196 @include iro.bem-sibling-elem('box') {
197 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
198 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
199 }
200 }
201 }
202
203 @include iro.bem-modifier('standalone') {
204 @include iro.bem-elem('box') {
205 margin-block-start: 0;
206 }
207 }
208
209 @include iro.bem-modifier('accent') {
210 @include iro.bem-elem('native') {
211 &:checked {
212 @include iro.bem-sibling-elem('box') {
213 background-color: fn.color(--accent --box-border);
214 }
215
216 &:hover,
217 &:focus-visible {
218 @include iro.bem-sibling-elem('box') {
219 background-color: fn.color(--accent --hover --box-border);
220 }
221 }
222 }
223
224 &:indeterminate {
225 @include iro.bem-sibling-elem('box') {
226 background-color: fn.color(--accent --box-border);
227 }
228
229 &:hover,
230 &:focus-visible {
231 @include iro.bem-sibling-elem('box') {
232 background-color: fn.color(--accent --hover --box-border);
233 }
234 }
235 }
236
237 &:disabled {
238 @include iro.bem-sibling-elem('box') {
239 background-color: fn.color(--disabled --box-border);
240
241 &::before {
242 background-color: fn.color(--disabled --box-bg);
243 }
244 }
245
246 &:checked {
247 @include iro.bem-sibling-elem('box') {
248 background-color: fn.color(--disabled --box-border);
249 }
250 }
251
252 &:indeterminate {
253 @include iro.bem-sibling-elem('box') {
254 background-color: fn.color(--disabled --box-border);
255 }
256 }
257 }
258 }
259 }
260 }
261}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 07:41:55 +0000