Update: code and docs cleanup

1 files changed, 65 insertions, 56 deletions

diff --git a/src/forms.less b/src/forms.less
index 6c7e559..1170aff 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -19,11 +19,9 @@
   padding: .7rem .8rem;
   position: relative;
   width: 100%;
-
   &:focus {
     border-color: @core-color;
   }
-
   &[disabled] {
     background: #eeeff2;
   }
@@ -82,13 +80,11 @@
   outline: 0;
   padding: .5rem .8rem;
   vertical-align: middle;
-
   &:not([multiple]) {
     background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
     height: 3.2rem;
     padding-right: 2.4rem;
   }
-
   &:focus {
     border-color: @core-color;
   }
@@ -116,15 +112,11 @@
 .form-switch {
   input {
     clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
+    height: .1rem;
+    margin: -.1rem;
     overflow: hidden;
     position: absolute;
-    width: 1px;
-
-    &:focus + .form-icon {
-      box-shadow: 0 0 .3rem .1rem @core-border-color;
-    }
+    width: .1rem;
   }
 }
 .form-checkbox,
@@ -151,12 +143,20 @@
     width: 1.4rem;
   }
   &:hover .form-icon {
-    border-color: darken(@control-color, 15%);
+    border-color: darken(@control-color, 20%);
   }
-  input:checked + .form-icon,
-  input:indeterminate + .form-icon {
-    background: @core-color;
-    border-color: @core-color;
+
+  input {
+    &:focus + .form-icon {
+      border-color: @core-color;
+    }
+    &:checked + .form-icon {
+      background: @core-color;
+      border-color: @core-color;
+    }
+    &:active + .form-icon {
+      background: @core-border-color;
+    }
   }
 }
 .form-checkbox {
@@ -164,34 +164,38 @@
     border-radius: .2rem;
   }
 
-  input:checked + .form-icon {
-    &::after {
-      background-clip: padding-box;
-      border: .2rem solid #fff;
-      border-left-width: 0;
-      border-top-width: 0;
-      content: "";
-      height: 1rem;
-      left: 50%;
-      margin-left: -.3rem;
-      margin-top: -.6rem;
-      position: absolute;
-      top: 50%;
-      transform: rotate(45deg);
-      width: .6rem;
+  input {
+    &:checked + .form-icon {
+      &::after {
+        background-clip: padding-box;
+        border: .2rem solid #fff;
+        border-left-width: 0;
+        border-top-width: 0;
+        content: "";
+        height: 1rem;
+        left: 50%;
+        margin-left: -.3rem;
+        margin-top: -.6rem;
+        position: absolute;
+        top: 50%;
+        transform: rotate(45deg);
+        width: .6rem;
+      }
     }
-  }
-  input:indeterminate + .form-icon {
-    &::after {
-      background: #fff;
-      content: "";
-      height: .2rem;
-      left: 50%;
-      margin-left: -.4rem;
-      margin-top: -.1rem;
-      position: absolute;
-      top: 50%;
-      width: .8rem;
+    &:indeterminate + .form-icon {
+      background: @core-color;
+      border-color: @core-color;
+      &::after {
+        background: #fff;
+        content: "";
+        height: .2rem;
+        left: 50%;
+        margin-left: -.4rem;
+        margin-top: -.1rem;
+        position: absolute;
+        top: 50%;
+        width: .8rem;
+      }
     }
   }
 }
@@ -219,7 +223,7 @@
 .form-switch {
   cursor: pointer;
   display: inline-block;
-  line-height: 1.8rem;
+  line-height: 2rem;
   padding: .3rem 2rem .3rem 3.6rem;
   position: relative;
 
@@ -229,36 +233,41 @@
     border: .1rem solid @control-color;
     border-radius: .9rem;
     display: inline-block;
-    height: 1.6rem;
+    height: 1.8rem;
     left: 0;
-    line-height: 2.4rem;
+    line-height: 2.6rem;
     outline: none;
     padding: 0;
     position: absolute;
     top: .4rem;
     vertical-align: top;
-    width: 2.6rem;
-
+    width: 3rem;
     &::after {
       background: #fff;
       border-radius: .8rem;
       content: "";
       display: block;
-      height: 1.4rem;
+      height: 1.6rem;
       left: 0;
       position: absolute;
       top: 0;
       transition: left .15s ease;
-      width: 1.4rem;
+      width: 1.6rem;
     }
   }
 
-  input:checked + .form-icon {
-    background: @core-color;
-    border-color: @core-color;
-
-    &::after {
-      left: 1rem;
+  input {
+    &:checked + .form-icon {
+      background: @core-color;
+      border-color: @core-color;
+      &::after {
+        left: 1.2rem;
+      }
+    }
+    &:active + .form-icon {
+      &::after {
+        background: @core-border-color;
+      }
     }
   }
 }