feat(avatar): added fit modifier (#2565)

eBay · Feb 11, 2025 · abcb849 · abcb849
1 parent 1b316bd
commit abcb849
Show file tree

Hide file tree

Showing 7 changed files with 247 additions and 157 deletions.
diff --git a/.changeset/happy-turkeys-hang.md b/.changeset/happy-turkeys-hang.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(avatar): added custom fit avatar
diff --git a/dist/avatar/avatar.css b/dist/avatar/avatar.css
@@ -1,17 +1,33 @@
 .avatar {
     align-items: center;
-    background-color: #84b4fb;
     border-radius: 50%;
-    color: #002a69;
     display: inline-flex;
     font-size: var(--font-size-large-2);
     font-weight: var(--font-weight-bold);
     height: 48px;
     justify-content: center;
     line-height: 48px;
     overflow: hidden;
+    position: relative;
     width: 48px;
 }
+.avatar:after {
+    background: rgba(0, 0, 0, 0.05);
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+.avatar > img {
+    display: inline-block;
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+}
 
 .avatar > svg {
     height: 100%;
@@ -24,6 +40,10 @@
     width: 48px;
 }
 
+.avatar--fit > img {
+    object-fit: contain;
+}
+
 .avatar--teal {
     background-color: #84b4fb;
     color: #002a69;

diff --git a/dist/mixins/_utility-mixins.scss b/dist/mixins/_utility-mixins.scss
@@ -23,10 +23,10 @@
     white-space: nowrap;
 }
 
-@mixin image-treatment($border-radius: 8px) {
+@mixin image-treatment($border-radius: 8px, $display: flex) {
     align-items: center;
     border-radius: $border-radius;
-    display: flex;
+    display: $display;
     justify-content: center;
     overflow: hidden;
     position: relative;