antd-mini/less/Badge/index.less

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

@import (reference) './variable.less';

@badgePrefix: ant-badge;

.@{badgePrefix} {
  display: inline-block;
  position: relative;

  &-content {
    position: absolute;
    display: flex;
    height: 28 * @rpx;
    align-self: center;
    align-items: center;
    font-size: 18 * @rpx;
    padding: 4 * @rpx 8 * @rpx;
    box-sizing: border-box;
    word-break: keep-all;
    justify-content: center;
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%);

    &-stroke {
      border: 2 * @rpx solid @badge-text-color;
    }

    &-text {
      padding-left: 4 * @rpx;

      &:empty {
        display: none;
      }
      .ant-badge-icon-container:empty ~ & {
        padding-left: 0;
      }
    }

    .ant-icon {
      font-size: 18 * @rpx;
      color: @badge-text-color;
    }

    &-not-dot {
      min-width: 28 * @rpx;
      height: 28 * @rpx;
      border-radius: 28 * @rpx;
      display: flex;
      background-color: @badge-background-color;
    }
  }

  &-dot {
    width: 20 * @rpx;
    height: 20 * @rpx;
    border-radius: 50%;
    background-color: @badge-background-color;

    &-stroke {
      border: 2 * @rpx solid @badge-text-color;
    }
  }

  &-number,
  &-text,
  &-bubble {
    color: @badge-text-color;
  }
}