@primer/react/lib-esm/AvatarStack/AvatarStack-802bdd7c.css.map

An implementation of GitHub's Primer Design System using React

{"version":3,"sources":["../src/AvatarStack/AvatarStack.module.css"],"names":[],"mappings":"AACA,mCACE,yBAA0B,CAC1B,qDAA0D,CAC1D,eAAgB,CAChB,kBAAmB,CAGnB,YAAa,CAEb,+BAAgC,CAChC,iBAAkB,CAFlB,kCAAmC,CAFnC,iBA2GF,CArGE,iEACE,kDAAqD,CACrD,oEACF,CAEA,+DACE,kDAAqD,CACrD,oEACF,CAGE,mDADF,4DAEI,2CAUJ,CATE,CAEA,oCALF,4DAMI,4CAMJ,CALE,CAEA,sCATF,4DAUI,yCAEJ,CADE,CAIA,uHAEE,gGACF,CAGF,uHAEE,qBACF,CAEA,yIAEE,sBACF,CAEA,kEAME,yFACF,CAEA,wFAOE,4JAIF,CAEA,sFAME,+GACF,CAEA,yFAOE,gKAIF,CAEA,uFAME,+GAAkH,CAElH,oDACF,CAEA,6DACE,cAAe,CAEf,aACF,CAGF,uCAEE,YAAa,CADb,iBAMF,CAHE,oEACE,iBACF,CAGF,kCACE,6CAA8C,CAG9C,YAAa,CAIb,aAAc,CAFd,+BAAgC,CAChC,eAAgB,CAJhB,iBAAkB,CAMlB,iHAI4B,CAR5B,8BA6GF,CAnGE,wGAEE,uDACF,CAEA,wGAEE,qBACF,CAEA,0HAEE,sBACF,CAEA,8CACE,qBACF,CAEA,iDAEE,gDAAmD,CAKnD,sBAAuB,CAQvB,8HAEK,CAdL,+BAAiC,CACjC,gDAEM,CAeN,YACF,CAGA,+GAEE,yFACF,CAGA,+GAEE,yFACF,CAGA,kHACE,oDAAqD,CAGrD,0CACF,CAGA,kHAEE,0CACF,CAGA,kHAEE,0CACF,CAEA,4GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,iDAEE,SAAU,CADV,iBAEF,CAGF,uJAEE,UAsBF,CApBE,8LACE,gBAAiB,CAEjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CADV,kBAeF,CAHE,+MACE,qBACF","file":"AvatarStack-802bdd7c.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n.AvatarStack {\n  --avatar-border-width: 1px;\n  --mask-size: calc(100% + (var(--avatar-border-width) * 2));\n  --mask-start: -1;\n  --opacity-step: 15%;\n\n  position: relative;\n  display: flex;\n  min-width: var(--avatar-stack-size);\n  height: var(--avatar-stack-size);\n  isolation: isolate;\n\n  &:where([data-variant='cascade']) {\n    --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n    --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85);\n  }\n\n  &:where([data-variant='stack']) {\n    --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n    --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55);\n  }\n\n  &:where([data-responsive]) {\n    @media screen and (--viewportRange-narrow) {\n      --avatar-stack-size: var(--stackSize-narrow);\n    }\n\n    @media screen and (--viewportRange-regular) {\n      --avatar-stack-size: var(--stackSize-regular);\n    }\n\n    @media screen and (--viewportRange-wide) {\n      --avatar-stack-size: var(--stackSize-wide);\n    }\n  }\n\n  &:where([data-avatar-count='1'][data-shape='circle']) {\n    .AvatarItem {\n      /* stylelint-disable-next-line primer/box-shadow */\n      box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);\n    }\n  }\n\n  &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 1px 0 rgba(0, 0, 0, 1);\n  }\n\n  &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: -1px 0 rgba(0, 0, 0, 1);\n  }\n\n  &:where([data-avatar-count='2']) {\n    /*\n    MIN-WIDTH CALC FORMULA EXPLAINED:\n    avatar size ➡️ var(--avatar-stack-size)\n    plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n    */\n    min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)));\n  }\n\n  &:where([data-avatar-count='3'][data-variant='cascade']) {\n    /*\n    MIN-WIDTH CALC FORMULA EXPLAINED:\n    avatar size ➡️ var(--avatar-stack-size)\n    plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n    plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)\n    */\n    min-width: calc(\n      var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n        (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))\n    );\n  }\n\n  &:where([data-avatar-count='3'][data-variant='stack']) {\n    /*\n    MIN-WIDTH CALC FORMULA EXPLAINED:\n    avatar size ➡️ var(--avatar-stack-size)\n    plus the visible part of the 2nd avatar & 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 2\n    */\n    min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2);\n  }\n\n  &:where([data-avatar-count='3+'][data-variant='cascade']) {\n    /*\n    MIN-WIDTH CALC FORMULA EXPLAINED:\n    avatar size ➡️ var(--avatar-stack-size)\n    plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n    plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n    */\n    min-width: calc(\n      var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n        (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n    );\n  }\n\n  &:where([data-avatar-count='3+'][data-variant='stack']) {\n    /*\n    MIN-WIDTH CALC FORMULA EXPLAINED:\n    avatar size ➡️ var(--avatar-stack-size)\n    plus the visible part of the 2nd to 4th avatars ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 3\n    */\n    min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3);\n\n    --overlap-size: var(--overlap-size-avatar-three-plus);\n  }\n\n  &:where([data-align-right]) {\n    --mask-start: 1;\n\n    direction: rtl;\n  }\n}\n\n.AvatarStackBody {\n  position: absolute;\n  display: flex;\n\n  &:where([data-disable-expand]) {\n    position: relative;\n  }\n}\n\n.AvatarItem {\n  --avatarSize-regular: var(--avatar-stack-size);\n\n  position: relative;\n  display: flex;\n  width: var(--avatar-stack-size);\n  height: var(--avatar-stack-size);\n  overflow: hidden;\n  flex-shrink: 0;\n  transition:\n    margin 0.2s ease-in-out,\n    opacity 0.2s ease-in-out,\n    mask-position 0.2s ease-in-out,\n    mask-size 0.2s ease-in-out;\n\n  .AvatarStack:where([data-shape='circle']) &:is(img) {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0 var(--avatar-border-width) transparent;\n  }\n\n  .AvatarStack:where([data-shape='square']) &:is(img) {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 1px 0 rgba(255, 255, 255, 1);\n  }\n\n  .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: -1px 0 rgba(255, 255, 255, 1);\n  }\n\n  &:first-child {\n    margin-inline-start: 0;\n  }\n\n  &:nth-child(n + 2) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-inline-start: calc(var(--overlap-size) * -1);\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      var(--mask-size) var(--mask-size),\n      auto;\n    mask-composite: exclude;\n\n    /*\n    HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n    width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n    multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n    subtract the avatar border width ➡️ var(--avatar-border-width)\n    */\n    mask-position:\n      calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,\n      0 0;\n\n    /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */\n    /* stylelint-disable-next-line primer/spacing */\n    padding: 0.1px;\n  }\n\n  /* Circular mask */\n  .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) {\n    /* stylelint-disable-next-line declaration-property-value-no-unknown */\n    mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n  }\n\n  /* Square mask */\n  .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) {\n    /* stylelint-disable-next-line declaration-property-value-no-unknown */\n    mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n  }\n\n  /* Cascade variant override for nth-child(n + 3) */\n  .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) {\n    --overlap-size: var(--overlap-size-avatar-three-plus);\n\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - 2 * var(--opacity-step));\n  }\n\n  /* Cascade variant override for nth-child(n + 4) */\n  .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - 3 * var(--opacity-step));\n  }\n\n  /* Cascade variant override for nth-child(n + 5) */\n  .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - 4 * var(--opacity-step));\n  }\n\n  .AvatarStack:where([data-shape='square']) &:nth-child(1) {\n    z-index: 5;\n  }\n\n  .AvatarStack:where([data-shape='square']) &:nth-child(2) {\n    z-index: 4;\n  }\n\n  .AvatarStack:where([data-shape='square']) &:nth-child(3) {\n    z-index: 3;\n  }\n\n  .AvatarStack:where([data-shape='square']) &:nth-child(4) {\n    z-index: 2;\n  }\n\n  .AvatarStack:where([data-shape='square']) &:nth-child(5) {\n    z-index: 1;\n  }\n\n  &:nth-child(n + 6) {\n    visibility: hidden;\n    opacity: 0;\n  }\n}\n\n.AvatarStackBody:not([data-disable-expand]):hover,\n.AvatarStackBody:not([data-disable-expand]):focus-within {\n  width: auto;\n\n  .AvatarItem {\n    --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */\n\n    margin-inline-start: var(--base-size-4);\n    visibility: visible;\n    opacity: 1;\n\n    /*\n    HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n    width of the full avatar ➡️ var(--avatar-stack-size)\n    multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n    */\n    mask-position:\n      calc(var(--avatar-stack-size) * var(--mask-start)) center,\n      0 0;\n\n    &:first-child {\n      margin-inline-start: 0;\n    }\n  }\n}\n"]}