UNPKG

@primer/react

Version:

An implementation of GitHub's Primer Design System using React

github.com/primer/react

primer/react

1 lines • 6.06 kB
1
{"version":3,"sources":["../src/Popover/Popover.module.css"],"names":[],"mappings":"AAAA,2BAGE,YAAa,CAFb,iBAAkB,CAClB,WAUF,CAPE,8CACE,aACF,CAEA,kDACE,iBACF,CAGF,kCAME,mEAAwC,CACxC,6GAAgE,CAChE,gDAAyC,CAHzC,gBAAiB,CADjB,iBAAkB,CADlB,kCAA4B,CAF5B,iBAAkB,CAClB,WA+LF,CAtLE,iFAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,yCAOE,+BAA4C,CAC5C,iDAA+C,CAA/C,mGAA+C,CAL/C,gBAAiB,CAFjB,qCAQF,CAEA,wCASE,4BAA2C,CAA3C,0EAA2C,CAN3C,6CAA0C,CAD1C,SAQF,CAME,iaAGE,+BAAgC,CADhC,QAEF,CAEA,iNAEE,uEAA4C,CAD5C,wCAEF,CAEA,gNAIE,mEAAwC,CAFxC,YAGF,CAIF,qIAIE,cAAe,CADf,UAkBF,CAfE,iSAEE,SAAU,CACV,aACF,CAEA,iJAEE,UACF,CAEA,gJAEE,UACF,CAIF,mIAGE,SAAU,CACV,aAYF,CAVE,6RAEE,+BAAyB,CACzB,aACF,CAEA,8IAEE,2CACF,CAUA,yxBAKE,+BAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6YAEE,oDACF,CAEA,4YACE,4CACF,CAOA,8MAEE,wEAA6C,CAD7C,uCAEF,CAEA,6MAIE,oEAAyC,CAFzC,WAGF,CAOA,2MAEE,yEAA8C,CAD9C,sCAEF,CAEA,0MAIE,qEAA0C,CAF1C,UAGF,CAMA,yRAEE,8BACF,CAMA,qSAEE,QACF,CAEA,mJACE,+BACF,CAEA,kJAEE,2CACF","file":"Popover-e16fd997.css","sourcesContent":[".Popover {\n position: absolute;\n z-index: 100;\n display: none;\n\n &:where([data-open]) {\n display: block;\n }\n\n &:where([data-relative]) {\n position: relative;\n }\n}\n\n.PopoverContent {\n position: relative;\n width: 232px;\n padding: var(--base-size-24);\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: calc(-1 * var(--base-size-16));\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -9px;\n\n /* TODO: solid? */\n /* stylelint-disable-next-line primer/borders */\n border: var(--base-size-8) solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n top: -14px;\n margin-left: calc(-1 * var(--base-size-8));\n\n /* // todo: solid */\n /* stylelint-disable-next-line primer/borders */\n border: 7px solid transparent;\n /* stylelint-disable-next-line primer/colors */\n border-bottom-color: var(--overlay-bgColor);\n }\n\n /* Bottom-oriented carets */\n :where([data-caret='bottom']) &,\n :where([data-caret='bottom-right']) &,\n :where([data-caret='bottom-left']) & {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: calc(-1 * var(--base-size-16));\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n bottom: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-top-color: var(--overlay-bgColor);\n }\n }\n\n /* Top & Bottom: Right-oriented carets */\n :where([data-caret='top-right']) &,\n :where([data-caret='bottom-right']) & {\n /* stylelint-disable-next-line primer/spacing */\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n right: 20px;\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n right: 21px;\n }\n }\n\n /* Top & Bottom: Left-oriented carets */\n :where([data-caret='top-left']) &,\n :where([data-caret='bottom-left']) & {\n /* stylelint-disable-next-line primer/spacing */\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: var(--base-size-24);\n margin-left: 0;\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n left: calc(var(--base-size-24) + 1px);\n }\n }\n\n /* Right- & Left-oriented carets */\n :where([data-caret='right']) &,\n :where([data-caret='right-top']) &,\n :where([data-caret='right-bottom']) &,\n :where([data-caret='left']) &,\n :where([data-caret='left-top']) &,\n :where([data-caret='left-bottom']) & {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc((var(--base-size-8) + 1px) * -1);\n }\n\n &::after {\n margin-top: calc(-1 * var(--base-size-8));\n }\n }\n\n /* Right-oriented carets */\n :where([data-caret='right']) &,\n :where([data-caret='right-top']) &,\n :where([data-caret='right-bottom']) & {\n &::before {\n right: calc(-1 * var(--base-size-16));\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n right: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-left-color: var(--overlay-bgColor);\n }\n }\n\n /* Left-oriented carets */\n :where([data-caret='left']) &,\n :where([data-caret='left-top']) &,\n :where([data-caret='left-bottom']) & {\n &::before {\n left: calc(-1 * var(--base-size-16));\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n left: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-right-color: var(--overlay-bgColor);\n }\n }\n\n /* Right & Left: Top-oriented carets */\n :where([data-caret='right-top']) &,\n :where([data-caret='left-top']) & {\n &::before,\n &::after {\n top: var(--base-size-24);\n }\n }\n\n /* Right & Left: Bottom-oriented carets */\n :where([data-caret='right-bottom']) &,\n :where([data-caret='left-bottom']) & {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: var(--base-size-16);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n bottom: calc(var(--base-size-16) + 1px);\n }\n }\n}\n"]}