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

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component badge
  @display Badge
  @chinese 徽章
  @family data-display
*/
:root {
  /*
    @desc number-size
    @semantic 数字尺寸
    @namespace size/common
  */
  --badge-number-size: var(--s-4);
  /*
    @desc padding(l, r)
    @semantic 左右内边距
    @namespace size/common
  */
  --badge-number-padding: var(--s-1);
  /*
    @desc number-font-size
    @semantic 数字字体大小
    @namespace size/common
  */
  --badge-number-font-size: var(--p-caption-font-size);
  /*
    @desc number-font-color
    @semantic 数字字体颜色
    @namespace style/common
  */
  --badge-number-font-color: var(--box-primary-solid-font-color);
  /*
    @desc bg-color
    @semantic 背景色
    @namespace style/common
  */
  --badge-bg-color: var(--box-warning-text-icon-color);
  /*
    @desc border-color
    @semantic 边框色
    @namespace style/common
  */
  --badge-border-color: var(--color-white);
  /*
    @desc border-width
    @semantic 边框粗细
    @namespace size/common
  */
  --badge-border-width: var(--line-3);
  /*
    @desc unread-bg-color
    @semantic 未读背景色
    @namespace style/common
  */
  --badge-unread-bg-color: var(--box-warning-text-icon-color);
  /*
    @desc dot-bg-color
    @namespace style/common
    @semantic 圆点背景色
  */
  --badge-dot-bg-color: var(--box-warning-text-icon-color);
  /*
    @desc dot-size
    @semantic 圆点尺寸
    @namespace size/common
  */
  --badge-dot-size: var(--s-2);
}

.mt-badge {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.mt-badge-text {
  color: var(--badge-number-font-color);
  font-size: var(--badge-number-font-size);
  line-height: var(--badge-number-size);
}
.mt-badge--auto {
  margin-right: var(--badge-number-size);
}
.mt-badge--custom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.mt-badge-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--badge-number-size);
  height: var(--badge-number-size);
  border-radius: var(--badge-number-size);
  background-color: var(--badge-bg-color);
  box-sizing: border-box;
  /* 这里如果使用 border 的话，边框颜色会跟红点颜色溶到一起 */
  box-shadow: var(--badge-border-color) 0 0 0 var(--badge-border-width);
}
.mt-badge-content--auto {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
}
.mt-badge-content--normal {
  padding-left: var(--badge-number-padding);
  padding-right: var(--badge-number-padding);
}
.mt-badge-content--dot {
  background-color: var(--badge-dot-bg-color);
  border-radius: 100%;
  min-width: var(--badge-dot-size);
  height: var(--badge-dot-size);
  width: var(--badge-dot-size);
}
.mt-badge-content--unread {
  background-color: var(--badge-unread-bg-color);
  border-radius: 100%;
  min-width: var(--badge-dot-size);
  width: var(--badge-dot-size);
  height: var(--badge-dot-size);
  transform: translateX(-100%);
}