Sha256: ee0ab0770566c274b7ee18e46059c6c6b70cbf157b797334a7ddd43d209a7865
Contents?: true
Size: 980 Bytes
Versions: 5
Compression:
Stored size: 980 Bytes
Contents
@import "../tokens/border_radius";
@import "../tokens/colors";
@import "../tokens/typography";
.avatar {
$avatar-sizes: (
"xs": 28px,
"sm": 38px,
"md": 60px,
"base": 60px,
"lg": 80px,
"xl": 100px,
);
@each $name, $size in $avatar-sizes {
&_#{$name}, &_#{$name}_thumb {
width: $size;
height: $size;
object-fit: cover;
border-radius: $border-rad-mega;
background: $slate;
overflow: hidden;
position: relative;
&::before {
content: attr(data-initials);
width: 100%;
height: 100%;
display: block;
color: $white;
text-align: center;
font-size: $size * 0.38;
line-height: $size;
text-transform: uppercase;
position: relative;
z-index: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
}
}
}
Version data entries
5 entries across 5 versions & 1 rubygems