update avatars code

1 files changed, 30 insertions, 28 deletions

diff --git a/src/avatars.less b/src/avatars.less
index 0bff384..6494292 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -6,19 +6,10 @@
   font-size: 1.4rem;
   font-weight: 300;
   line-height: 1;
+  margin: 0;
   border-radius: 50%;
   vertical-align: middle;
   position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: attr(data-initial);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    color: #fff;
-    transform: translate(-50%, -50%);
-  }
 
   &.avatar-xs {
     width: 1.6rem;
@@ -40,30 +31,41 @@
     height: 6.4rem;
     font-size: 2.6rem;
   }
-}
-.avatar-container {
-  display: inline-block;
-  position: relative;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
 
   .avatar-icon {
-    width: 46%;
-    height: 46%;
-    padding: 3%;
-    background-color: #fff;
+    width: 50%;
+    height: 50%;
+    padding: 5%;
     position: absolute;
-    right: -6%;
-    bottom: -6%;
+    right: -.2em;
+    bottom: -.2em;
+    background-color: #fff;
   }
-}
 
-// TODO: Avatars with status
-.avatar-status {
-  &::after {
-    content: '';
+  .avatar-status {
     display: block;
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
+    width: 25%;
+    height: 25%;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border: .1em solid #fff;
+    border-radius: 10rem;
     background-color: @control-color-success;
   }
+
+  &[data-initial]::after {
+    content: attr(data-initial);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: #fff;
+    transform: translate(-50%, -50%);
+  }
 }
\ No newline at end of file