Cleanup Forms code

1 files changed, 50 insertions, 58 deletions

diff --git a/docs/css/spectre.css b/docs/css/spectre.css
index dd9e87c..5cc3017 100644
--- a/docs/css/spectre.css
+++ b/docs/css/spectre.css
@@ -597,11 +597,13 @@ abbr[title] {
   padding: 1.5rem 1rem;
 }
 .table th {
-  border-bottom: .2rem solid #333;
+  border-bottom: .2rem solid #666;
   padding: 1.5rem 1rem;
 }
 .btn {
   -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
   background: #fff;
   border: .1rem solid #5764c6;
   border-radius: .2rem;
@@ -766,6 +768,16 @@ abbr[title] {
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
+.form-label {
+  display: block;
+  padding: .6rem 0;
+}
+.form-label.label-sm {
+  padding: .2rem 0;
+}
+.form-label.label-lg {
+  padding: 1rem 0;
+}
 .form-input {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -792,7 +804,7 @@ abbr[title] {
 .form-input.input-sm {
   font-size: 1.2rem;
   height: 2.4rem;
-  padding: .1rem .6rem;
+  padding: .1rem .8rem;
 }
 .form-input.input-lg {
   font-size: 1.6rem;
@@ -806,7 +818,6 @@ abbr[title] {
 }
 textarea.form-input {
   height: auto;
-  line-height: 2rem;
 }
 .form-input[type=file] {
   height: auto;
@@ -823,11 +834,6 @@ textarea.form-input {
 .is-danger + .form-input-hint {
   color: #e85600;
 }
-.form-label {
-  display: block;
-  line-height: 1.6rem;
-  margin-bottom: .5rem;
-}
 .form-select {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -889,6 +895,13 @@ textarea.form-input {
 .form-select.is-danger:focus {
   box-shadow: 0 0 0 .2rem rgba(232, 86, 0, .15);
 }
+.form-checkbox,
+.form-radio,
+.form-switch {
+  display: inline-block;
+  line-height: 2rem;
+  position: relative;
+}
 .form-checkbox input,
 .form-radio input,
 .form-switch input {
@@ -905,35 +918,32 @@ textarea.form-input {
   border-color: #5764c6;
   box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15);
 }
-.form-checkbox,
-.form-radio {
-  display: inline-block;
-  line-height: 1.8rem;
-  padding: .3rem 2rem;
-  position: relative;
+.form-checkbox input:checked + .form-icon,
+.form-radio input:checked + .form-icon,
+.form-switch input:checked + .form-icon {
+  background: #5764c6;
+  border-color: #5764c6;
 }
 .form-checkbox .form-icon,
-.form-radio .form-icon {
+.form-radio .form-icon,
+.form-switch .form-icon {
   border: .1rem solid #ccc;
   cursor: pointer;
   display: inline-block;
-  font-size: 1.4rem;
+  position: absolute;
+  transition: all .2s ease;
+}
+.form-checkbox,
+.form-radio {
+  padding: .2rem 2rem;
+}
+.form-checkbox .form-icon,
+.form-radio .form-icon {
   height: 1.4rem;
   left: 0;
-  line-height: 2.4rem;
-  outline: none;
-  padding: 0;
-  position: absolute;
   top: .5rem;
-  transition: all .2s ease;
-  vertical-align: top;
   width: 1.4rem;
 }
-.form-checkbox input:checked + .form-icon,
-.form-radio input:checked + .form-icon {
-  background: #5764c6;
-  border-color: #5764c6;
-}
 .form-checkbox input:active + .form-icon,
 .form-radio input:active + .form-icon {
   background: #f0f0f0;
@@ -941,7 +951,7 @@ textarea.form-input {
 .form-checkbox .form-icon {
   border-radius: .2rem;
 }
-.form-checkbox input:checked + .form-icon::after {
+.form-checkbox input:checked + .form-icon::before {
   background-clip: padding-box;
   border: .2rem solid #fff;
   border-left-width: 0;
@@ -962,7 +972,7 @@ textarea.form-input {
   background: #5764c6;
   border-color: #5764c6;
 }
-.form-checkbox input:indeterminate + .form-icon::after {
+.form-checkbox input:indeterminate + .form-icon::before {
   background: #fff;
   content: "";
   height: .2rem;
@@ -976,42 +986,32 @@ textarea.form-input {
 .form-radio .form-icon {
   border-radius: .7rem;
 }
-.form-radio input:checked + .form-icon::after {
+.form-radio input:checked + .form-icon::before {
   background: #fff;
   border-radius: .2rem;
   content: "";
   height: .4rem;
   left: 50%;
-  margin-left: -.2rem;
-  margin-top: -.2rem;
   position: absolute;
   top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
   width: .4rem;
 }
 .form-switch {
-  display: inline-block;
-  line-height: 2rem;
   padding: .2rem 2rem .2rem 3.6rem;
-  position: relative;
 }
 .form-switch .form-icon {
   background: #ccc;
   background-clip: padding-box;
-  border: .1rem solid #ccc;
   border-radius: .9rem;
-  cursor: pointer;
-  display: inline-block;
   height: 1.8rem;
   left: 0;
-  line-height: 2.6rem;
-  outline: none;
-  padding: 0;
-  position: absolute;
   top: .3rem;
-  vertical-align: top;
   width: 3rem;
 }
-.form-switch .form-icon::after {
+.form-switch .form-icon::before {
   background: #fff;
   border-radius: .8rem;
   content: "";
@@ -1020,17 +1020,13 @@ textarea.form-input {
   left: 0;
   position: absolute;
   top: 0;
-  transition: left .2s ease;
+  transition: all .2s ease;
   width: 1.6rem;
 }
-.form-switch input:checked + .form-icon {
-  background: #5764c6;
-  border-color: #5764c6;
-}
-.form-switch input:checked + .form-icon::after {
+.form-switch input:checked + .form-icon::before {
   left: 1.2rem;
 }
-.form-switch input:active + .form-icon::after {
+.form-switch input:active + .form-icon::before {
   background: #f0f0f0;
 }
 .input-group {
@@ -1047,7 +1043,7 @@ textarea.form-input {
 }
 .input-group .input-group-addon.addon-sm {
   font-size: 1.2rem;
-  padding: .1rem .6rem;
+  padding: .1rem .8rem;
 }
 .input-group .input-group-addon.addon-lg {
   font-size: 1.6rem;
@@ -1103,8 +1099,8 @@ input.disabled + .form-icon {
   cursor: not-allowed;
   opacity: .5;
 }
-.form-switch input:disabled + .form-icon::after,
-.form-switch input.disabled + .form-icon::after {
+.form-switch input:disabled + .form-icon::before,
+.form-switch input.disabled + .form-icon::before {
   background: #fff;
 }
 .form-horizontal {
@@ -1115,10 +1111,6 @@ input.disabled + .form-icon {
   display: -ms-flexbox;
   display: -webkit-flex;
 }
-.form-horizontal .form-label {
-  margin-bottom: 0;
-  padding: .8rem .4rem;
-}
 .form-horizontal .form-checkbox,
 .form-horizontal .form-radio,
 .form-horizontal .form-switch {