UNPKG

@primer/react

Version:

An implementation of GitHub's Primer Design System using React

2 lines 4.86 kB
.prc-AvatarStack-AvatarStack-N-r3C{--avatar-border-width:1px;--avatar-two-margin:calc(var(--avatar-stack-size)*-0.55);--avatar-three-margin:calc(var(--avatar-stack-size)*-0.85);display:flex;height:var(--avatar-stack-size);min-width:var(--avatar-stack-size);position:relative}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AvatarStack-AvatarStack-N-r3C:where([data-responsive]){--avatar-stack-size:var(--stackSize-narrow)}}@media screen and (min-width:48rem){.prc-AvatarStack-AvatarStack-N-r3C:where([data-responsive]){--avatar-stack-size:var(--stackSize-regular)}}@media screen and (min-width:87.5rem){.prc-AvatarStack-AvatarStack-N-r3C:where([data-responsive]){--avatar-stack-size:var(--stackSize-wide)}}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="1"]) .prc-AvatarStack-AvatarItem-nS1mt{box-shadow:0 0 0 var(--avatar-border-width) var(--avatar-borderColor,var(--color-avatar-border))}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="2"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) + var(--avatar-two-margin) + var(--avatar-border-width))}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="3"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) + var(--avatar-two-margin) + var(--avatar-stack-size) + var(--avatar-three-margin))}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="3+"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) + var(--avatar-two-margin) + var(--avatar-stack-size)*2 + var(--avatar-three-margin)*2)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]){justify-content:flex-end}.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]) .prc-AvatarStack-AvatarItem-nS1mt{margin-left:0!important}:is(.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]) .prc-AvatarStack-AvatarItem-nS1mt):first-child{margin-right:0}:is(.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]) .prc-AvatarStack-AvatarItem-nS1mt):nth-child(n+2){margin-right:var(--avatar-two-margin)}:is(.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]) .prc-AvatarStack-AvatarItem-nS1mt):nth-child(n+3){margin-right:var(--avatar-three-margin)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]) .prc-AvatarStack-AvatarStackBody-mSyoJ{flex-direction:row-reverse}:is(:is(.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]) .prc-AvatarStack-AvatarStackBody-mSyoJ):not([data-disable-expand]):hover,:is(.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]) .prc-AvatarStack-AvatarStackBody-mSyoJ):not([data-disable-expand]):focus-within) .prc-AvatarStack-AvatarItem-nS1mt{margin-left:0!important;margin-right:var(--base-size-4,.25rem)!important}:is(:is(:is(.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]) .prc-AvatarStack-AvatarStackBody-mSyoJ):not([data-disable-expand]):hover,:is(.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]) .prc-AvatarStack-AvatarStackBody-mSyoJ):not([data-disable-expand]):focus-within) .prc-AvatarStack-AvatarItem-nS1mt):first-child{margin-right:0!important}.prc-AvatarStack-AvatarStackBody-mSyoJ{display:flex;position:absolute}.prc-AvatarStack-AvatarStackBody-mSyoJ:where([data-disable-expand]){position:relative}.prc-AvatarStack-AvatarItem-nS1mt{--avatarSize-regular:var(--avatar-stack-size);display:flex;flex-shrink:0;height:var(--avatar-stack-size);overflow:hidden;position:relative;width:var(--avatar-stack-size)}.prc-AvatarStack-AvatarItem-nS1mt:is(img){box-shadow:0 0 0 var(--avatar-border-width) var(--bgColor-default,var(--color-canvas-default))}.prc-AvatarStack-AvatarItem-nS1mt:first-child{margin-left:0;z-index:10}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+2){margin-left:var(--avatar-two-margin);z-index:9}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+3){margin-left:var(--avatar-three-margin);opacity:.55;z-index:8}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+4){opacity:.4;z-index:7}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+5){opacity:.25;z-index:6}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+6){opacity:0;visibility:hidden}.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):focus-within,.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):hover{width:auto}:is(.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):hover,.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):focus-within) .prc-AvatarStack-AvatarItem-nS1mt{margin-left:var(--base-size-4,.25rem);opacity:1;transition:margin .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,box-shadow .1s ease-in-out;visibility:visible}:is(:is(.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):hover,.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):focus-within) .prc-AvatarStack-AvatarItem-nS1mt):first-child{margin-left:0} /*# sourceMappingURL=AvatarStack-6c237051.css.map */