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