fix native checkbox icon sizing

This commit is contained in:
lindsaym-fa
2025-10-23 14:38:12 -04:00
parent 14c1f5806d
commit e4b883ff3a

View File

@@ -874,7 +874,6 @@
input[type='radio'] {
appearance: none;
position: relative;
flex: 0 0 auto;
align-items: center;
justify-content: center;
@@ -922,20 +921,17 @@
&:checked::after,
&:indeterminate::after {
position: absolute;
width: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
height: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
content: '';
background-color: currentColor;
width: var(--wa-form-control-toggle-size);
height: var(--wa-form-control-toggle-size);
scale: var(--checked-icon-scale);
background-color: currentColor;
}
&:checked::after {
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
center no-repeat;
}