File Manager

Viewing File: _image.scss

/* ###### 5.4 Image   ###### */

.az-img-user {
  display: block;
  position: relative;
  width: 36px;
  height: 36px;
  @include border-radius(100%);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    @include border-radius(100%);
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 3px;
    width: 6px;
    height: 6px;
    background-color: $gray-500;
    box-shadow: 0 0 0 2px rgba(#fff, .95);
    @include border-radius(100%);
  }

  &.online::after {
    background-color: $green;
  }
}

.az-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  @include border-radius(100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 3px;
    width: 6px;
    height: 6px;
    background-color: $gray-500;
    box-shadow: 0 0 0 2px rgba(#fff, .95);
    @include border-radius(100%);
  }

  &.online::after { background-color: $green; }
}