refactor: improve avatar's styles

Author: mrholek

scss/_avatars.scss

@@ -1,51 +1,44 @@
-.img-avatar {
-  border-radius: 50em;
-}
-
 .avatar {
-  $width: 36px;
-  $status-width: 10px;
-  @include avatar($width,$status-width);
+  @include avatar($avatar-width,$avatar-status-width);
+
+  > img {
+    @extend .img-avatar;
+    vertical-align: initial;
+  }
 }
 
-.avatar.avatar-xs {
-  $width: 20px;
-  $status-width: 8px;
-  @include avatar($width,$status-width);
+.avatar-lg {
+  @include avatar($avatar-lg-width,$avatar-lg-status-width);
 }
 
-.avatar.avatar-sm {
-  $width: 24px;
-  $status-width: 8px;
-  @include avatar($width,$status-width);
+.avatar-sm {
+  @include avatar($avatar-sm-width,$avatar-sm-status-width);
 }
 
-.avatar.avatar-lg {
-  $width: 72px;
-  $status-width: 12px;
-  @include avatar($width,$status-width);
+.avatar-xs {
+  @include avatar($avatar-xs-width,$avatar-xs-status-width);
 }
 
 .avatars-stack {
-  .avatar.avatar-xs {
-    margin-right: -10px;
-  }
-
-  // .avatar.avatar-sm {
-  //
-  // }
 
   .avatar {
-    margin-right: -15px;
-    transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed;
+    margin-right: - ($avatar-width / 2);
+    transition: margin-right $layout-transition-speed;
 
     &:hover {
       margin-right: 0;
     }
   }
 
-  // .avatar.avatar-lg {
-  //
-  // }
+  .avatar-lg {
+    margin-right: - ($avatar-lg-width / 2);
+  }
 
+  .avatar-sm {
+    margin-right: - ($avatar-sm-width / 2);
+  }
+
+  .avatar-xs {
+    margin-right: - ($avatar-xs-width / 2);
+  }
 }

scss/_deprecated.scss

@@ -1,4 +1,4 @@
-@import "mixins/avatar";
+@import "mixins/avatars";
 @import "mixins/buttons";
 @import "mixins/borders";
 @import "mixins/card-accent";

scss/_mixins.scss

@@ -2,11 +2,7 @@
   position: relative;
   display: inline-block;
   width: $width;
-
-  .img-avatar {
-    width: $width;
-    height: $width;
-  }
+  height: $width;
 
   .avatar-status {
     position: absolute;