Improve Switch antialiasing a bit.

fortanix · Nov 7, 2024 · bff1ede · bff1ede
1 parent 1d64f7b
commit bff1ede
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 {