diff --git a/packages/core/src/components/switch/switch.scss b/packages/core/src/components/switch/switch.scss index a763080d7..6803525b6 100644 --- 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; }