Merge pull request #262 from picturepan2/0.3.2 v0.3.2

0.3.2

15 files changed, 169 insertions, 82 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index 46af3b2..111ecf6 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -8,7 +8,7 @@
     flex-wrap: wrap;
     height: auto;
     min-height: @unit-8;
-    padding: @border-width 0 0 @border-width;
+    padding: @unit-h;
 
     &.is-focused {
       border-color: @primary-color;
@@ -20,8 +20,9 @@
       box-shadow: none;
       display: inline-block;
       flex: 1 0 auto;
-      height: @unit-7;
+      height: @unit-6;
       line-height: @unit-4;
+      margin: @unit-h;
       width: auto;
     }
   }
diff --git a/src/avatars.less b/src/avatars.less
index b964146..1fa075a 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -29,10 +29,11 @@
     height: 100%;
     position: relative;
     width: 100%;
-    z-index: @zindex-1;
+    z-index: @zindex-0;
   }
 
-  .avatar-icon {
+  .avatar-icon,
+  .avatar-presence {
     background: @bg-color-light;
     bottom: 14.64%;
     height: 50%;
@@ -41,6 +42,27 @@
     right: 14.64%;
     transform: translate(50%, 50%);
     width: 50%;
+    z-index: @zindex-0 + 1;
+  }
+
+  .avatar-presence {
+    background: @gray-color;
+    box-shadow: 0 0 0 @border-width-lg @light-color;
+    border-radius: 50%;
+    height: .5em;
+    width: .5em;
+
+    &.online {
+      background: @success-color;
+    }
+
+    &.busy {
+      background: @error-color;
+    }
+
+    &.away {
+      background: @warning-color;
+    }
   }
 
   &[data-initial]::before {
diff --git a/src/buttons.less b/src/buttons.less
index 1beba4d..0c15d9e 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -4,7 +4,7 @@
   background: @bg-color-light;
   border: @border-width solid @primary-color;
   border-radius: @border-radius;
-  color: @link-color;
+  color: @primary-color;
   .control-transition();
   cursor: pointer;
   display: inline-block;
@@ -19,10 +19,9 @@
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    background: @secondary-color;
     .control-shadow();
-    text-decoration: none;
   }
+  &:focus,
   &:hover {
     background: @secondary-color;
     border-color: @primary-color-dark;
diff --git a/src/chips.less b/src/chips.less
index b9ebde5..60ab726 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -2,13 +2,13 @@
 .chip {
   align-items: center;
   background: @bg-color-dark;
-  border-radius: @border-radius;
+  border-radius: 5rem;
   color: @gray-color-dark;
   display: inline-flex;
-  height: @unit-7;
-  margin: 0 @unit-0 @unit-0 0;
+  height: @unit-6;
+  margin: @unit-h;
   max-width: 100%;
-  padding: @unit-0 @unit-2;
+  padding: @unit-h @unit-2 + @unit-h;
   text-decoration: none;
   vertical-align: middle;
 
@@ -18,7 +18,7 @@
   }
 
   .avatar {
-    margin-left: -@unit-1;
+    margin-left: -(@unit-2 + @unit-h);
     margin-right: @unit-1;
   }
 }
diff --git a/src/codes.less b/src/codes.less
index f820978..e982e2b 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -1,5 +1,6 @@
 // Codes
 code {
+  font-size: .65rem;
   .label-base();
   .label-variant(@code-color, lighten(@code-color, 33%));
 }
diff --git a/src/forms.less b/src/forms.less
index bc9b571..7ed91e6 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -81,7 +81,7 @@ legend {
 
   // Input types
   &[type="file"] {
-    padding: .125rem;
+    height: auto;
   }
 }
 
@@ -93,12 +93,12 @@ legend {
 
   .has-success &,
   .is-success + & {
-    color: @control-color-success;
+    color: @success-color;
   }
 
   .has-error &,
   .is-error + & {
-    color: @control-color-error;
+    color: @error-color;
   }
 }
 
@@ -359,9 +359,14 @@ legend {
       padding: @control-padding-v-lg @control-padding-h;
     }
   }
