@zohodesk/components 1.0.0-temp-139 → 1.0.0-temp-141

package/lib/Avatar/Avatar.module.css

@@ -1,141 +1,176 @@
-.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: inset 0px 0px 5px var(--avatar_boxshadow);
-}
-.shadow.white {
-  box-shadow: inset 0px 0px 11px var(--avatar_boxshadow);
-}
-.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);
-}
+.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);
+}