v4web-components/dist/collection/components/others/lab-ds-avatar/lab-ds-avatar.css

Stencil Component Starter

.avatar {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--lab-ds-semantic-placeholder-space-padding-none);
  border-radius: 100%;
  background-color: var(--lab-ds-semantic-color-bg-default);
  color: var(--lab-ds-semantic-color-fg-default);
  border-color: var(--lab-ds-semantic-color-bg-cloudy);
  border-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-style: solid;
}

.avatar.disabled {
  opacity: var(--lab-ds-core-opacity-50);
  cursor: not-allowed;
}

.name {
  text-transform: uppercase;
}

.avatar.x-small {
  width: var(--lab-ds-semantic-selectable-size-sm);
  height: var(--lab-ds-semantic-selectable-size-sm);
}

.avatar.x-small .name {
  font: var(--lab-ds-semantic-typography-heading-h8);
}

.avatar.small {
  width: var(--lab-ds-semantic-selectable-size-sm);
  height: var(--lab-ds-semantic-selectable-size-sm);
}

.avatar.small .name {
  font: var(--lab-ds-semantic-typography-heading-h8);
}

.avatar.medium {
  width: var(--lab-ds-semantic-selectable-size-m);
  height: var(--lab-ds-semantic-selectable-size-m);
}

.avatar.medium .name {
  font: var(--lab-ds-semantic-typography-heading-h6);
}

.avatar.large {
  width: var(--lab-ds-semantic-selectable-size-l);
  height: var(--lab-ds-semantic-selectable-size-l);
}

.avatar.large .name {
  font: var(--lab-ds-semantic-typography-heading-h5);
}

.avatar.x-large {
  width: var(--lab-ds-semantic-selectable-size-xl);
  height: var(--lab-ds-semantic-selectable-size-xl);
}

.avatar.x-large .name {
  font: var(--lab-ds-semantic-typography-heading-h4);
}

.avatar.xx-large {
  width: var(--lab-ds-semantic-selectable-size-xxl);
  height: var(--lab-ds-semantic-selectable-size-xxl);
}

.avatar.xx-large .name {
  font: var(--lab-ds-semantic-typography-heading-h4);
}