update avatars code

1 files changed, 29 insertions, 25 deletions

diff --git a/dist/spectre.css b/dist/spectre.css
index aabb6d5..7140590 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -1125,19 +1125,10 @@ textarea.form-input {
   font-size: 1.4rem;
   font-weight: 300;
   line-height: 1;
+  margin: 0;
   border-radius: 50%;
   vertical-align: middle;
   position: relative;
-  overflow: hidden;
-}
-.avatar::after {
-  content: attr(data-initial);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  color: #fff;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
 }
 .avatar.avatar-xs {
   width: 1.6rem;
@@ -1159,27 +1150,40 @@ textarea.form-input {
   height: 6.4rem;
   font-size: 2.6rem;
 }
-.avatar-container {
-  display: inline-block;
-  position: relative;
+.avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
 }
-.avatar-container .avatar-icon {
-  width: 46%;
-  height: 46%;
-  padding: 3%;
-  background-color: #fff;
+.avatar .avatar-icon {
+  width: 50%;
+  height: 50%;
+  padding: 5%;
   position: absolute;
-  right: -6%;
-  bottom: -6%;
+  right: -0.2em;
+  bottom: -0.2em;
+  background-color: #fff;
 }
-.avatar-status::after {
-  content: '';
+.avatar .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: #32b643;
 }
+.avatar[data-initial]::after {
+  content: attr(data-initial);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: #fff;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
 .badge {
   position: relative;
   margin-right: 2.4rem;