add form-switch code

1 files changed, 81 insertions, 26 deletions

diff --git a/src/forms.less b/src/forms.less
index afaf1d8..98b0624 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -107,39 +107,38 @@
 .form-checkbox,
 .form-radio {
   line-height: 1.8rem;
-  padding: .3rem 1.8rem .3rem 1.8rem;
+  padding: .3rem 1.8rem;
   cursor: pointer;
   display: inline-block;
   position: relative;
-}
-.form-checkbox input,
-.form-radio input {
-  font-size: 14px;
-  line-height: 24px;
-  vertical-align: top;
-  border: .1rem solid @control-color;
-  float: left;
-  display: inline-block;
-  width: 1.4rem;
-  height: 1.4rem;
-  padding: 0;
-  position: absolute;
-  top: .5rem;
-  left: 0;
-  cursor: pointer;
-  outline: none;
-  -webkit-appearance: none;
 
-  &:hover {
-    border-color: darken(@control-color, 15%);
-  }
-  &:checked {
-    background-color: @core-color;
-    border-color: @core-color;
+  input {
+    font-size: 1.4rem;
+    line-height: 2.4rem;
+    vertical-align: top;
+    border: .1rem solid @control-color;
+    display: inline-block;
+    width: 1.4rem;
+    height: 1.4rem;
+    padding: 0;
+    position: absolute;
+    top: .5rem;
+    left: 0;
+    cursor: pointer;
+    outline: none;
+    -webkit-appearance: none;
+
+    &:hover {
+      border-color: darken(@control-color, 15%);
+    }
+    &:checked {
+      background-color: @core-color;
+      border-color: @core-color;
+    }
   }
 }
 .form-checkbox input {
-  border-radius: 2px;
+  border-radius: .2rem;
 
   &:checked {
     &::after {
@@ -175,4 +174,60 @@
       background-color: #fff;
     }
   }
+}
+// Form element: Switch
+.form-switch {
+  line-height: 1.8rem;
+  padding: .3rem 1.8rem .3rem 3.4rem;
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+
+  input {
+    line-height: 24px;
+    vertical-align: top;
+    border: .1rem solid @control-color;
+    display: inline-block;
+    width: 3rem;
+    height: 1.8rem;
+    padding: 0;
+    border-radius: .9rem;
+    position: absolute;
+    top: .3rem;
+    left: 0;
+    cursor: pointer;
+    outline: none;
+    -webkit-appearance: none;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 1.4rem;
+      height: 1.4rem;
+      border-radius: .7rem;
+      position: absolute;
+      top: .1rem;
+      left: .1rem;
+      background-color: lighten(@control-color, 5%);
+      transition: left .15s ease;
+    }
+
+    &:hover {
+      border-color: darken(@control-color, 15%);
+
+      &::after {
+        background-color: darken(@control-color, 5%);
+      }
+    }
+
+    &:checked {
+      background-color: @core-color;
+      border-color: @core-color;
+
+      &::after {
+        left: 1.3rem;
+        background-color: #fff;
+      }
+    }
+  }
 }
\ No newline at end of file