.avatar {
display: inline-block; overflow: hidden; // Ensure page layout in Firefox should images fail to load line-height: $lh-condensed-ultra; vertical-align: middle; background-color: var(--color-avatar-bg); // adds opaque bg to transparent avatars border-radius: $border-radius; flex-shrink: 0; // stylelint-disable-next-line primer/box-shadow box-shadow: 0 0 0 1px var(--color-avatar-border);
}
.avatar-link {
float: left; line-height: $lh-condensed-ultra;
}
// User for example on /stars and /user for grids of avatars .avatar-group-item {
display: inline-block; // stylelint-disable-next-line primer/spacing margin-bottom: 3px;
}
// Border radius
.avatar-1, .avatar-2, .avatar-small {
// stylelint-disable-next-line primer/borders border-radius: $border-radius-1;
}
// Sizes
@mixin avatar-size( $size ) {
width: $size; height: $size;
}
.avatar-1 { @include avatar-size( $size-1 ); } .avatar-2 { @include avatar-size( $size-2 ); } .avatar-3 { @include avatar-size( $size-3 ); } .avatar-4 { @include avatar-size( $size-4 ); } .avatar-5 { @include avatar-size( $size-5 ); } .avatar-6 { @include avatar-size( $size-6 ); } .avatar-7 { @include avatar-size( $size-7 ); } .avatar-8 { @include avatar-size( $size-8 ); }