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

tdesign-mobile-vue

@import "./_var.less";

.avatar-size(@size, @font-size, @avatar-icon-size) {
  width: @size;
  height: @size;
  font-size: @font-size;

  & .@{prefix}-avatar__icon {
    display: flex;
    font-size: @avatar-icon-size;
  }

  & img {
    height: @size;
    width: @size;
  }
}

.avatar-group-offset-right(@offset) {
  margin-right: @offset;
}

.avatar-group-offset-left(@offset) {
  margin-left: @offset;
}

.avatar-group-border-width(@width) {
  .@{prefix}-avatar__inner {
    border: @width solid @avatar-border-color;
  }
}

.generate-z-index(@n, @i: 1) when (@i =< @n) {

  & .@{prefix}-avatar:nth-child(@{i}) {
    z-index: (@avatar-group-init-zIndex - @i);
  }
  .generate-z-index(@n, (@i + 1));
}

.avatar-group-size-left-with-size() {
  .avatar-group-offset-left(@avatar-group-offset-medium);

  &.@{prefix}-size-s {
    .avatar-group-offset-left(@avatar-group-offset-small);
  }

  &.@{prefix}-size-l {
    .avatar-group-offset-left(@avatar-group-offset-large);
  }
}

.avatar-group-border-width-with-size() {
  .avatar-group-border-width(@avatar-border-width-medium);

  &.@{prefix}-size-s {
    .avatar-group-border-width(@avatar-border-width-small);
  }

  &.@{prefix}-size-l {
    .avatar-group-border-width(@avatar-border-width-large);
  }
}