Update: code and docs cleanup

9 files changed, 102 insertions, 95 deletions

diff --git a/src/base.less b/src/base.less
index c5f08eb..ef7da3f 100644
--- a/src/base.less
+++ b/src/base.less
@@ -20,9 +20,8 @@ body {
 a {
   color: @core-link-color;
   text-decoration: underline;
-
-  &:hover,
-  &:focus {
+  &:focus,
+  &:hover {
     color: darken(@core-link-color, 25%);
   }
 }
diff --git a/src/buttons.less b/src/buttons.less
index e42a31f..3547e11 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -17,7 +17,6 @@
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
-
   &:focus {
     background: lighten(@core-secondary-color, 1%);
   }
@@ -38,22 +37,22 @@
     background: @core-color;
     border-color: darken(@core-color, 5%);
     color: @core-light-color;
-
     &:focus {
-      background: darken(@core-color, 2%);
+      background: darken(@core-color, 4%);
+      border-color: darken(@core-color, 10%);
+      color: @core-light-color;
     }
     &:hover {
-      background: darken(@core-color, 5%);
-      border-color: darken(@core-color, 10%);
+      background: darken(@core-color, 6%);
+      border-color: darken(@core-color, 15%);
       color: @core-light-color;
     }
     &:active,
     &.active {
-      background: darken(@core-color, 10%);
+      background: darken(@core-color, 8%);
       border-color: darken(@core-color, 15%);
       color: @core-light-color;
     }
-
     &.loading {
       &::after {
         border-color: @core-light-color;
@@ -68,13 +67,14 @@
     background: transparent;
     border-color: transparent;
     color: @core-link-color;
-
-    &:hover,
-    &:focus {
+    &:focus,
+    &:hover {
+      background: lighten(@core-border-color, 2%);
       color: darken(@core-link-color, 15%);
     }
     &:active,
     &.active {
+      background: @core-border-color;
       color: darken(@core-link-color, 25%);
     }
   }
@@ -146,7 +146,9 @@
       margin-left: -.1rem;
     }
     &:hover,
-    &:focus {
+    &:focus,
+    &:active,
+    &.active {
       z-index: 99;
     }
   }
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;
+      }
     }
   }
 }
diff --git a/src/menus.less b/src/menus.less
index 8c7fbe7..49adc80 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -26,9 +26,8 @@
       margin: -.2rem -1rem;
       padding: .2rem 1rem;
       text-decoration: none;
-
-      &:hover,
-      &:focus {
+      &:focus,
+      &:hover {
         color: @core-link-color;
       }
       &:active,
diff --git a/src/navigation.less b/src/navigation.less
index 82d0e6f..6cf46cf 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -16,7 +16,6 @@
     a {
       text-decoration: none;
     }
-
     &:last-child {
       &,
       a {
@@ -24,7 +23,6 @@
         pointer-events: none;
       }
     }
-
     &:not(:last-child) {
       &::after {
         color: @control-color;
@@ -34,6 +32,7 @@
     }
   }
 }
+
 // Tabs
 .tab {
   border-bottom: .1rem solid @control-color;
@@ -49,10 +48,8 @@
       display: block;
       padding: .5rem 1.5rem;
       text-decoration: none;
-
-      &:hover,
-      &:focus {
-        border-bottom-color: @core-color;
+      &:focus,
+      &:hover {
         color: @core-link-color;
       }
     }
@@ -81,6 +78,7 @@
     }
   }
 }
+
 // Pagination
 .pagination {
   display: inline-block;
@@ -93,15 +91,15 @@
       display: inline-block;
       padding: .6rem .5rem;
     }
+
     a {
       border-radius: .3rem;
       display: inline-block;
       margin: 0 .1rem;
       padding: .6rem 1.2rem;
       text-decoration: none;
-
-      &:hover,
-      &:focus {
+      &:focus,
+      &:hover {
         background: @core-secondary-color;
       }
     }
diff --git a/src/tooltips.less b/src/tooltips.less
index 8eeebdb..2ef0fc0 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -1,7 +1,6 @@
 // Tooltips
 .tooltip {
   position: relative;
-
   &::after {
     background: fade(#333, 90%);
     border-radius: .3rem;
@@ -23,14 +22,13 @@
     transition: all .216s ease;
     z-index: 99;
   }
-  &:hover,
-  &:focus {
+  &:focus,
+  &:hover {
     &::after {
       opacity: 1;
       transform: translate(-50%, -.5rem);
     }
   }
-
   &[disabled],
   &.disabled {
     pointer-events: auto;
@@ -42,8 +40,8 @@
       left: 100%;
       transform: translate(0, 50%);
     }
-    &:hover,
-    &:focus {
+    &:focus,
+    &:hover {
       &::after {
         transform: translate(.5rem, 50%);
       }
@@ -55,8 +53,8 @@
       top: 100%;
       transform: translate(-50%, 0);
     }
-    &:hover,
-    &:focus {
+    &:focus,
+    &:hover {
       &::after {
         transform: translate(-50%, .5rem);
       }
@@ -69,8 +67,8 @@
       right: 100%;
       transform: translate(0, 50%);
     }
-    &:hover,
-    &:focus {
+    &:focus,
+    &:hover {
       &::after {
         transform: translate(-.5rem, 50%);
       }
diff --git a/src/typography.less b/src/typography.less
index e570dd6..04a19ed 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -93,7 +93,7 @@ mark,
 // Code
 pre {
   background: lighten(@core-border-color, 4%);
-  border-left: .2rem solid @core-color;
+  border-left: .2rem solid darken(@core-border-color, 4%);
   line-height: 1.8rem;
   margin-bottom: 1em;
   margin-top: 1em;
diff --git a/src/utilities.less b/src/utilities.less
index db79bc4..9772945 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -175,6 +175,7 @@
 .circle {
   border-radius: 50%;
 }
+
 // Divider
 .divider {
   border-bottom: .1rem solid @core-border-color;
@@ -188,7 +189,6 @@
   min-height: 1.6rem;
   pointer-events: none;
   position: relative;
-
   &::after {
     animation: loading 500ms infinite linear;
     border: .2rem solid @core-color;
diff --git a/src/variables.less b/src/variables.less
index 24efa9f..a983efd 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -1,11 +1,13 @@
 // Core variables
+
 // Global
 @html-font-size: 10px;
 @html-line-height: 1.428571429;
 @body-bg: #fff;
 @body-font-color: #333;
 @body-font-size: 1.4rem;
-@body-font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", sans-serif;
+// https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+@body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", "Helvetica Neue", sans-serif;
 
 // Sizes
 @layout-gutter: 1rem;