Improved radio and switch positioning

2 files changed, 5 insertions, 14 deletions

diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index b27766e..f5f3632 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -52,7 +52,6 @@
     
         @include iro.bem-elem('circle') {
             display:          block;
-            position:         relative;
             box-sizing:       border-box;
             flex:             0 0 auto;
             width:            fn.dim(--diameter);
@@ -64,13 +63,11 @@
             &::after {
                 content:          '';
                 display:          block;
-                position:         absolute;
-                z-index:          10;
-                top:              50%;
+                position:         relative;
+                top:              fn.dim(--border-width);
                 left:             fn.dim(--border-width);
                 width:            calc(fn.dim(--diameter) - 2 * fn.dim(--border-width));
                 height:           calc(fn.dim(--diameter) - 2 * fn.dim(--border-width));
-                transform:        translateY(-50%);
                 transition:       transform .2s ease;
                 border-radius:    fn.dim(--diameter);
                 background-color: fn.color(--circle-bg);
@@ -106,7 +103,7 @@
             &:checked {
                 @include iro.bem-sibling-elem('circle') {
                     &::after {
-                        transform: translateY(-50%) scale(.44);
+                        transform: scale(.44);
                     }
                 }
             }
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index cc215a5..4417297 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -56,7 +56,6 @@
     
         @include iro.bem-elem('indicator') {
             display:          block;
-            position:         relative;
             box-sizing:       border-box;
             flex:             0 0 auto;
             width:            fn.dim(--width);
@@ -69,14 +68,9 @@
             &::after {
                 content:          '';
                 display:          block;
-                position:         absolute;
-                z-index:          10;
-                top:              50%;
-                left:             0;
                 width:            calc(fn.dim(--height) - 2 * fn.dim(--border-width));
                 height:           calc(fn.dim(--height) - 2 * fn.dim(--border-width));
-                transform:        translateY(-50%);
-                transition:       left .2s ease;
+                transition:       transform .2s ease;
                 border:           fn.dim(--border-width) solid fn.color(--handle-border);
                 border-radius:    fn.dim(--width);
                 background-color: fn.color(--handle-bg);
@@ -116,7 +110,7 @@
                     background-color: fn.color(--handle-border);
     
                     &::after {
-                        left:         calc(fn.dim(--width) - fn.dim(--height) + .5px);
+                        transform:    translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
                         border-color: fn.color(--handle-border);
                     }
                 }