Handle multiple avatar sizes

1 files changed, 28 insertions, 5 deletions

diff --git a/assets/css/src/avatar.css b/assets/css/src/avatar.css
index a30689e8..de674b82 100644
--- a/assets/css/src/avatar.css
+++ b/assets/css/src/avatar.css
@@ -1,17 +1,40 @@
-.avatar {
+.avatar img {
+    vertical-align: bottom;
+}
+
+.avatar-left {
     float: left;
     margin-right: 10px;
 }
 
-.avatar img,
-.avatar div {
+.avatar-inline {
+    display: inline-block;
+    margin-right: 3px;
+}
+
+.avatar-48 img,
+.avatar-48 div {
     border-radius: 30px;
 }
 
-.avatar-letter {
-    color: #fff;
+.avatar-48 .avatar-letter {
     line-height: 48px;
     width: 48px;
     font-size: 25px;
+}
+
+.avatar-20 img,
+.avatar-20 div {
+    border-radius: 10px;
+}
+
+.avatar-20 .avatar-letter {
+    line-height: 20px;
+    width: 20px;
+    font-size: 11px;
+}
+
+.avatar-letter {
+    color: #fff;
     text-align: center;
 }