@hummingbirdui/hummingbird/src/components/avatar.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

@utility avatar-group {
  @layer base {
    @apply flex;
    :where(.avatar) {
      @apply rounded-full border-2 border-contrast -ms-3
      w-[calc(var(--avatar-width)+4px)]
      h-[calc(var(--avatar-height)+4px)];
    }
  }
}
@utility avatar {
  @layer base {
    --avatar-width: --spacing(10);
    --avatar-height: --spacing(10);
    --avatar-bg: var(--color-dark);
    --avatar-color: var(--color-white);
    --avatar-font-weight: var(--font-weight-medium);
    --avatar-font-size: var(--text-lg);

    @apply relative inline-block overflow-hidden
    w-[var(--avatar-width)]
    h-[var(--avatar-height)];

    &[class*='avatar-status-']::before {
      @apply content-[''] 
    absolute right-[14%] bottom-[14%] 
    rounded-full w-2 h-2 
    scale-100 translate-x-[50%] translate-y-[50%];
    }
  }
}
@utility avatar-name {
  @layer base {
    @apply flex items-center justify-center h-full w-full 
    font-[var(--avatar-font-weight)] 
    text-[length:var(--avatar-font-size)] 
    text-[var(--avatar-color)] 
    bg-[var(--avatar-bg)];
  }
}
@utility avatar-status-online {
  @layer base {
    &::before {
      @apply bg-success;
    }
  }
}
@utility avatar-status-offline {
  @layer base {
    &::before {
      @apply bg-dark;
    }
  }
}
@utility avatar-status-away {
  @layer base {
    &::before {
      @apply bg-warning;
    }
  }
}
@utility avatar-status-busy {
  @layer base {
    &::before {
      @apply bg-danger;
    }
  }
}
@utility avatar-xs {
  @layer base {
    --avatar-width: --spacing(6);
    --avatar-height: --spacing(6);
    --avatar-font-size: var(--text-sm);
    &[class*='avatar-status-']::before {
      @apply w-1.5 h-1.5;
    }
  }
}
@utility avatar-sm {
  @layer base {
    --avatar-width: --spacing(8);
    --avatar-height: --spacing(8);
    --avatar-font-size: var(--text-base);
  }
}
@utility avatar-lg {
  @layer base {
    --avatar-width: --spacing(12.5);
    --avatar-height: --spacing(12.5);
    --avatar-font-size: var(--text-xl);
  }
}