1 files changed, 75 insertions, 20 deletions

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