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

tdesign-mobile-vue

@import "../../../base.less";

@import "./_var.less";

@import "./_mixin.less";

.@{prefix}-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: @avatar-bg-color;
  color: @avatar-content-color;

  &__wrapper {
    display: inline-flex;
    position: relative;
    vertical-align: top;
    margin-left: @avatar-margin-left;
  }

  &--large {
    width: @avatar-large-width;
    height: @avatar-large-width;
    font-size: @avatar-text-large-font-size;

    .@{prefix}-avatar__icon {
      font-size: @avatar-icon-large-font-size;
    }
  }

  &--medium {
    width: @avatar-medium-width;
    height: @avatar-medium-width;
    font-size: @avatar-text-medium-font-size;

    .@{prefix}-avatar__icon {
      font-size: @avatar-icon-medium-font-size;
    }
  }

  &--small {
    width: @avatar-small-width;
    height: @avatar-small-width;
    font-size: @avatar-text-small-font-size;

    .@{prefix}-avatar__icon {
      font-size: @avatar-icon-small-font-size;
    }
  }

  .@{prefix}-image,
  &__image {
    width: 100%;
    height: 100%;
  }

  &--circle {
    border-radius: @avatar-circle-border-radius;
    overflow: hidden;
  }

  &--round {
    border-radius: @avatar-round-border-radius;
    overflow: hidden;
  }

  &__text,
  &__icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    &:empty {
      width: 0;
      height: 0;
    }
  }

  // 头像边框
  &--border {
    border-color: @avatar-border-color;
    border-style: solid;

    &-small {
      border-width: @avatar-border-width-small;
    }

    &-medium {
      border-width: @avatar-border-width-medium;
    }

    &-large {
      border-width: @avatar-border-width-large;
    }
  }
}

// 头像组
.@{prefix}-avatar-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;

  &-offset-left,
  &-offset-right {
    & .@{prefix}-avatar__wrapper {
      padding: @avatar-group-line-spacing 0;
    }

    &-small {
      --td-avatar-margin-left: @avatar-group-offset-small; // ‘small’尺寸组合头像偏移间距
    }

    &-medium {
      --td-avatar-margin-left: @avatar-group-offset-medium; // ‘medium’尺寸组合头像偏移间距
    }

    &-large {
      --td-avatar-margin-left: @avatar-group-offset-large; // ‘large’尺寸组合头像偏移间距
    }
  }

  &__collapse--slot,
  &__collapse--default {
    z-index: 0;
    font-weight: 600;
  }

  &-offset-left {
    .generate-z-index(@avatar-group-init-zIndex);
  }

  &__collapse--slot {
    float: left;
  }

  &__collapse--slot:not(:empty) + &__collapse--default {
    display: none;
    float: left;
  }

  &__collapse--slot:empty + &__collapse--default {
    display: block;
    float: left;
  }
}