1 files changed, 145 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/avatars/avatar-stack.scss b/assets/sass/@primer/css/avatars/avatar-stack.scss
new file mode 100644
index 0000000..9d0247a
--- /dev/null
+++ b/assets/sass/@primer/css/avatars/avatar-stack.scss
@@ -0,0 +1,145 @@
+// 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;
+  }
+}