spur-tailwind/css/components/avatar.css

Spur web UI

.avatar {
  @apply block flex-grow-0 flex-shrink-0 w-16 h-16 text-support-purple border border-support-purple border-solid rounded-full overflow-hidden;
}

.avatar-text {
  @apply flex justify-center items-center w-16 h-16 bg-blue-jeans rounded-full text-3xl text-white uppercase;
}

/* Size modifiers */
.avatar.avatar-xxs,
.avatar-text.avatar-xxs {
  @apply w-8 h-8;
}

.avatar.avatar-xs,
.avatar-text.avatar-xs {
  @apply w-10 h-10;
}

.avatar.avatar-sm,
.avatar-text.avatar-sm {
  @apply w-12 h-12;
}

.avatar.avatar-lg,
.avatar-text.avatar-lg {
  @apply w-18 h-18;
}

.avatar.avatar-xl,
.avatar-text.avatar-xl {
  @apply w-24 h-24;
}

.avatar-text.avatar-xxs {
  @apply text-base;
}

.avatar-text.avatar-xs {
  @apply text-xl;
}

.avatar-text.avatar-sm {
  @apply text-2xl;
}

.avatar-text.avatar-lg {
  @apply text-4xl;
}

.avatar-text.avatar-xl {
  @apply text-5xl;
}

/* color modifiers */
.avatar-text-inverted {
  @apply bg-white text-blue-jeans;
}