diff options
Diffstat (limited to 'assets/sass/@primer/css/avatars/avatar-stack.scss')
-rw-r--r-- | assets/sass/@primer/css/avatars/avatar-stack.scss | 145 |
1 files changed, 0 insertions, 145 deletions
diff --git a/assets/sass/@primer/css/avatars/avatar-stack.scss b/assets/sass/@primer/css/avatars/avatar-stack.scss deleted file mode 100644 index 9d0247a..0000000 --- a/assets/sass/@primer/css/avatars/avatar-stack.scss +++ /dev/null @@ -1,145 +0,0 @@ -// 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: $bg-white; - - .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: $bg-white; - border-right: $border-width $border-style $border-white; - // stylelint-disable-next-line primer/borders - border-radius: 2px; - 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: 2px; - } - // 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; - } - - .avatar:nth-child(n+4) { - display: flex; - opacity: 1; - } - - .avatar-more { - display: none !important; - } - } -} - -.avatar.avatar-more { - z-index: 1; - margin-right: 0; - background: $bg-gray; - - &::before, - &::after { - position: absolute; - display: block; - height: 20px; - content: ""; - // stylelint-disable-next-line primer/borders - border-radius: 2px; - outline: $border-width $border-style $white; - } - - &::before { - width: 17px; - // stylelint-disable-next-line primer/colors - background: $gray-200; - } - - &::after { - width: 14px; - // stylelint-disable-next-line primer/colors - background: $gray-300; - } -} - -// 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: $gray-300; - - &::before { - width: 5px; - } - - &::after { - width: 2px; - background: $bg-gray; - } - } - - .avatar { - margin-right: 0; - // stylelint-disable-next-line primer/spacing - margin-left: -11px; - border-right: 0; - border-left: $border-width $border-style $border-white; - } -} |