naive-ui/styles/Avatar.scss

@import './mixins/mixins.scss';

@mixin avatar-size-mixin($size) {
  @include m($size + '-size') {
    $width: map-get($--n-height, $size);
    width: $width;
    height: $width;
    @include m(circle-shaped, round-shaped) {
      border-radius: $width / 2;
    }
    @include e(text) {
      line-height: 1.25;
    }
    @include b(icon) {
      font-size: $width;
    }
  }
}

@include themes-mixin {
  @include b(avatar) {
    @include avatar-size-mixin('small');
    @include avatar-size-mixin('medium');
    @include avatar-size-mixin('large');
    @include b(icon) {
      transition: fill .3s $default-cubic-bezier;
      fill: white;
      vertical-align: bottom;
    }
    color: white;
    transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
    background-color: $--overlay-5;
    font-size: 14px;
    display: inline-block;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    img {
      width: 100%;
      height: 100%;
    }
    @include e(text) {
      white-space: nowrap;
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }
}