Delete a lot of unnecessary (i think?) CSS

Author: Sophie Shepherd

modules/primer-avatars/lib/avatar-stack.scss

@@ -47,9 +47,7 @@
 // Refactored, new avatar stack:
 
 .AvatarStack {
-  position: absolute;
-  padding-right: 5px;
-  background: $bg-white;
+  background: inherit;
 
   .avatar {
     position: relative;
@@ -80,24 +78,16 @@
     }
     // stylelint-enable selector-max-type
 
-    &:nth-child(3) {
-      z-index: 1;
-    }
-
     // Account for 4+ avatars
     &:nth-child(n+4) {
-      z-index: 0;
       display: none;
-      margin-left: -15px;
       opacity: 0;
     }
   }
 
   &:hover .avatar:nth-child(n+4) {
     display: inline-block;
-    margin-left: 0;
     opacity: 1;
-    transition: opacity 0.1s, margin-left 0.1s;
   }
 
   &:hover .avatar {
@@ -106,25 +96,18 @@
 }
 
 .avatar.avatar-more {
+  z-index: 1;
   margin-right: 0;
   background: $gray-100;
 
-  &::before,
   &::after {
-    position: absolute;
     display: block;
     height: 20px;
     content: "";
     border-radius: 2px;
     outline: $border-width $border-style $white;
   }
 
-  &::before {
-    z-index: 2;
-    width: 14px;
-    background: $gray-300;
-  }
-
   &::after {
     width: 17px;
     background: $gray-200;

modules/primer-avatars/stories.js

@@ -28,14 +28,18 @@ storiesOf('Avatars', module)
 ))
 .add('AvatarStack', () => (
   <div>
-    <div className='AvatarStack tooltipped tooltipped-se temp-tooltipped-align-left' aria-label='califa, sophshep, jonrohan, and broccolini'>
+    <div className='AvatarStack tooltipped tooltipped-se temp-tooltipped-align-left' aria-label='five avatars'>
       <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
       <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
       <div className='avatar-more avatar'></div>
       <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
       <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
       <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
     </div>
+    <div className='AvatarStack tooltipped tooltipped-se temp-tooltipped-align-left' aria-label='two avatars'>
+      <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      <img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+    </div>
   </div>
 ))
 .add('CircleBadge--small', () => (