_switch.scss in active_frontend-17.0.0

- old
+ new

@@ -5,20 +5,20 @@
 // Colors
 
 // Switch
 // ==================================================
 .switch {
-  border: 1px solid;
+  border: 2px solid;
   border-color: color(haze);
-  border-radius: border-radius(xl);
+  border-radius: border-radius(xxl);
   cursor: pointer;
   display: inline-block;
-  height: 28px;
+  height: 26px;
   overflow: hidden;
   position: relative;
   vertical-align: top;
-  width: 56px;
+  width: 54px;
 
   input[type='checkbox'],
   input[type='radio'] {
     left: -9999px;
     margin: 0;
@@ -40,24 +40,23 @@
     width: 200%;
   }
   .switch-handle {
     @include transition(right 0.125s ease-in-out);
     background: color(white);
-    border: 1px solid;
-    border-color: inherit;
-    border-radius: border-radius(xl);
+    border-radius: border-radius(xxl);
     box-sizing: border-box;
     display: block;
-    height: 28px;
+    height: 22px;
     left: initial;
     position: absolute;
-    right: calc(50% - 1px);
-    width: 28px;
+    right: calc(50% + 3px);
+    top: 2px;
+    width: 22px;
   }
   .switch-off,
   .switch-on {
-    border-radius: border-radius(xl);
+    border-radius: border-radius(xxl);
     bottom: 0;
     box-sizing: border-box;
     margin: 0;
     padding-top: 5px;
     position: absolute;
@@ -76,11 +75,11 @@
   }
 
   &.off {
     .switch-group { left: -100%; }
     .switch-handle {
-      left: calc(50% - 1px);
+      left: calc(50% + 3px);
       right: initial;
     }
   }
   &.disabled {
     cursor: not-allowed;
@@ -96,45 +95,45 @@
 }
 
 // Sizes
 // ==================================================
 .switch-size-l {
-  height: 36px;
-  width: 76px;
+  height: 34px;
+  width: 74px;
 
   .switch-handle {
-    height: 36px;
-    width: 36px;
+    height: 30px;
+    width: 30px;
   }
   .switch-off,
   .switch-on {
     font-size: text-size(l);
     padding-top: 7px;
   }
   .switch-off { padding-right: 14px; }
   .switch-on { padding-left: 14px; }
 }
 .switch-size-m {
-  height: 32px;
-  width: 66px;
+  height: 30px;
+  width: 64px;
 
   .switch-handle {
-    height: 32px;
-    width: 32px;
+    height: 26px;
+    width: 26px;
   }
   .switch-off,
   .switch-on { font-size: text-size(l); }
   .switch-off { padding-right: 12px; }
   .switch-on { padding-left: 12px; }
 }
 .switch-size-s {
-  height: 24px;
-  width: 48px;
+  height: 22px;
+  width: 46px;
 
   .switch-handle {
-    height: 24px;
-    width: 24px;
+    height: 18px;
+    width: 18px;
   }
   .switch-off,
   .switch-on { font-size: text-size(s); }
   .switch-off { padding-right: 8px; }
   .switch-on { padding-left: 8px; }
@@ -143,9 +142,9 @@
 // Colors
 // ==================================================
 @each $name, $color in $colors {
   .switch-color-#{$name} {
     background: color($name);
-    border-color: darkish-color($name);
+    border-color: color($name);
     color: text-color-on($name);
   }
 }