wehub-resource-sync
83 lines
1.6 KiB
CSS
83 lines
1.6 KiB
CSS
/* Base avatar styles */
|
|
.avatar {
|
|
@apply relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-3xl bg-default;
|
|
}
|
|
|
|
/* Avatar fallback element */
|
|
.avatar__fallback {
|
|
@apply flex size-full items-center justify-center bg-default text-sm font-medium;
|
|
}
|
|
|
|
/* Avatar image element */
|
|
.avatar__image {
|
|
@apply absolute inset-0 aspect-square size-full;
|
|
|
|
/**
|
|
* Transitions
|
|
*/
|
|
@apply transition-opacity duration-250 motion-reduce:transition-none;
|
|
}
|
|
|
|
/* Size modifiers */
|
|
.avatar--sm {
|
|
@apply size-8 rounded-2xl;
|
|
}
|
|
|
|
.avatar--md {
|
|
/* No styles as this is the default size */
|
|
}
|
|
|
|
.avatar--lg {
|
|
@apply size-12 rounded-3xl;
|
|
|
|
.avatar__fallback {
|
|
@apply text-base;
|
|
}
|
|
}
|
|
|
|
/* Color modifiers for fallback */
|
|
.avatar__fallback--accent {
|
|
@apply text-accent-soft-foreground;
|
|
}
|
|
|
|
.avatar__fallback--default {
|
|
@apply text-default-soft-foreground;
|
|
}
|
|
|
|
.avatar__fallback--success {
|
|
@apply text-success-soft-foreground;
|
|
}
|
|
|
|
.avatar__fallback--warning {
|
|
@apply text-warning-soft-foreground;
|
|
}
|
|
|
|
.avatar__fallback--danger {
|
|
@apply text-danger-soft-foreground;
|
|
}
|
|
|
|
/* Variant modifiers */
|
|
.avatar--soft {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
.avatar--soft .avatar__fallback--accent {
|
|
@apply bg-accent-soft text-accent-soft-foreground;
|
|
}
|
|
|
|
.avatar--soft .avatar__fallback--success {
|
|
@apply bg-success-soft text-success-soft-foreground;
|
|
}
|
|
|
|
.avatar--soft .avatar__fallback--warning {
|
|
@apply bg-warning-soft text-warning-soft-foreground;
|
|
}
|
|
|
|
.avatar--soft .avatar__fallback--default {
|
|
@apply bg-default-soft text-default-soft-foreground;
|
|
}
|
|
|
|
.avatar--soft .avatar__fallback--danger {
|
|
@apply bg-danger-soft text-danger-soft-foreground;
|
|
}
|