Sha256: 7e669a06fa6eaddfbf5fc7aeade16b1bf903aeacca5a63a7daeba9fbc85d4a3b
Contents?: true
Size: 1.64 KB
Versions: 9
Compression:
Stored size: 1.64 KB
Contents
$avatar-xl: 210px;
$avatar-lg: 150px;
$avatar-md: 100px;
$avatar-sm: 70px;
$avatar-xs: 54px;
$avatar-xxs: 32px;
$avatar-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
$avatar-shadow-xs: 0 2px 2px rgba(0, 0, 0, 0.1);
@mixin avatar_size($size) {
height: $size;
width: $size;
min-width: $size; // dont' squish my flex, man
}
.avatar {
position: relative;
padding: 0;
margin-right: 3px;
overflow: hidden;
box-shadow: none;
border-radius: 50%;
border: 4px solid color('gray-100');
@at-root #{&}-xl {
@include avatar_size($avatar-xl);
.avatar-initials {
font-size: $font-size-700;
}
}
@at-root #{&}-lg {
@include avatar_size($avatar-lg);
.avatar-initials {
font-size: $font-size-600;
}
}
@at-root #{&}-md {
@include avatar_size($avatar-md);
.avatar-initials {
font-size: $font-size-500;
}
}
@at-root #{&}-sm {
@include avatar_size($avatar-sm);
.avatar-initials {
font-size: $font-size-400;
}
}
@at-root #{&}-xs {
@include avatar_size($avatar-xs);
border-width: 2px;
&.avatar-with_shadow {
box-shadow: $avatar-shadow-xs;
}
.avatar-initials {
font-size: $font-size-400;
}
}
@at-root #{&}-xxs {
@include avatar_size($avatar-xxs);
border-width: 2px;
&.avatar-with_shadow {
box-shadow: $avatar-shadow-xs;
}
.avatar-initials {
font-size: $font-size-200;
}
}
}
.avatar-with_shadow {
box-shadow: $avatar-shadow;
}
.avatar-initials {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
color: $color-white;
}
Version data entries
9 entries across 9 versions & 1 rubygems