feat: add switch component

onfido · May 31, 2024 · 1260647 · 1260647
1 parent da3d6f6
commit 1260647
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/packages/core/src/components/switch/switch.scss b/packages/core/src/components/switch/switch.scss
@@ -44,7 +44,7 @@
     }
 
     input:checked + .ods-switch-indicator::before {
-      transform: translateX(70%);
+      transform: translateY(-50%) translateX(helpers.space(2));
     }
 
     &:not(.-disabled) input:checked + .ods-switch-indicator::before {
@@ -53,7 +53,8 @@
 
     input:checked + .ods-switch-indicator::after {
       opacity: 1;
-      transform: translateX(70%) rotateZ(45deg) scale(0.5);
+      transform: translateY(-50%) translateX(helpers.space(1)) rotateZ(45deg)
+        scale(0.5);
     }
 
     input:focus + .ods-switch-indicator {
@@ -101,7 +102,8 @@
       left: -$border-width;
       padding: helpers.space(1.25);
       position: absolute;
-      top: -$border-width;
+      top: 50%;
+      transform: translateY(-50%);
       transition: transform calc(var(--ods-transition-duration) * 2) ease;
     }
 
@@ -115,8 +117,8 @@
       opacity: 0;
       padding: helpers.space(1) helpers.space(0.5);
       position: relative;
-      top: helpers.space(-0.125);
-      transform: translateX(-100%) rotateZ(-45deg) scale(0);
+      top: 50%;
+      transform: translateY(-50%) translateX(-100%) rotateZ(-45deg) scale(0);
       transition: calc(var(--ods-transition-duration) * 2) ease;
       transition-property: opacity, transform;
     }