Merge pull request #16 from fortanix/mkrause/241107-add-switch-component

Improve Switch antialiasing
fortanix · Nov 8, 2024 · 8fb56a5 · 8fb56a5
2 parents 72a796c + bff1ede
commit 8fb56a5
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/components/forms/controls/Switch/Switch.module.scss b/src/components/forms/controls/Switch/Switch.module.scss
@@ -34,13 +34,13 @@
     background:
       // https://css-tricks.com/drawing-images-with-css-gradients
       linear-gradient($col, $col) 50% 50% / calc(var(--w) - var(--h)) calc(var(--h)) no-repeat,
-      radial-gradient(circle at var(--r), $col calc(var(--h) / 2 - $a), transparent calc(var(--h) / 2)),
-      radial-gradient(circle at calc(100% - var(--r)), $col calc(var(--h) / 2 - $a), transparent calc(var(--h) / 2));
+      radial-gradient(circle at var(--r), $col calc(var(--h) / 2 - ($a/2)), transparent calc(var(--h) / 2 + ($a/2))),
+      radial-gradient(circle at calc(100% - var(--r)), $col calc(var(--h) / 2 - ($a/2)), transparent calc(var(--h) / 2 + ($a/2)));
     // Render the thumb
     border-image:
       radial-gradient(circle at var(--bk-switch-pos),
-        var(--bk-switch-thumb-color) calc(var(--r) - $a),
-        transparent var(--r)
+        var(--bk-switch-thumb-color) calc(var(--r) - ($a/2)),
+        transparent calc(var(--r) + ($a/2))
       ) fill 0 / 1 / 0;
 
     &:checked {