Browse Source

Switch: made minor styling tweaks to switch to align to 4px grid (#16593)

Patrick O'Carroll 6 years ago
parent
commit
5f1b2691a3
1 changed files with 4 additions and 4 deletions
  1. 4 4
      public/sass/components/_switch.scss

+ 4 - 4
public/sass/components/_switch.scss

@@ -25,7 +25,7 @@ gf-form-switch[disabled] {
 .gf-form-switch {
   display: flex;
   position: relative;
-  width: 60px;
+  width: 56px;
   height: $input-height;
   background: $switch-bg;
   border: 1px solid $input-border-color;
@@ -52,7 +52,7 @@ gf-form-switch[disabled] {
   background: $switch-slider-off-bg;
   border-radius: 8px;
   height: 16px;
-  width: 29px;
+  width: 32px;
   display: block;
   position: relative;
 
@@ -61,7 +61,7 @@ gf-form-switch[disabled] {
     content: '';
     height: 12px;
     width: 12px;
-    left: 1px;
+    left: 2px;
     top: 2px;
     background: $switch-slider-color;
     transition: 0.4s;
@@ -75,7 +75,7 @@ input:checked + .gf-form-switch__slider {
 }
 
 input:checked + .gf-form-switch__slider::before {
-  transform: translateX(14px);
+  transform: translateX(16px);
 }
 
 .gf-form-checkbox {