-  .input-group-addon,
+
+  .form-input,
+  .form-select {
+    flex: 1 1 auto;
+  }
+
   .input-group-btn {
-    flex: 1 0 auto;
+    z-index: @zindex-0;
   }
 
   .form-input,
@@ -382,7 +387,7 @@ legend {
       margin-left: -@border-width;
     }
     &:focus {
-      z-index: @zindex-0;
+      z-index: @zindex-0 + 1;
     }
   }
 
@@ -400,17 +405,17 @@ legend {
 .form-select {
   .has-success &,
   &.is-success {
-    border-color: @control-color-success;
+    border-color: @success-color;
     &:focus {
-      .control-shadow(@control-color-success);
+      .control-shadow(@success-color);
     }
   }
 
   .has-error &,
   &.is-error {
-    border-color: @control-color-error;
+    border-color: @error-color;
     &:focus {
-      .control-shadow(@control-color-error);
+      .control-shadow(@error-color);
     }
   }
 }
@@ -421,18 +426,18 @@ legend {
   .has-error &,
   &.is-error {
     .form-icon {
-      border-color: @control-color-error;
+      border-color: @error-color;
     }
     
     input {
       &:checked + .form-icon {
-        background: @control-color-error;
-        border-color: @control-color-error;
+        background: @error-color;
+        border-color: @error-color;
       }
 
       &:focus + .form-icon {
-        border-color: @control-color-error;
-        .control-shadow(@control-color-error);
+        border-color: @error-color;
+        .control-shadow(@error-color);
       }
     }
   }
@@ -442,13 +447,13 @@ legend {
 .form-input {
   &:not(:placeholder-shown) {
     &:invalid {
-      border-color: @control-color-error;
+      border-color: @error-color;
       &:focus {
-        .control-shadow(@control-color-error);
+        .control-shadow(@error-color);
       }
 
       & + .form-input-hint {
-        color: @control-color-error;
+        color: @error-color;
       }
     }
   }
diff --git a/src/labels.less b/src/labels.less
index c67759b..efeb89d 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,7 +1,15 @@
 // Labels
 .label {
+  display: inline-block;
   .label-base();
   .label-variant(lighten(@body-font-color, 5%), @bg-color);
+  line-height: 1;
+
+  &.label-rounded {
+    border-radius: 5rem;
+    padding-left: .4rem;
+    padding-right: .4rem; 
+  }
 
   &.label-primary {
     .label-variant(@light-color, @primary-color);
@@ -12,14 +20,14 @@
   }
 
   &.label-success {
-    .label-variant(@light-color, @control-color-success);
+    .label-variant(@light-color, @success-color);
   }
 
   &.label-warning {
-    .label-variant(@light-color, @control-color-warning);
+    .label-variant(@light-color, @warning-color);
   }
 
   &.label-error {
-    .label-variant(@light-color, @control-color-error);
+    .label-variant(@light-color, @error-color);
   }
 }
diff --git a/src/meters.less b/src/meters.less
index b7a6190..d0b2b59 100644
--- a/src/meters.less
+++ b/src/meters.less
@@ -25,15 +25,15 @@
   }
 
   &::-webkit-meter-optimum-value {
-    background: @control-color-success;
+    background: @success-color;
   }
 
   &::-webkit-meter-suboptimum-value {
-    background: @control-color-warning;
+    background: @warning-color;
   }
 
   &::-webkit-meter-even-less-good-value {
-    background: @control-color-error;
+    background: @error-color;
   }
 
   &::-moz-meter-bar,
@@ -44,14 +44,14 @@
   }
 
   &:-moz-meter-optimum::-moz-meter-bar {
-    background: @control-color-success;
+    background: @success-color;
   }
 
   &:-moz-meter-sub-optimum::-moz-meter-bar {
-    background: @control-color-warning;
+    background: @warning-color;
   }
 
   &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-    background: @control-color-error;
+    background: @error-color;
   }
 }
