From bff1ede794669feef4e766cb8d9ccf8fcf04ccbe Mon Sep 17 00:00:00 2001 From: mkrause Date: Thu, 7 Nov 2024 18:30:17 +0100 Subject: [PATCH] Improve Switch antialiasing a bit. --- src/components/forms/controls/Switch/Switch.module.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/forms/controls/Switch/Switch.module.scss b/src/components/forms/controls/Switch/Switch.module.scss index 44d747b..799d874 100644 --- 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 {