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