primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-02 07:53:06 +03:00
Code Issues Projects Releases Wiki Activity

replace inline-block with flexbox

Browse Source
This commit is contained in:
Joel Califa 2017-11-02 18:52:29 -04:00
parent a73abaeb9a
commit 2fa1d34897
1 changed files with 3 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,7 +50,6 @@
position: relative; position: relative;
min-width: 26px; min-width: 26px;
height: 20px; height: 20px;
font-size: 0;
&.AvatarStack--2 { &.AvatarStack--2 {
min-width: 36px; min-width: 36px;
@ -63,13 +62,14 @@
.AvatarStack-body { .AvatarStack-body {
position: absolute; position: absolute;
display: flex;
padding-right: 2px; padding-right: 2px;
background: $bg-white; background: $bg-white;
.avatar { .avatar {
position: relative; position: relative;
z-index: 2; z-index: 2;
display: inline-block; display: flex;
width: 20px; width: 20px;
height: 20px; height: 20px;
box-sizing: content-box; box-sizing: content-box;
@ -102,7 +102,7 @@
} }
.avatar:nth-child(n+4) { .avatar:nth-child(n+4) {
display: inline-block; display: flex;
opacity: 1; opacity: 1;
} }
@ -143,18 +143,10 @@
.AvatarStack--right { .AvatarStack--right {
.AvatarStack-body { .AvatarStack-body {
right: 0; right: 0;
display: flex;
padding-right: 0; padding-right: 0;
padding-left: 2px; padding-left: 2px;
flex-direction: row-reverse; flex-direction: row-reverse;
// stylelint-disable selector-max-specificity
&:hover .avatar:nth-child(n+4) {
display: inline-block;
opacity: 1;
}
// stylelint-enable selector-max-specificity
&:hover .avatar { &:hover .avatar {
margin-right: 0; margin-right: 0;
margin-left: 3px; margin-left: 3px;