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