Add Avatars presence status code

2 files changed, 25 insertions, 3 deletions

diff --git a/src/avatars.less b/src/avatars.less
index b964146..c745f3b 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 @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/mixins.less b/src/mixins.less
index 3f17573..e719a24 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -1,7 +1,7 @@
 // Mixins
 // Avatar mixin
 .avatar-base(@size: @unit-8) {
-  font-size: @size / 2.2;
+  font-size: @size / 2;
   height: @size;
   width: @size;
 }