tdesign-mobile-vue/esm/_common/style/mobile/components/badge/_index.less

tdesign-mobile-vue

@import '../../base.less';

@import './_var.less';

.@{prefix}-badge {
  position: relative;
  display: inline-flex;
  align-items: start;

  &--basic {
    z-index: 100;
    padding: 0 @badge-basic-padding;
    font: @badge-font;
    color: @badge-text-color;
    background-color: @badge-color;
    text-align: center;
    height: @badge-basic-height;
    border-radius: @badge-border-radius;
  }

  &--dot {
    height: @badge-dot-size;
    border-radius: 50%;
    min-width: @badge-dot-size;
    padding: 0;
  }

  &--count {
    min-width: @badge-basic-width;
    white-space: nowrap;
    box-sizing: border-box;
  }

  &--circle {
    border-radius: calc(@badge-basic-height / 2);
  }

  &__ribbon,
  &__ribbon-right,
  &__triangle-right,
  &__ribbon-left,
  &__triangle-left {
    &-outer {
      position: absolute;
      top: 0;
    }
  }

  &__ribbon,
  &__ribbon-right,
  &__triangle-right {
    &-outer {
      right: 0;
    }
  }

  &__ribbon-left,
  &__triangle-left {
    &-outer {
      left: 0;
    }
  }

  &--bubble {
    border-radius: @border-bubble-border-radius;
  }

  &--ribbon,
  &--ribbon-right,
  &--ribbon-left,
  &--triangle-left,
  &--triangle-right {
    width: calc(@badge-basic-height * 2);
    height: calc(@badge-basic-height * 2);
    border-radius: 0;
    padding: 0;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  &--ribbon,
  &--ribbon-right {
    background: linear-gradient(45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
  }

  &--triangle-right {
    background: linear-gradient(45deg, transparent 50%, @badge-color 50%);
  }

  &--ribbon,
  &--ribbon-right,
  &--triangle-right {
    right: 0;

    .@{prefix}-badge__count {
      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 16px) / 2 + .5px));
    }
  }

  &--ribbon-left {
    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
  }

  &--triangle-left {
    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%);
  }

  &--ribbon-left,
  &--triangle-left {
    left: 0;

    .@{prefix}-badge__count {
      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 16px) / 2 + .5px));
    }
  }

  // size
  &--large {
    font: @badge-large-font;
    height: @badge-large-height;
    min-width: @badge-large-height;
    padding: 0 @badge-large-padding;
  }

  &--large&--circle {
    border-radius: calc(@badge-large-height / 2);
  }

  &--large&--ribbon,
  &--large&--ribbon-right,
  &--large&--ribbon-left,
  &--large&--triangle-right,
  &--large&--triangle-left {
    width: calc(@badge-large-height * 2);
    height: calc(@badge-large-height * 2);
    padding: 0;
  }

  &--large&--ribbon,
  &--large&--ribbon-right,
  &--large&--triangle-right {

    .@{prefix}-badge__count {
      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 20px) / 2 + 1.5px));
    }
  }

  &--large&--ribbon-left,
  &--large&--triangle-left {

    .@{prefix}-badge__count {
      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 20px) / 2 + 1.5px));
    }
  }

  &__content:not(:empty) + &--bubble.@{prefix}-has-count,
  &__content:not(:empty) + &--circle.@{prefix}-has-count,
  &__content:not(:empty) + &--square.@{prefix}-has-count {
    transform-origin: center center;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 0;
    left: 100%;
  }

  &__content-text {
    display: block;
    font: @font-body-large;
    color: @badge-content-text-color;
  }

  &__count {
    &:empty {
      display: none;
    }
  }
}