vui-design/src/style/components/avatar.less

A high quality UI Toolkit based on Vue.js

@vui-avatar: ~"@{vui}-avatar";

.@{vui-avatar} {
  position:relative;
  display:inline-block;
  box-sizing:border-box;
  overflow:hidden;
  vertical-align:middle;
  color:@avatar-font-color;
  text-align:center;
  white-space:nowrap;
  transition:all @transition-duration;

  & &-image {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  & &-icon {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
  }
  & &-children {
    position:absolute;
    left:50%;
    transform-origin:0 center;
    transform:scale(1) translateX(-50%);
    line-height:inherit;
  }

  &-with-image {
    background-color:transparent;
  }
  &-with-icon {
    background-color:@avatar-background-color;
  }
  &-with-children {
    background-color:@avatar-background-color;
  }

  &-circle {
    border-radius:50%;
  }
  &-square {
    border-radius:@avatar-border-radius;
  }

  &-small {
    width:@avatar-size-sm;
    height:@avatar-size-sm;
    font-size:@avatar-font-size-sm;
    line-height:@avatar-size-sm;
  }
  &-medium {
    width:@avatar-size-md;
    height:@avatar-size-md;
    font-size:@avatar-font-size-md;
    line-height:@avatar-size-md;
  }
  &-large {
    width:@avatar-size-lg;
    height:@avatar-size-lg;
    font-size:@avatar-font-size-lg;
    line-height:@avatar-size-lg;
  }

  &-group {
    display:inline-flex;
    box-sizing:border-box;
    align-items:center;

    &-item,
    &-placeholder {
      margin-left:-@margin-xs;
    }

    &-item:first-child {
      margin-left:0;
    }
  }

  &-group & {
    box-shadow:0px 0px 0px 1px rgba(255, 255, 255, 1);
  }

  &-group &-group-placeholder & {
    background-color:@avatar-placeholder-background-color;
    color:@avatar-placeholder-font-color;
  }

  &-group-tooltip-content {
    display:block;
    box-sizing:border-box;
  }
}