// Stacked avatars can be used to show who is participating in thread when // there is limited space available.
.AvatarStack {
position: relative; min-width: 26px; height: 20px; .AvatarStack-body { position: absolute; } &.AvatarStack--two { min-width: 36px; } &.AvatarStack--three-plus { min-width: 46px; }
}
.AvatarStack-body {
display: flex; background: var(--color-bg-canvas); .avatar { position: relative; z-index: 2; display: flex; width: 20px; height: 20px; box-sizing: content-box; // stylelint-disable-next-line primer/spacing margin-right: -11px; background-color: var(--color-bg-canvas); border-right: $border-width $border-style var(--color-bg-canvas); // stylelint-disable-line primer/borders // stylelint-disable-next-line primer/borders border-radius: $border-radius-1; transition: margin 0.1s ease-in-out; &:first-child { z-index: 3; } &:last-child { z-index: 1; border-right: 0; } // stylelint-disable selector-max-type img { // stylelint-disable-next-line primer/borders border-radius: $border-radius-1; } // stylelint-enable selector-max-type // Account for 4+ avatars &:nth-child(n+4) { display: none; opacity: 0; } } &:hover { .avatar { // stylelint-disable-next-line primer/spacing margin-right: 3px; } // stylelint-disable-next-line selector-max-specificity .avatar:nth-child(n+4) { display: flex; opacity: 1; } .avatar-more { display: none !important; } }
}
.avatar.avatar-more {
z-index: 1; margin-right: 0; background: var(--color-bg-tertiary); &::before, &::after { position: absolute; display: block; height: 20px; content: ""; // stylelint-disable-next-line primer/borders border-radius: 2px; outline: $border-width $border-style var(--color-bg-canvas); } &::before { width: 17px; // stylelint-disable-next-line primer/colors background: var(--color-avatar-stack-fade-more); } &::after { width: 14px; // stylelint-disable-next-line primer/colors background: var(--color-avatar-stack-fade); }
}
// Right aligned variation
.AvatarStackâright {
.AvatarStack-body { right: 0; flex-direction: row-reverse; &:hover .avatar { margin-right: 0; // stylelint-disable-next-line primer/spacing margin-left: 3px; } } .avatar.avatar-more { // stylelint-disable-next-line primer/colors background: var(--color-avatar-stack-fade); &::before { width: 5px; } &::after { width: 2px; background: var(--color-bg-tertiary); } } .avatar { margin-right: 0; // stylelint-disable-next-line primer/spacing margin-left: -11px; border-right: 0; border-left: $border-width $border-style var(--color-bg-canvas); // stylelint-disable-line primer/borders }
}