zarm-web/lib/badge/style/index.css

基于 React 的桌面端UI库

.zw-badge {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.zw-badge__content {
  background-color: var(--theme-danger);
}

.zw-badge__content {
  display: flex;
  justify-content: center;
  align-items: center;
  top: auto;
  color: var(--badge-text-color);
  font-size: var(--badge-font-size);
  height: var(--badge-height);
  padding: 0 var(--badge-padding-h);
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.zw-badge--primary .zw-badge__content {
  background-color: var(--theme-primary);
}

.zw-badge--success .zw-badge__content {
  background-color: var(--theme-success);
}

.zw-badge--warning .zw-badge__content {
  background-color: var(--theme-warning);
}

.zw-badge--danger .zw-badge__content {
  background-color: var(--theme-danger);
}

.zw-badge--dot .zw-badge__content {
  width: var(--badge-dot-diameter);
  height: var(--badge-dot-diameter);
  padding: 0;
  border-radius: var(--radius-circle);
}

.zw-badge--radius .zw-badge__content {
  border-radius: var(--badge-border-radius-rect);
}

.zw-badge--round .zw-badge__content {
  min-width: var(--badge-height);
  border-radius: var(--badge-border-radius-round);
}

.zw-badge--circle .zw-badge__content {
  width: var(--badge-height);
  border-radius: var(--radius-circle);
  padding: 0;
}

.zw-badge--leaf .zw-badge__content {
  min-width: var(--badge-height);
  border-radius: var(--badge-border-radius-round) var(--badge-border-radius-round) var(--badge-border-radius-round) 0;
}

.zw-badge--sup .zw-badge__content {
  position: absolute;
  top: 0;
  left: 100%;
  transform: translateX(calc(var(--badge-height) / -2)) translateY(var(--badge-sup-top));
}

.zw-badge--sup.zw-badge--dot .zw-badge__content {
  transform: translateX(calc(var(--badge-dot-diameter) / -2)) translateY(-50%);
}