style: refactor avatar component styles

This commit is contained in:
2026-06-23 08:02:31 +02:00
parent 455acd9552
commit 3e4d609d6c
+17 -6
View File
@@ -1,21 +1,32 @@
@use '../../styles/tokens/typography' as *; @use "../../styles/tokens/typography" as *;
.avatar { .avatar {
display: flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: var(--nds-radius-full);
overflow: hidden; overflow: hidden;
width: 40px; width: 40px;
height: 40px; height: 40px;
flex-shrink: 0;
background-color: var(--nds-primary-soft);
box-shadow: inset 0 0 0 1px var(--nds-border);
&__content { &__content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
@include text-base; @include text-label;
color: var(--nds-color-on-primary); color: var(--nds-primary);
background-color: var(--nds-disabled); object-fit: cover;
}
&__fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--nds-primary);
} }
} }