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