_switch.scss in active_frontend-16.0.0

- old
+ new

@@ -6,11 +6,11 @@
 
 // Switch
 // ==================================================
 .switch {
   border: 1px solid;
-  border-color: color(dark-haze);
+  border-color: color(haze);
   border-radius: border-radius(xl);
   cursor: pointer;
   display: inline-block;
   height: 28px;
   overflow: hidden;
@@ -46,10 +46,11 @@
     border-color: inherit;
     border-radius: border-radius(xl);
     box-sizing: border-box;
     display: block;
     height: 28px;
+    left: initial;
     position: absolute;
     right: calc(50% - 1px);
     width: 28px;
   }
   .switch-off,
@@ -74,19 +75,22 @@
     right: 50%;
   }
 
   &.off {
     .switch-group { left: -100%; }
-    .switch-handle { right: calc(50% - 27px); }
+    .switch-handle {
+      left: calc(50% - 1px);
+      right: initial;
+    }
   }
   &.disabled {
     cursor: not-allowed;
 
     * { cursor: not-allowed; }
   }
   &.dark {
-    .switch-handle { background: color(light-black); }
+    .switch-handle { background: color(light-slate); }
   }
   &.light {
     .switch-handle { background: color(haze); }
   }
 }
@@ -106,14 +110,10 @@
     font-size: text-size(l);
     padding-top: 7px;
   }
   .switch-off { padding-right: 14px; }
   .switch-on { padding-left: 14px; }
-
-  &.off {
-    .switch-handle { right: calc(50% - 35px); }
-  }
 }
 .switch-size-m {
   height: 32px;
   width: 66px;
 
@@ -126,14 +126,10 @@
     font-size: text-size(l);
     padding-top: 5px;
   }
   .switch-off { padding-right: 12px; }
   .switch-on { padding-left: 12px; }
-
-  &.off {
-    .switch-handle { right: calc(50% - 31px); }
-  }
 }
 .switch-size-s {
   height: 24px;
   width: 48px;
 
@@ -146,13 +142,9 @@
     font-size: text-size(s);
     padding-top: 5px;
   }
   .switch-off { padding-right: 8px; }
   .switch-on { padding-left: 8px; }
-
-  &.off {
-    .switch-handle { right: calc(50% - 23px); }
-  }
 }
 
 // Colors
 // ==================================================
 @each $name, $color in $colors {