@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1 lines • 4.09 kB
Source Map (JSON)
{"version":3,"sources":["../src/Card/Card.module.css.js"],"names":[],"mappings":"AAAA,qBAOE,4CAAwC,CAFxC,gFAAgE,CAChE,kFAAuC,CALvC,YAAa,CAOb,gCAA4B,CAJ5B,+BAAgC,CADhC,eAAgB,CADhB,iBAwCF,CAhCE,+CACE,8CACF,CAEA,gDACE,gDACF,CAEA,0CAEE,4CACF,CAEA,6CAEE,4CACF,CAEA,wCACE,SACF,CAEA,0CAEE,sBAAuB,CADvB,YAAa,CAEb,oCACF,CAEA,+DAEE,wCACF,CAGF,2BACE,aAAc,CAEd,WAAY,CADZ,UAOF,CAJE,6EACE,aAAc,CACd,UACF,CAGF,qCAIE,yDAAqD,CADrD,0DAAsD,CADtD,wDAAoD,CAGpD,yDAEF,CAEA,0BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,yBAEE,kBAAmB,CAEnB,kCAA2B,CAH3B,YAAa,CAEb,0BAUF,CAPE,2EAKE,6CAAsC,CADtC,gDAAyC,CADzC,+BAA2B,CAF3B,sBAAuB,CACvB,8BAIF,CAGF,yBACE,YAAa,CACb,gCAKF,CAHE,2EACE,aACF,CAGF,4BACE,YAAa,CACb,oCACF,CAEA,4BAEE,oCAA6B,CAD7B,2KAAuC,CAEvC,QAOF,CALE,8EAGE,8CAAuC,CAFvC,iBAAkB,CAClB,sCAEF,CAGF,gCAGE,QACF,CAEA,sEAJE,kCAA2B,CAD3B,8KAWF,CANA,sCAEE,kBAAmB,CADnB,YAAa,CAEb,gCAGF,CAEA,iCAEE,kBAAmB,CADnB,YAAa,CAGb,8KAAsC,CADtC,oCAEF,CAEA,2BACE,iBAAkB,CAElB,8BAA0B,CAD1B,4BAAwB,CAExB,SACF","file":"Card-59b77d05.css","sourcesContent":[".Card {\n display: grid;\n position: relative;\n overflow: hidden;\n grid-auto-rows: max-content auto;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n box-shadow: var(--shadow-resting-small);\n background-color: var(--bgColor-default);\n gap: var(--stack-gap-normal);\n\n &[data-border-radius='large'] {\n border-radius: var(--borderRadius-large);\n }\n\n &[data-border-radius='medium'] {\n border-radius: var(--borderRadius-medium);\n }\n\n &[data-padding='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious);\n }\n\n &[data-padding='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed);\n }\n\n &[data-padding='none'] {\n padding: 0;\n }\n\n &[data-layout='compact'] {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &[data-layout='compact'][data-padding='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal);\n }\n}\n\n.CardHeader {\n display: block;\n width: 100%;\n height: auto;\n\n .Card:where([data-layout='compact']) & {\n flex: 0 0 auto;\n width: auto;\n }\n}\n\n.CardHeaderEdgeToEdge {\n /* stylelint-disable primer/spacing */\n margin-top: calc(-1 * var(--stack-padding-spacious));\n margin-right: calc(-1 * var(--stack-padding-spacious));\n margin-left: calc(-1 * var(--stack-padding-spacious));\n width: calc(100% + 2 * var(--stack-padding-spacious));\n /* stylelint-enable primer/spacing */\n}\n\n.CardImage {\n display: block;\n width: 100%;\n height: auto;\n}\n\n.CardIcon {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n color: var(--fgColor-muted);\n\n .Card:where([data-layout='default']) & {\n justify-content: center;\n width: var(--base-size-32);\n height: var(--base-size-32);\n border-radius: var(--borderRadius-medium);\n background-color: var(--bgColor-muted);\n }\n}\n\n.CardBody {\n display: grid;\n gap: var(--stack-gap-normal);\n\n .Card:where([data-layout='compact']) & {\n flex: 1 1 auto;\n }\n}\n\n.CardContent {\n display: grid;\n gap: var(--stack-gap-condensed);\n}\n\n.CardHeading {\n font: var(--text-title-shorthand-small);\n color: var(--fgColor-default);\n margin: 0;\n\n .Card:where([data-layout='compact']) & {\n position: relative;\n top: calc(-1 * var(--base-size-4));\n font-size: var(--text-body-size-medium);\n }\n}\n\n.CardDescription {\n font: var(--text-body-shorthand-medium);\n color: var(--fgColor-muted);\n margin: 0;\n}\n\n.CardMetadataContainer {\n display: flex;\n align-items: center;\n gap: var(--stack-gap-normal);\n font: var(--text-body-shorthand-medium);\n color: var(--fgColor-muted);\n}\n\n.CardMetadataItem {\n display: flex;\n align-items: center;\n gap: var(--stack-gap-condensed);\n font: var(--text-body-shorthand-small);\n}\n\n.CardAction {\n position: absolute;\n top: var(--base-size-16);\n right: var(--base-size-16);\n z-index: 1;\n}\n"]}