diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss index d8a4117add..c4dc7e44a5 100644 --- a/packages/ui/src/6-elements/_avatar.scss +++ b/packages/ui/src/6-elements/_avatar.scss @@ -97,7 +97,7 @@ line-height: 1; [class*="icon"] { font-size:var(--p-text-size); } - img, svg { inline-size:var(--p-text-size); block-size:var(--p-text-size); } + img, svg { inline-size:var(--p-text-size); aspect-ratio:1 / 1; } &-link { display:block; border-radius:var(--border-radius-circular); &:focus-visible { box-shadow:var(--focus-box-shadow); } @@ -109,7 +109,7 @@ } &.is-size-small { --p-text-size:var(--font-size-00); $size:pxToRem(32); --p-size:#{$size}; - [class*="icon"] { --p-text-size:var(x-); } + [class*="icon"] { --p-text-size:var(--font-size-0); } } &.is-size-medium { /* default */ @@ -202,7 +202,7 @@ .avatars-group { --p-avatar-group-border-color: var(--avatar-group-border-color, var(--color-neutral-5)); - position:relative; z-index:0; display:flex; padding-inline-end:.6rem; + position:relative; z-index:0; display:flex; &-item { position: relative; display: inline-flex; @@ -214,13 +214,13 @@ } .avatar { border:solid pxToRem(2) hsl(var(--p-avatar-group-border-color)); border-radius:var(--border-radius-circular); - margin-inline-end: -.6rem; + margin-inline-start: -.6rem; } - .image-item { margin-inline-end: -.6rem; } + .image-item { margin-inline-start: -.6rem; } - .is-size-x-small { margin-inline-end: -.5rem; } - .is-size-small { margin-inline-end: -.5rem; } - .is-size-large { margin-inline-end: -0.8rem; } + .is-size-x-small { margin-inline-start: -.5rem; } + .is-size-small { margin-inline-start: -.5rem; } + .is-size-large { margin-inline-start: -0.8rem; } } &.is-with-border .avatar { --p-avatar-group-border-color:var(--p-avatar-border-color-default)!important;