@alifd/meet-react/es/avatar/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component avatar
  @display Avatar
  @chinese 头像
  @family data-display
*/
:root {
  /*
    @desc small-size
    @semantic 尺寸(小号)
    @namespace size
  */
  --avatar-small-size: var(--s-6);
  /*
    @desc medium-size
    @semantic 尺寸(中号)
    @namespace size
  */
  --avatar-medium-size: var(--s-9);
  /*
    @desc large-size
    @semantic 尺寸(大号)
    @namespace size
  */
  --avatar-large-size: var(--s-12);
  /*
    @desc small-font-size
    @semantic 字体大小(小号)
    @namespace size
  */
  --avatar-small-font-size: var(--p-caption-font-size);
  /*
    @desc medium-font-size
    @semantic 字体大小(中号)
    @namespace size
  */
  --avatar-medium-font-size: var(--p-body-1-font-size);
  /*
    @desc large-font-size
    @semantic 字体大小(大号)
    @namespace size
  */
  --avatar-large-font-size: var(--p-body-2-font-size);
  /*
    @desc small-icon-size
    @semantic 图标大小(小号)
    @namespace size
  */
  --avatar-small-icon-size: var(--s-4);
  /*
    @desc medium-icon-size
    @semantic 图标大小(中号)
    @namespace size
  */
  --avatar-medium-icon-size: var(--s-5);
  /*
    @desc large-icon-size
    @semantic 图标大小(大号)
    @namespace size
  */
  --avatar-large-icon-size: var(--s-6);
  /*
    @desc circle-corner-size
    @semantic 圆形圆角尺寸
    @namespace size
    @unconfigurable
  */
  --avatar-circle-corner: var(--corner-circle);
  /*
    @desc square-corner-size
    @namespace size
    @semantic 方形圆角尺寸
  */
  --avatar-square-corner: var(--corner-1);
  /*
    @desc bg-color
    @semantic 背景色
    @namespace style
  */
  --avatar-bg-color: var(--color-fill1-4);
  /*
    @desc text-color
    @semantic 字体颜色
    @namespace style
  */
  --avatar-font-color: var(--color-white);
  /*
    @desc icon-color
    @semantic 图标颜色
    @namespace style
  */
  --avatar-icon-color: var(--color-white);
}

.mt-avatar {
  display: inline-block;
  position: relative;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--avatar-font-color);
  background: var(--avatar-bg-color);
}
.mt-avatar--small {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--avatar-small-size);
  height: var(--avatar-small-size);
  font-size: var(--avatar-small-font-size);
}
.mt-avatar--small > img {
  width: 100%;
  height: 100%;
}
.mt-avatar-icon--small {
  font-size: var(--avatar-small-icon-size);
}
.mt-avatar .icon::before {
  display: inline-block;
  color: var(--avatar-icon-color);
}
.mt-avatar--medium {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--avatar-medium-size);
  height: var(--avatar-medium-size);
  font-size: var(--avatar-medium-font-size);
}
.mt-avatar--medium > img {
  width: 100%;
  height: 100%;
}
.mt-avatar-icon--medium {
  font-size: var(--avatar-medium-icon-size);
}
.mt-avatar .icon::before {
  display: inline-block;
  color: var(--avatar-icon-color);
}
.mt-avatar--large {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--avatar-large-size);
  height: var(--avatar-large-size);
  font-size: var(--avatar-large-font-size);
}
.mt-avatar--large > img {
  width: 100%;
  height: 100%;
}
.mt-avatar-icon--large {
  font-size: var(--avatar-large-icon-size);
}
.mt-avatar .icon::before {
  display: inline-block;
  color: var(--avatar-icon-color);
}
.mt-avatar--circle {
  border-radius: var(--avatar-circle-corner);
}
.mt-avatar--square {
  border-radius: var(--avatar-square-corner);
}