diff --git a/src/mixins.less b/src/mixins.less
index 6fd4d6d..8cbb3f5 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -1,11 +1,71 @@
 // Mixins
 // Avatar mixin
 .avatar-base(@size: @unit-8) {
-  font-size: @size / 2.2;
+  font-size: @size / 2;
   height: @size;
   width: @size;
 }
 
+// Background color utility mixin
+.bg-color-variant(@color: @primary-color) {
+  background: @color;
+}
+
+// Button variant mixin
+.button-variant(@color: @primary-color) {
+  background: @color;
+  border-color: darken(@color, 3%);
+  color: @light-color;
+  &:focus {
+    .control-shadow(@color);
+  }
+  &:focus,
+  &:hover {
+    background: darken(@color, 2%);
+    border-color: darken(@color, 5%);
+    color: @light-color;
+  }
+  &:active,
+  &.active {
+    background: darken(@color, 7%);
+    border-color: darken(@color, 10%);
+    color: @light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: @light-color;
+      border-left-color: @light-color;
+    }
+  }
+}
+
+.button-outline-variant(@color: @primary-color) {
+  background: @light-color;
+  border-color: @color;
+  color: @color;
+  &:focus {
+    .control-shadow(@color);
+  }
+  &:focus,
+  &:hover {
+    background: lighten(@color, 50%);
+    border-color: darken(@color, 2%);
+    color: @color;
+  }
+  &:active,
+  &.active {
+    background: @color;
+    border-color: darken(@color, 5%);
+    color: @light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: @color;
+      border-left-color: @color;
+    }
+  }
+}
+
 // Clearfix mixin
 .clearfix() {
   &::after {
@@ -25,19 +85,11 @@
   transition: all .2s ease;
 }
 
-// Toast variant
-.toast-variant(@color: @dark-color) {
-  background: fade(@color, 90%);
-  border-color: @color;
-}
-
 // Label base style
 .label-base() {
   border-radius: @border-radius;
-  display: inline-block;
-  line-height: 1.2;
-  padding: .1em .3em;
-  vertical-align: baseline;
+  line-height: 1;
+  padding: .15rem .2rem;
 }
 
 .label-variant(@color: @light-color, @bg-color: @primary-color) {
@@ -45,12 +97,7 @@
   color: @color;
 }
 
-// Shadow mixin
-.shadow-variant(@offset) {
-  box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%);
-}
-
-// Position utility mixin
+// Margin utility mixin
 .margin-variant(@id: 1, @size: 1) {
   .m-@{id} {
     margin: @size;
@@ -77,6 +124,7 @@
   }
 }
 
+// Padding utility mixin
 .padding-variant(@id: 1, @size: 1) {
   .p-@{id} {
     padding: @size;
@@ -103,7 +151,12 @@
   }
 }
 
-// Colors mixin
+// Shadow mixin
+.shadow-variant(@offset) {
+  box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%);
+}
+
+// Text color utility mixin
 .text-color-variant(@color: @primary-color) {
   color: @color;
 
@@ -115,6 +168,8 @@
   }
 }
 
