Sha256: 75596160b46a3e6e3cc6068e01e90a34400e94b14f0e9a9930c6599a48dcc9b7
Contents?: true
Size: 1.86 KB
Versions: 530
Compression:
Stored size: 1.86 KB
Contents
@import "../tokens/border_radius";
@import "../tokens/colors";
@import "../tokens/typography";
$avatar-sizes: (
"xxs": 20px,
"xs": 28px,
"sm": 38px,
"md": 60px,
"base": 60px,
"lg": 80px,
"xl": 100px,
);
[class^=pb_avatar_kit] {
position: relative;
@each $name, $size in $avatar-sizes {
&[class*=_size_#{$name}],
&[class*=_size_#{$name}_thumb] {
width: $size;
height: $size;
object-fit: cover;
position: relative;
flex-shrink: 0;
flex-grow: 0;
flex-basis: $size;
.avatar_wrapper {
width: $size;
height: $size;
object-fit: cover;
border-radius: $border-rad-mega;
background: $slate;
overflow: hidden;
position: relative;
flex-shrink: 0;
flex-grow: 0;
flex-basis: $size;
&::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;
}
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: $border-rad-mega;
object-fit: cover;
display: block;
}
}
[class^=pb_online_status] {
position: absolute;
right: 0;
top: 0;
bottom: auto;
left: auto;
&.size_xxs {
right: -5px;
}
&.size_xs {
right: -4px;
}
&.size_md {
top: auto;
bottom: 6px;
}
&.size_lg {
top: auto;
bottom: 14px;
}
&.size_xl {
top: auto;
bottom: 22px;
}
}
}
}
}
Version data entries
530 entries across 530 versions & 1 rubygems