ten-design-vue/lib/theme/components/badge.less

ten-vue

/* dependencies icon */
@import '../vars.less';
.ten-badge {
  display: inline-block;
  .ten-badge__badge {
    padding: 0px 5px;
    line-height: 20px;
    min-width: 20px;
    font-size: @smalltext-level-1-size;
    border-radius: @badge-border-radius-default;
    height: 20px;
    user-select: none;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    &--dot {
      padding: 0;
      width: 6px;
      height: 6px;
      min-width: auto;
      border-radius: 100%;
      font-size: 0;
    }
    &--round {
      border-radius: 10px;
    }
  }
}

.ten-badge--pos-corner {
  position: relative;
  .ten-badge__badge {
    position: absolute;
    left: 100%;
    top: 0;
    transform: translate(-8px, -50%);
    &--dot {
      transform: translate(-50%, -50%);
    }
  }
}

.ten-badge--pos-normal {
  display: inline-flex;
  align-items: center;
  .ten-badge__badge {
    margin-left: 16px;
  }
}

.ten-badge--theme-error {
  .ten-badge__badge {
    background: @error-color;
  }
}
.ten-badge--theme-info {
  .ten-badge__badge {
    background: @primary-color;
  }
}
.ten-badge--theme-success {
  .ten-badge__badge {
    background: @success-color;
  }
}
.ten-badge--theme-warning {
  .ten-badge__badge {
    background: @warning-color;
  }
}
.ten-badge--theme-disabled {
  .ten-badge__badge {
    background: @disabled-color;
  }
}