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