views/mdc/assets/scss/components/avatar.scss
.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;
}