1 files changed, 82 insertions, 4 deletions

diff --git a/src/mixins.less b/src/mixins.less
index 84af7a4..52cd743 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -1,4 +1,12 @@
-// Core mixins
+// Mixins
+// Avatar mixin
+.avatar-base(@size: @unit-8) {
+  font-size: @size / 2.2;
+  height: @size;
+  width: @size;
+}
+
+// Clearfix mixin
 .clearfix() {
   &::after {
     clear: both;
@@ -9,7 +17,7 @@
 
 // Component focus shadow
 .control-shadow(@color: @primary-color) {
-  box-shadow: 0 0 0 .2rem fade(@color, 15%);
+  box-shadow: 0 0 0 .1rem fade(@color, 20%);
 }
 
 // Component transition
@@ -28,7 +36,7 @@
   border-radius: @border-radius;
   display: inline-block;
   line-height: 1;
-  padding: .3rem .4rem;
+  padding: .2em .3em;
   vertical-align: baseline;
 }
 
@@ -37,6 +45,76 @@
   color: @color;
 }
 
+// Shadow mixin
 .shadow-variant(@offset) {
-  box-shadow: 0 @offset (@offset+.1rem)*2 fade(@dark-color, 30%);
+  box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%);
+}
+
+// Position utility mixin
+.margin-variant(@size: 1) {
+  .m-@{size} {
+    padding: @size * @unit-1;
+  }
+  .mb-@{size} {
+    padding-bottom: @size * @unit-1;
+  }
+  .ml-@{size} {
+    padding-left: @size * @unit-1;
+  }
+  .mr-@{size} {
+    padding-right: @size * @unit-1;
+  }
+  .mt-@{size} {
+    padding-top: @size * @unit-1;
+  }
+  .mx-@{size} {
+    padding-left: @size * @unit-1;
+    padding-right: @size * @unit-1;
+  }
+  .my-@{size} {
+    padding-bottom: @size * @unit-1;
+    padding-top: @size * @unit-1;
+  }
+}
+
+.padding-variant(@size: 1) {
+  .p-@{size} {
+    padding: @size * @unit-1;
+  }
+  .pb-@{size} {
+    padding-bottom: @size * @unit-1;
+  }
+  .pl-@{size} {
+    padding-left: @size * @unit-1;
+  }
+  .pr-@{size} {
+    padding-right: @size * @unit-1;
+  }
+  .pt-@{size} {
+    padding-top: @size * @unit-1;
+  }
+  .px-@{size} {
+    padding-left: @size * @unit-1;
+    padding-right: @size * @unit-1;
+  }
+  .py-@{size} {
+    padding-bottom: @size * @unit-1;
+    padding-top: @size * @unit-1;
+  }
 }
+
+// Colors mixin
+.text-color-variant(@color: @primary-color) {
+  color: @color;
+
+  a& {
+    &:focus,
+    &:hover {
+      color: darken(@color, 5%);
+    }
+  }
+}
+
+.bg-color-variant(@color: @primary-color) {
+  background: @color;
+}
\ No newline at end of file