primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-08 15:33:53 +03:00
Code Issues Projects Releases Wiki Activity

add first version of non-working right aligned modifier

Browse Source
This commit is contained in:
Joel Califa 2017-11-02 15:27:31 -04:00
parent 0f6465d8b9
commit e374740f0c
2 changed files with 66 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
modules/primer-avatars/lib/avatar-stack.scss
View File

@ -141,3 +141,48 @@
.AvatarStack-body:hover .avatar-more {
display: none;
}
// Right aligned variation
.AvatarStack--right {
.AvatarStack-body {
right: 0;
}
.avatar.avatar-more {
margin-right: -15px;
background: $gray-300;
&::before {
background: $gray-100;
}
&::after {
background: $gray-200;
}
}
.avatar {
margin-right: 0;
margin-left: -15px;
border-right: 0;
border-left: $border-width $border-style $white;
&:last-child {
z-index: 1;
margin-right: -15px;
margin-left: 0;
border-right: 0;
}
}
&:hover .avatar:nth-child(n+4) {
display: inline-block;
opacity: 1;
}
&:hover .avatar {
margin-left: 0;
}
}

25
modules/primer-avatars/stories.js
View File

@ -28,8 +28,8 @@ storiesOf('Avatars', module)
))
.add('AvatarStack', () => (
<div>
<div className='AvatarStack AvatarStack--3' aria-label='five avatars'>
<div className='AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left'>
<div className='AvatarStack AvatarStack--3'>
<div className='AvatarStack-body 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>
@ -38,12 +38,29 @@ storiesOf('Avatars', module)
<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>
<div className='AvatarStack AvatarStack--2' aria-label='two avatars'>
<div className='AvatarStack-body tooltipped tooltipped-se temp-tooltipped-align-left'>
<div className='AvatarStack AvatarStack--2'>
<div className='AvatarStack-body 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>
<div className='AvatarStack AvatarStack--3 AvatarStack--right'>
<div className='AvatarStack-body 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>
<div className='AvatarStack AvatarStack--2 AvatarStack--right'>
<div className='AvatarStack-body 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>
</div>
))
.add('CircleBadge--small', () => (