change form-switch colors

2 files changed, 16 insertions, 24 deletions

diff --git a/dist/spectre.css b/dist/spectre.css
index 93e1d6a..43cb851 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -986,6 +986,7 @@ textarea.form-input {
   line-height: 24px;
   vertical-align: top;
   border: 0.1rem solid #c5c5c5;
+  background-color: #c5c5c5;
   display: inline-block;
   width: 3rem;
   height: 1.8rem;
@@ -1001,28 +1002,22 @@ textarea.form-input {
 .form-switch input::after {
   content: "";
   display: block;
-  width: 1.4rem;
-  height: 1.4rem;
-  border-radius: .7rem;
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: .8rem;
   position: absolute;
-  top: .1rem;
-  left: .1rem;
-  background-color: #d2d2d2;
+  top: 0;
+  left: 0;
+  background-color: #fff;
   -webkit-transition: left .15s ease;
   transition: left .15s ease;
 }
-.form-switch input:hover {
-  border-color: #b8b8b8;
-}
-.form-switch input:hover::after {
-  background-color: #c2c2c2;
-}
 .form-switch input:checked {
   background-color: #5764C6;
   border-color: #5764C6;
 }
 .form-switch input:checked::after {
-  left: 1.3rem;
+  left: 1.2rem;
   background-color: #fff;
 }
 .label {
diff --git a/src/forms.less b/src/forms.less
index 756d74c..ba0dbfc 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -187,6 +187,7 @@
     line-height: 24px;
     vertical-align: top;
     border: .1rem solid @control-color;
+    background-color: @control-color;
     display: inline-block;
     width: 3rem;
     height: 1.8rem;
@@ -202,22 +203,18 @@
     &::after {
       content: "";
       display: block;
-      width: 1.4rem;
-      height: 1.4rem;
-      border-radius: .7rem;
+      width: 1.6rem;
+      height: 1.6rem;
+      border-radius: .8rem;
       position: absolute;
-      top: .1rem;
-      left: .1rem;
-      background-color: lighten(@control-color, 5%);
+      top: 0;
+      left: 0;
+      background-color: #fff;
       transition: left .15s ease;
     }
 
     &:hover {
-      border-color: darken(@control-color, 5%);
 
-      &::after {
-        background-color: darken(@control-color, 1%);
-      }
     }
 
     &:checked {
@@ -225,7 +222,7 @@
       border-color: @core-color;
 
       &::after {
-        left: 1.3rem;
+        left: 1.2rem;
         background-color: #fff;
       }
     }