@zohodesk/components/lib/Avatar/Avatar.module.css

In this Package, we Provide Some Basic Components to Build Web App

.varClass {
  /* avatar default variables */
  --avatar_text_color: var(--zdt_avatar_default_text);
  --avatar_font_size: var(--zd_font_size14);
  --avatar_bg_color: var(--zdt_avatar_default_bg);
  --avatar_border_radius: 50%;
  --avatar_border_width: 0;
  --avatar_border_style: solid;
  --avatar_border_color: var(--zdt_avatar_default_border);
  --avatar_border_hoverColor: var(--zdt_avatar_default_borderHover);
  --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
  --avatar_text_transform: uppercase;
}

.avatar {
  composes: varClass;
  position: relative;
  composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
  vertical-align: middle;
  font-size: var(--avatar_font_size);
  color: var(--avatar_text_color);
  border-width: var(--avatar_border_width);
  border-style: var(--avatar_border_style);
}

.border {
  border-color: var(--avatar_border_color);
}

.borderOnHover:hover, .borderOnActive {
  border-color: var(--avatar_border_hoverColor);
}

.avatar, .primary {
  background-color: var(--avatar_bg_color);
}

.shadow {
  position: absolute;
  height: 100% ;
  width: 100% ;
  top: 0 ;
  pointer-events: none;
  border-radius: var(--avatar_border_radius);
}

[dir=ltr] .shadow {
  left: 0 ;
}

[dir=rtl] .shadow {
  right: 0 ;
}

.shadow.black {
  box-shadow: var(--zd_bs_avatar_black);
}

.shadow.white {
  box-shadow: var(--zd_bs_avatar_white);
}

.avatar, .circle {
  border-radius: var(--avatar_border_radius);
}

.border {
  --avatar_border_width: 1px;
}

.image {
  width: 100% ;
  height: 100% ;
  position: absolute;
  top: 0 ;
  z-index: 0;
  border-radius: var(--avatar_border_radius);
}

[dir=ltr] .image {
  left: 0 ;
}

[dir=rtl] .image {
  right: 0 ;
}

.animate {
  composes: fadeIn modeForward from './../common/animation.module.css';
}

[dir=ltr] .animate {
  animation-duration: var(--zd_transition2);
}

[dir=rtl] .animate {
  animation-duration: var(--zd_transition2);
}

.innerBorder {
  border: 1px solid var(--zdt_avatarteam_innerCircle);
}

.square_small {
  --avatar_border_radius: 4px;
}

.square_xsmall {
  --avatar_border_radius: 6px;
}

.square_medium,
.square_xmedium {
  --avatar_border_radius: 8px;
}

.square_large,
.square_xlarge {
  --avatar_border_radius: 10px;
}

.none {
  display: none;
}

.default {
  --avatar_border_width: 0;
}

.secondary {
  --avatar_bg_color: var(--zdt_avatar_secondary_bg);
}

.info {
  --avatar_bg_color: var(--zdt_avatar_info_bg);
}

.initial {
  text-transform: var(--avatar_text_transform);
  display: inline-block;
}

.xxsmall {
  --avatar_font_size: var(--zd_font_size8);
}

.small {
  --avatar_font_size: var(--zd_font_size9);
}

.xsmall {
  --avatar_font_size: var(--zd_font_size12);
}

.medium {
  --avatar_font_size: var(--zd_font_size14);
}

.xmedium {
  --avatar_font_size: var(--zd_font_size14);
}

.large {
  --avatar_font_size: var(--zd_font_size18);
}

.xlarge {
  --avatar_font_size: var(--zd_font_size28);
}

.white {
  --avatar_text_color: var(--zdt_avatar_white_text);
  --avatar_border_color: var(--zdt_avatar_white_border);
  --avatar_border_hoverColor: var(--zdt_avatar_white_borderHover);
  --avatar_boxshadow: var(--zdt_avatar_white_boxshadow);
}