-.bg-color-variant(@color: @primary-color) {
-  background: @color;
+// Toast variant mixin
+.toast-variant(@color: @dark-color) {
+  background: fade(@color, 90%);
+  border-color: @color;
 }
\ No newline at end of file
diff --git a/src/normalize.less b/src/normalize.less
index d32cd77..28ed4d7 100644
--- a/src/normalize.less
+++ b/src/normalize.less
@@ -13,7 +13,6 @@
 
 html {
   font-family: sans-serif; /* 1 */
-  line-height: 1.15; /* 2 */
   -ms-text-size-adjust: 100%; /* 3 */
   -webkit-text-size-adjust: 100%; /* 3 */
 }
@@ -141,7 +140,7 @@ code,
 kbd,
 pre,
 samp {
-  font-family: monospace, monospace; /* 1 */
+  font-family: @mono-font-family; /* 1 (changed) */
   font-size: 1em; /* 2 */
 }
 
diff --git a/src/pagination.less b/src/pagination.less
index 7372c59..596651b 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -6,7 +6,7 @@
   padding: @unit-1 0;
 
   .page-item {
-    margin: @unit-1 @unit-0;
+    margin: @unit-1 @unit-o;
 
     span {
       display: inline-block;
diff --git a/src/toasts.less b/src/toasts.less
index 5ec0ef8..0bc61d6 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -13,15 +13,15 @@
   }
 
   &.toast-success {
-    .toast-variant(@control-color-success);
+    .toast-variant(@success-color);
   }
 
   &.toast-warning {
-    .toast-variant(@control-color-warning);
+    .toast-variant(@warning-color);
   }
 
   &.toast-error {
-    .toast-variant(@control-color-error);
+    .toast-variant(@error-color);
   }
 
   a {
diff --git a/src/typography.less b/src/typography.less
index 3cae94b..5fd152f 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -9,7 +9,7 @@ h6 {
   color: inherit;
   font-weight: 500;
   line-height: 1.2;
-  margin-bottom: .5em;
+  margin-bottom: .25em;
   margin-top: 0;
 }
 .h1,
@@ -83,10 +83,6 @@ blockquote {
   p:last-child {
     margin-bottom: 0;
   }
-
-  cite {
-    color: @gray-color;
-  }
 }
 
 // Lists
diff --git a/src/utilities/colors.less b/src/utilities/colors.less
index 64f7689..9571241 100644
--- a/src/utilities/colors.less
+++ b/src/utilities/colors.less
@@ -12,13 +12,13 @@
   .text-color-variant(@light-color);
 }
 .text-success {
-  .text-color-variant(@control-color-success);
+  .text-color-variant(@success-color);
 }
 .text-warning {
-  .text-color-variant(@control-color-warning);
+  .text-color-variant(@warning-color);
 }
 .text-error {
-  .text-color-variant(@control-color-error);
+  .text-color-variant(@error-color);
 }
 
 // Background colors
@@ -35,11 +35,11 @@
   .bg-color-variant(@bg-color);
 }
 .bg-success {
-  .bg-color-variant(@control-color-success);
+  .bg-color-variant(@success-color);
 }
 .bg-warning {
-  .bg-color-variant(@control-color-warning);
+  .bg-color-variant(@warning-color);
 }
 .bg-error {
-  .bg-color-variant(@control-color-error);
+  .bg-color-variant(@error-color);
 }
diff --git a/src/variables.less b/src/variables.less
index fb2bcc8..d146459 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -4,7 +4,7 @@
 @html-font-size: 20px;
 @html-line-height: 1.428571429;
 @body-bg: @bg-color-light;
-@body-font-color: @dark-color;
+@body-font-color: lighten(@dark-color, 5%);
 @font-size: .7rem;
 @font-size-sm: .6rem;
 @font-size-lg: .8rem;
@@ -13,6 +13,7 @@
 // Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
 @base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
+@mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
 @fallback-font-family: "Helvetica Neue", sans-serif;
 @cjk-zh-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", @fallback-font-family;
 @cjk-jp-font-family: @base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, @fallback-font-family;
@@ -20,7 +21,7 @@
 @body-font-family: @base-font-family, @fallback-font-family;
 
 // Unit sizes
-@unit-0: .05rem;
+@unit-o: .05rem;
 @unit-h: .1rem;
 @unit-1: .2rem;
 @unit-2: .4rem;
@@ -50,7 +51,7 @@
 @control-min-width: 180px;
 @control-max-width: 320px;
 @border-radius: @unit-h;
-@border-width: @unit-0;
+@border-width: @unit-o;
 @border-width-lg: @unit-h;
 
 // Colors
@@ -79,9 +80,9 @@
 @bg-color-light: @light-color;
 
 // Control colors
-@control-color-success: #32b643;
-@control-color-warning: #ffb700;
-@control-color-error: #e85600;
+@success-color: #32b643;
+@warning-color: #ffb700;
+@error-color: #e85600;
 
 // Other colors
 @code-color: #e06870;