Merge pull request #108 from picturepan2/feature/general-improvements

Feature/general improvements

10 files changed, 151 insertions, 115 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..03179d3 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%);
     }
   }
@@ -127,7 +127,9 @@
 // Button groups
 .btn-group {
   display: inline-flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  overflow-x: auto;
 
   .btn {
     flex: 1 0 auto;
@@ -146,7 +148,9 @@
       margin-left: -.1rem;
     }
     &:hover,
-    &:focus {
+    &:focus,
+    &:active,
+    &.active {
       z-index: 99;
     }
   }
diff --git a/src/forms.less b/src/forms.less
index 6c7e559..8d1e5e1 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;
   }
@@ -57,21 +55,43 @@
   }
 
   // Form status
+
   .has-success &,
   &.is-success {
     border-color: @control-color-success;
   }
+
   .has-danger &,
   &.is-danger {
     border-color: @control-color-danger;
   }
 }
+
+// Form element: Input note
+.form-input-hint {
+  color: @core-meta-color;
+  display: inline-block;
+  margin-top: .4rem;
+
+  .has-success &,
+  .is-success + & {
+    color: @control-color-success;
+  }
+
+  .has-danger &,
+  .is-danger + & {
+    color: @control-color-danger;
+  }
+}
+
+
 // Form element: Label
 .form-label {
   display: block;
   line-height: 1.6rem;
   margin-bottom: .5rem;
 }
+
 // Form element: Select
 .form-select {
   appearance: none;
@@ -82,13 +102,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 +134,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 +165,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 +186,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 +245,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 +255,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/layout.less b/src/layout.less
index e32897a..263ed69 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -22,6 +22,7 @@
 // Responsive grid system
 .columns {
   display: flex;
+  flex-wrap: wrap;
   margin-left: -@layout-gutter;
   margin-right: -@layout-gutter;
 
@@ -34,8 +35,9 @@
       padding-right: 0;
     }
   }
-  &.col-multiline {
-    flex-wrap: wrap;
+  &.col-oneline {
+    flex-wrap: nowrap;
+    overflow-x: auto;
   }
 }
 .column {
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..f6295bc 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,33 +32,44 @@
     }
   }
 }
+
 // Tabs
 .tab {
-  border-bottom: .1rem solid @control-color;
   display: flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  overflow-x: auto;
 
   .tab-item {
-    margin-bottom: -.1rem;
+    border-bottom: .1rem solid @control-color;
     margin-top: 0;
 
     a {
       border-bottom: .2rem solid transparent;
       color: @body-font-color;
       display: block;
-      padding: .5rem 1.5rem;
+      margin-bottom: -.1rem;
+      margin-top: 0;
+      padding: .8rem 1.4rem;
       text-decoration: none;
-
-      &:hover,
-      &:focus {
-        border-bottom-color: @core-color;
+      &:focus,
+      &:hover {
         color: @core-link-color;
       }
     }
 
-    &.active {
-      a {
-        border-bottom-color: darken(@core-color, 10%);
-        color: darken(@core-link-color, 10%);
+    &.active a,
+    a.active {
+      border-bottom-color: darken(@core-color, 10%);
+      color: darken(@core-link-color, 10%);
+    }
+
+    .badge {
+      &[data-badge]::after {
+        position: absolute;
+        right: -1.4rem;
+        top: 1rem;
+        transform: translate(-50%, -1rem);
       }
     }
   }
@@ -69,18 +78,10 @@
     .tab-item {
       flex: 1 0 auto;
       text-align: center;
-
-      .badge {
-        &[data-badge]::after {
-          position: absolute;
-          right: 1.5rem;
-          top: .6rem;
-          transform: translate(50%, -.8rem);
-        }
-      }
     }
   }
 }
+
 // Pagination
 .pagination {
   display: inline-block;
@@ -93,15 +94,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..47ef8ab 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -93,12 +93,12 @@ mark,
 // Code
 pre {
   background: lighten(@core-border-color, 4%);
-  border-left: .2rem solid @core-color;
+  border-left: .2rem solid darken(@core-border-color, 5%);
   line-height: 1.8rem;
   margin-bottom: 1em;
   margin-top: 1em;
   overflow: auto;
-  padding: 1.5rem;
+  padding: 1.5rem 2.5rem;
 }
 code {
   background: @core-border-color;
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;