avatar shadows

src/components/avatar.style.js

@@ -0,0 +1,20 @@
+export default {
+  name: 'Avatar',
+  selector: '.Avatar',
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0,
+        shadow: [{
+          x: 0,
+          y: 1,
+          blur: 8,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.7
+        }]
+      }
+    }
+  ]
+}

src/components/notification.style.js

@@ -9,7 +9,8 @@ export default {
     'Button',
     'ButtonUnstyled',
     'RichContent',
-    'Input'
+    'Input',
+    'Avatar'
   ],
   defaultRules: [
     {

src/components/post.style.js

@@ -9,7 +9,8 @@ export default {
     'Button',
     'ButtonUnstyled',
     'RichContent',
-    'Input'
+    'Input',
+    'Avatar'
   ],
   defaultRules: [
     {

src/components/user_avatar/user_avatar.vue

@@ -30,9 +30,9 @@
 @import "../../variables";
 
 .Avatar {
-  --_avatarShadowBox: var(--avatarStatusShadow);
-  --_avatarShadowFilter: var(--avatarStatusShadowFilter);
-  --_avatarShadowInset: var(--avatarStatusShadowInset);
+  --_avatarShadowBox: var(--shadow);
+  --_avatarShadowFilter: var(--shadowFilter);
+  --_avatarShadowInset: var(--shadowInset);
   --_still-image-label-visibility: hidden;
 
   display: inline-block;