vuestic-ui/dist/esm-node/VaAvatar.css

Vue 3 UI Framework

:root,
:host {
  /* General */
  --va-avatar-display: inline-flex;
  --va-avatar-align-items: center;
  --va-avatar-justify-content: center;
  --va-avatar-text-align: center;
  --va-avatar-vertical-align: middle;
  --va-avatar-position: relative;
  --va-avatar-line-height: normal;
  --va-avatar-border-radius: 50%;
  --va-avatar-object-fit: cover;
}
.va-avatar {
  align-items: var(--va-avatar-align-items);
  display: var(--va-avatar-display);
  justify-content: var(--va-avatar-justify-content);
  line-height: var(--va-avatar-line-height);
  position: var(--va-avatar-position);
  text-align: var(--va-avatar-text-align);
  vertical-align: var(--va-avatar-vertical-align);
  border-radius: var(--va-avatar-border-radius);
  font-family: var(--va-font-family);
  background-color: var(--va-background-color-computed);
  color: var(--va-text-color-computed);
  width: var(--va-size-computed);
  min-width: var(--va-size-computed);
  height: var(--va-size-computed);
}
.va-avatar--square {
  --va-avatar-border-radius: 0;
}
.va-avatar img,
.va-avatar svg {
  object-fit: var(--va-avatar-object-fit);
  border-radius: inherit;
  display: inline-flex;
  height: inherit;
  width: inherit;
  margin: auto;
}