add form-switch code

1 files changed, 54 insertions, 5 deletions

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;