rx/presenters

View on GitHub
views/mdc/assets/scss/components/avatar.scss

Summary

Maintainability
Test Coverage

.v-avatar {
  margin-left: 0;
  border-radius: 50%;
  color: white;
  background-color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38));
  align-items: center;
  justify-content: center;
  display: inline-flex;
  flex-shrink: 0;
  &.v-avatar-size-small {
    width: 30px;
    height: 30px;
  }
  &.v-avatar-size-default, &.v-avatar-size-medium {
    width: 40px;
    height: 40px;
  }
  &.v-avatar-size-large {
    width: 50px;
    height: 50px;
  }
  &.v-avatar-size-x-large {
    width: 60px;
    height: 60px;
  }
  &.v-avatar-size-xx-large {
    width: 110px;
    height: 110px;
  }
  > img {
    width: 100%;
  }
}

.v-card-media {
  .v-avatar {
    margin: 8px;
    &.v-avatar-size-small {
      width: 30px;
      height: 30px;
    }
    &.v-avatar-size-default, &.v-avatar-size-medium {
      width: 40px;
      height: 40px;
    }
    &.v-avatar-size-large {
      width: 50px;
      height: 50px;
    }
    &.v-avatar-size-x-large {
      width: 60px;
      height: 60px;
    }
    &.v-avatar-size-xx-large {
      width: 110px;
      height: 110px;
    }
  }
}



.v-column > .v-avatar,
.v-content > .v-avatar {
  margin: 8px;
}

.v-avatar-position-left {
  float:left;
}

.v-avatar-position-top {
  position: absolute;
  top: 0;
}

.v-avatar-position-right {
  float:right;
}

.v-avatar-position-bottom {
  position: absolute;
  bottom: 0;
}