Add Button variant mixins

5 files changed, 75 insertions, 23 deletions

diff --git a/src/avatars.less b/src/avatars.less
index c745f3b..1fa075a 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -47,7 +47,7 @@
 
   .avatar-presence {
     background: @gray-color;
-    box-shadow: 0 0 0 @border-width @light-color;
+    box-shadow: 0 0 0 @border-width-lg @light-color;
     border-radius: 50%;
     height: .5em;
     width: .5em;
diff --git a/src/buttons.less b/src/buttons.less
index 403e8f8..0c15d9e 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -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/mixins.less b/src/mixins.less
index 9580aed..8cbb3f5 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -6,6 +6,66 @@
   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,12 +85,6 @@
   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;
@@ -43,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;
@@ -75,6 +124,7 @@
   }
 }
 
+// Padding utility mixin
 .padding-variant(@id: 1, @size: 1) {
   .p-@{id} {
     padding: @size;
@@ -101,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;
 
@@ -113,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/typography.less b/src/typography.less
index b1d96a7..5fd152f 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -83,10 +83,6 @@ blockquote {
   p:last-child {
     margin-bottom: 0;
   }
-
-  cite {
-    color: @gray-color;
-  }
 }
 
 // Lists
diff --git a/src/variables.less b/src/variables.less
index 850940b..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;