@primer/css
Version:
The CSS implementation of GitHub's Primer Design System
3 lines (2 loc) • 3.32 kB
CSS
.avatar{display:inline-block;overflow:hidden;line-height:1;vertical-align:middle;background-color:var(--color-avatar-bg);border-radius:6px;flex-shrink:0;box-shadow:0 0 0 1px var(--color-avatar-border)}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:4px}.avatar-1{width:16px;height:16px}.avatar-2{width:20px;height:20px}.avatar-3{width:24px;height:24px}.avatar-4{width:28px;height:28px}.avatar-5{width:32px;height:32px}.avatar-6{width:40px;height:40px}.avatar-7{width:48px;height:48px}.avatar-8{width:64px;height:64px}.avatar-parent-child{position:relative}.avatar-child{position:absolute;right:-15%;bottom:-9%;background-color:var(--color-bg-canvas);border-radius:4px;box-shadow:var(--color-avatar-child-shadow)}.AvatarStack{position:relative;min-width:26px;height:20px}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{display:flex;background:var(--color-bg-canvas)}.AvatarStack-body .avatar{position:relative;z-index:2;display:flex;width:20px;height:20px;box-sizing:content-box;margin-right:-11px;background-color:var(--color-bg-canvas);border-right:1px solid var(--color-bg-canvas);border-radius:4px;transition:margin 0.1s ease-in-out}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{z-index:1;border-right:0}.AvatarStack-body .avatar img{border-radius:4px}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none }.avatar.avatar-more{z-index:1;margin-right:0;background:var(--color-bg-tertiary)}.avatar.avatar-more::before,.avatar.avatar-more::after{position:absolute;display:block;height:20px;content:"";border-radius:2px;outline:1px solid var(--color-bg-canvas)}.avatar.avatar-more::before{width:17px;background:var(--color-avatar-stack-fade-more)}.avatar.avatar-more::after{width:14px;background:var(--color-avatar-stack-fade)}.AvatarStack--right .AvatarStack-body{right:0;flex-direction:row-reverse}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-right:0;margin-left:3px}.AvatarStack--right .avatar.avatar-more{background:var(--color-avatar-stack-fade)}.AvatarStack--right .avatar.avatar-more::before{width:5px}.AvatarStack--right .avatar.avatar-more::after{width:2px;background:var(--color-bg-tertiary)}.AvatarStack--right .avatar{margin-right:0;margin-left:-11px;border-right:0;border-left:1px solid var(--color-bg-canvas)}.CircleBadge{display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-canvas);border-radius:50%;box-shadow:var(--color-shadow-medium)}.CircleBadge-icon{max-width:60% ;height:auto ;max-height:55% }.CircleBadge--small{width:56px;height:56px}.CircleBadge--medium{width:96px;height:96px}.CircleBadge--large{width:128px;height:128px}.DashedConnection{position:relative}.DashedConnection::before{position:absolute;top:50%;left:0;width:100%;content:"";border-bottom:2px dashed var(--color-border-primary)}.DashedConnection .CircleBadge{position:relative}
/*# sourceMappingURL=avatars.css.map */