mirror of
https://github.com/primer/css.git
synced 2024-12-02 07:53:06 +03:00
cd3a4f0678
Recommendation from a support request; should ensure any child avatar in the pairing is visible even with a transparent background.
38 lines
788 B
SCSS
38 lines
788 B
SCSS
.avatar {
|
|
display: inline-block;
|
|
overflow: hidden; // Ensure page layout in Firefox should images fail to load
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.avatar-small { border-radius: 2px; }
|
|
|
|
.avatar-link {
|
|
float: left;
|
|
line-height: 1;
|
|
}
|
|
|
|
// User for example on /stars and /user for grids of avatars
|
|
.avatar-group-item {
|
|
display: inline-block;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
// .avatar-parent-child is when you see a small avatar at the bottom right
|
|
// corner of a larger avatar.
|
|
//
|
|
// No Styleguide version
|
|
.avatar-parent-child {
|
|
position: relative;
|
|
}
|
|
|
|
.avatar-child {
|
|
position: absolute;
|
|
right: -15%;
|
|
bottom: -9%;
|
|
background-color: #fff; // For transparent backgrounds
|
|
border-radius: 2px;
|
|
box-shadow: -2px -2px 0 rgba(255, 255, 255, 0.8);
|
|
}
|