add form-switch code

3 files changed, 150 insertions, 39 deletions

diff --git a/demo/index.html b/demo/index.html
index 8ea3f8d..04909b1 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -183,21 +183,28 @@
                     </select>
                 </div>
                 <div class="form-group">
-                    <label class="form-label" for="input-example-3">Message</label>
-                    <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
-                </div>
-                <div class="form-group">
-                    <label class="form-checkbox">
+                    <label class="form-switch">
                         <input type="checkbox">
-                        Remember me
+                        Send me emails with news and tips
                     </label>
                 </div>
                 <div class="form-group">
+                    <label class="form-label" for="input-example-3">Message</label>
+                    <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">Gender</label>
                     <label class="form-radio">
-                        <input type="radio" name="question" checked> Yes
+                        <input type="radio" name="gender"> Male
                     </label>
                     <label class="form-radio">
-                        <input type="radio" name="question"> No
+                        <input type="radio" name="gender" checked> Female
+                    </label>
+                </div>
+                <div class="form-group">
+                    <label class="form-checkbox">
+                        <input type="checkbox">
+                        Remember me
                     </label>
                 </div>
                 <div class="form-group">
diff --git a/dist/spectre.css b/dist/spectre.css
index b30184f..884ce1c 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -881,18 +881,17 @@ textarea.form-input {
 .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;
+  font-size: 1.4rem;
+  line-height: 2.4rem;
   vertical-align: top;
   border: 0.1rem solid #c5c5c5;
-  float: left;
   display: inline-block;
   width: 1.4rem;
   height: 1.4rem;
@@ -914,7 +913,7 @@ textarea.form-input {
   border-color: #5764C6;
 }
 .form-checkbox input {
-  border-radius: 2px;
+  border-radius: .2rem;
 }
 .form-checkbox input:checked::after {
   width: .6rem;
@@ -946,6 +945,56 @@ textarea.form-input {
   border-radius: .2rem;
   background-color: #fff;
 }
+.form-switch {
+  line-height: 1.8rem;
+  padding: .3rem 1.8rem .3rem 3.4rem;
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+}
+.form-switch input {
+  line-height: 24px;
+  vertical-align: top;
+  border: 0.1rem solid #c5c5c5;
+  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;
+}
+.form-switch input::after {
+  content: "";
+  display: block;
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: .7rem;
+  position: absolute;
+  top: .1rem;
+  left: .1rem;
+  background-color: #d2d2d2;
+  -webkit-transition: left .15s ease;
+  transition: left .15s ease;
+}
+.form-switch input:hover {
+  border-color: #9f9f9f;
+}
+.form-switch input:hover::after {
+  background-color: #b8b8b8;
+}
+.form-switch input:checked {
+  background-color: #5764C6;
+  border-color: #5764C6;
+}
+.form-switch input:checked::after {
+  left: 1.3rem;
+  background-color: #fff;
+}
 .label {
   display: inline-block;
   padding: .2rem .5rem;
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