Merge pull request #188 from appwrite/avatar-fix

Avatar eliminate size icon not in ratio of 1 on 1, in case of size at…
appwrite · Jul 4, 2024 · 9bf6dbd · 9bf6dbd
2 parents 60dcb1c + 335c29e
commit 9bf6dbd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/.changeset/polite-spoons-rescue.md b/.changeset/polite-spoons-rescue.md
@@ -0,0 +1,6 @@
+---
+"@appwrite.io/pink-icons": minor
+"@appwrite.io/pink": minor
+---
+
+avatar fix ratio
diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss
@@ -2,8 +2,9 @@
 
 .avatar {
   --p-text-size: var(--text-size, var(--font-size-0));
-  $default-size: pxToRem(40);
-  --p-size: var(--size, #{$default-size} ); /* default is medium size */
+  --p-image-size: var(--image-size, #{pxToRem(20)} );
+  --p-size: var(--size, #{pxToRem(40)} ); /* default is medium size */
+
   --p-avatar-text-color: var(--p-avatar-text-color-default);
   --p-avatar-bg-color: var(--p-avatar-bg-color-default);
   --p-avatar-border-color: var(--p-avatar-border-color-default);
@@ -97,35 +98,43 @@
   line-height: 1;
 
   [class*="icon"] { font-size:var(--p-text-size)!important; }
-  img, svg { inline-size:var(--p-text-size); aspect-ratio:1 / 1; }
+  img, svg { inline-size:var(--p-image-size); block-size:var(--p-image-size); }
   &-link {
     display:block; border-radius:var(--border-radius-circular);
     &:focus-visible { box-shadow:var(--focus-box-shadow); }
   }
   /* sizes */
   &.is-size-x-small  {
-    --p-text-size:#{pxToRem(10)}; $size:pxToRem(24); --p-size:#{$size};
+    --p-text-size: #{pxToRem(10)};
+    --p-size: #{pxToRem(24)};
+    --p-image-size: #{pxToRem(16)};
     &.is-with-3-char { --p-text-size:#{pxToRem(8)}; }
-    [class*="icon"] { --p-text-size:var(--font-size-00); }
+    [class*="icon"] { --p-text-size:var(--font-size-0); }
   }
   &.is-size-small    {
-    --p-text-size:var(--font-size-00); $size:pxToRem(32); --p-size:#{$size};
+    --p-text-size: var(--font-size-00);
+    --p-size: #{pxToRem(32)};
+    --p-image-size: #{pxToRem(20)};
     &.is-with-3-char { --p-text-size:#{pxToRem(10)}; }
     [class*="icon"] { --p-text-size:var(--font-size-0); }
     .icon-question-mark-circle { --p-text-size:var(--font-size-2); }
   }
   &.is-size-medium        {
     /* default */
     &.is-with-3-char { --p-text-size:var(--font-size-0); }
-    [class*="icon"] { --p-text-size:var(--font-size-0); }
+    [class*="icon"] { --p-text-size:var(--font-size-1); }
   }
   &.is-size-large         {
-    --p-text-size:var(--font-size-1); $size:pxToRem(48); --p-size:#{$size};
+    --p-text-size:var(--font-size-1);
+    --p-size:#{pxToRem(48)};
+    --p-image-size: #{pxToRem(24)};
     &.is-with-3-char { --p-text-size:var(--font-size-0); }
     [class*="icon"] { --p-text-size:var(--font-size-4); }
   }
   &.is-size-x-large       {
-    --p-text-size:var(--font-size-4); $size:pxToRem(64); --p-size:#{$size};
+    --p-text-size:var(--font-size-4);
+    --p-size:#{pxToRem(64)};
+    --p-image-size: #{pxToRem(24)};
     &.is-with-3-char { --p-text-size:var(--font-size-2); }
     [class*="icon"] { --p-text-size:var(--font-size-4); }
   }