_avatar.scss in trestle-0.10.0.pre2

- old
+ new

@@ -1,13 +1,17 @@
 .avatar {
+  --avatar-bg: #ccc;
+  --avatar-size: 2.5rem;
+  --avatar-fallback-font-size: 0.75rem;
+
   display: inline-block;
   position: relative;
 
-  width: 40px;
-  height: 40px;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
 
-  background: #ccc;
+  background: var(--avatar-bg);
   border-radius: 50%;
   box-shadow: rgba(black, 0.25) 0 1px 0;
 
   img {
     display: block;
@@ -35,23 +39,19 @@
 
     display: flex;
     align-items: center;
     justify-content: center;
 
-    font-size: 0.8rem;
+    font-size: var(--avatar-fallback-font-size);
     font-weight: 500;
   }
 }
 
 .avatar-sm {
-  width: 24px !important;
-  height: 24px !important;
+  --avatar-size: 1.5rem;
+  --avatar-fallback-font-size: 0.625rem;
 }
 
 .avatar-lg {
-  width: 64px !important;
-  height: 64px !important;
-
-  .avatar-fallback {
-    font-size: 1.5rem;
-  }
+  --avatar-size: 4rem;
+  --avatar-fallback-font-size: 1.5rem;
 }