client/src/app/shared/shared-main/account/avatar.component.scss

   1 @import '_mixins';
   2
   3 .wrapper {
   4   $avatar-size: 35px;
   5
   6   width: $avatar-size;
   7   height: $avatar-size;
   8   position: relative;
   9   margin-right: 5px;
  10   margin-bottom: 5px;
  11
  12   &.avatar-sm {
  13     width: 28px;
  14     height: 28px;
  15     margin-bottom: 3px;
  16   }
  17
  18   a {
  19     @include disable-outline;
  20   }
  21
  22   a img {
  23     height: 100%;
  24     object-fit: cover;
  25     position: absolute;
  26     top:50%;
  27     left:50%;
  28     border-radius: 50%;
  29     transform: translate(-50%,-50%)
  30   }
  31
  32   a:nth-of-type(2) img {
  33     height: 60%;
  34     width: 60%;
  35     border: 2px solid pvar(--mainBackgroundColor);
  36     transform: translateX(15%);
  37     position: relative;
  38     background-color: pvar(--mainBackgroundColor);
  39   }
  40 }