@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1 lines • 6.85 kB
Source Map (JSON)
{"version":3,"sources":["../src/SelectPanel/SelectPanel.module.css"],"names":[],"mappings":"AAAA,+BAEE,cACF,CAEA,+BACE,YAAa,CAGb,qBAAsB,CAFtB,cAAe,CACf,kBAEF,CAEA,8BAGE,sBAAuB,CAFvB,YAAa,CACb,6BAA8B,CAI9B,qCAAgC,CADhC,sCAAiC,CADjC,oCAQF,CAJE,+DAEE,aAAc,CADd,eAEF,CAGF,6BAEE,8CAAuC,CADvC,oCAEF,CAEA,gFACE,mCAEF,CASE,mDADF,mFAEI,mCAEJ,CADE,CAGF,gCAGE,gDACF,CAEA,8DAJE,4CAAsC,CADtC,oCAmBF,CAdA,8BAWE,6CAAqC,CAErC,gDAAyC,CAZzC,YAAa,CASb,kBAAmB,CAEnB,4BAAuB,CALvB,qCAAgC,CADhC,oCAA8B,CAD9B,2DASF,CAEA,gCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,yDAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,kDAGF,CAEA,4DAEE,6EAAgD,CAChD,4EAAgD,CAFhD,wDAGF,CAEA,0DAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,kDAGF,CAEA,8BAGE,iDAAyC,CACzC,uEAA4C,CAH5C,YAAa,CACb,gCAGF,CAEA,0CACE,cAAe,CACf,kBACF,CAEA,+BAOE,kBAAmB,CANnB,YAAa,CAIb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAPvB,WAAY,CAIZ,sBAAuB,CAHvB,kCAA4B,CAC5B,iBAWF,CAJE,iCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,oCACE,8CAAuC,CACvC,gDACF,CAEA,mCAGE,kBAAmB,CADnB,gDAA2B,CAD3B,4CAAsC,CAGtC,oCACF,CAEA,mCAEE,wDAA+B,CAD/B,sCAMF,CAHE,+DACE,kDACF,CAGF,qCACE,mCACF,CAEA,6CACE,mBACF,CAEA,wCAEE,kBAAmB,CADnB,YAAa,CAGb,sBAAuB,CADvB,gCA8BF,CA3BE,4EACE,YACF,CAGE,mDADF,gFAEI,YAEJ,CADE,CAGF,6EACE,6BACF,CAGE,mDADF,wFAEI,6BAEJ,CADE,CAGF,qFACE,6BAKF,CAHE,mDAHF,qFAII,sBAEJ,CADE,CAIJ,uCAEE,mBAAoB,CACpB,YAAa,CAFb,WAAY,CAGZ,sBAaF,CAXE,4EAEE,sBAAuB,CADvB,WAEF,CAGE,mDADF,uFAGI,sBAAuB,CADvB,WAGJ,CADE,CAIJ,yCACE,YAAa,CACb,oCAA+B,CAC/B,wBACF,CAEA,mDACE,YAOF,CALE,mDAHF,mDAII,YAAa,CACb,oCAA+B,CAC/B,wBAEJ,CADE,CAGF,4CACE,YAWF,CATE,mDAHF,4CAII,YAQJ,CAPE,CAGE,mDADF,yFAEI,WAEJ,CADE,CAIJ,gCAGE,8EAAiD,CADjD,OAAQ,CADR,iBAGF","file":"SelectPanel-06900070.css","sourcesContent":[".Overlay {\n /* CSS variables values are passed in via styles */\n --max-height: 0;\n}\n\n.Wrapper {\n display: flex;\n height: inherit;\n max-height: inherit;\n flex-direction: column;\n}\n\n.Header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding-top: var(--base-size-8);\n padding-right: var(--base-size-8);\n padding-left: var(--base-size-8);\n\n &:where([data-variant='fullscreen']) {\n min-height: 40px;\n flex-shrink: 0;\n }\n}\n\n.Title {\n margin-left: var(--base-size-8);\n font-size: var(--text-body-size-medium);\n}\n\n.Wrapper[data-variant='modal'] .Title {\n margin-top: var(--base-size-8);\n /* styling specific to the modal variant */\n}\n\n/*\n * Align SelectPanel header text with AnchoredOverlay close button\n * \n * Ensures the title properly aligns with the close button position\n * in anchor variant on narrow viewports.\n */\n.Wrapper[data-variant='anchored'] .Title {\n @media screen and (--viewportRange-narrow) {\n margin-top: var(--base-size-8);\n }\n}\n\n.Subtitle {\n margin-left: var(--base-size-8);\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n}\n\n.Notice {\n display: flex;\n padding-top: var(--base-size-12);\n padding-right: var(--base-size-16);\n padding-bottom: var(--base-size-12);\n padding-left: var(--base-size-16);\n margin-top: var(--base-size-4);\n margin-right: var(--base-size-8);\n margin-left: var(--base-size-8);\n font-size: var(--text-body-size-small);\n flex-direction: row;\n border: var(--borderWidth-thin) solid;\n gap: var(--base-size-8);\n border-radius: var(--borderRadius-medium);\n}\n\n.Notice a {\n color: inherit;\n text-decoration: underline;\n}\n\n.Notice:where([data-variant='info']) {\n color: var(--fgColor-accent);\n background-color: var(--bgColor-accent-muted);\n border-color: var(--borderColor-accent-muted);\n}\n\n.Notice:where([data-variant='warning']) {\n color: var(--fgColor-attention);\n background-color: var(--bgColor-attention-muted);\n border-color: var(--borderColor-attention-muted);\n}\n\n.Notice:where([data-variant='error']) {\n color: var(--fgColor-danger);\n background-color: var(--bgColor-danger-muted);\n border-color: var(--borderColor-danger-muted);\n}\n\n.Footer {\n display: flex;\n padding: var(--base-size-8);\n border-top: var(--borderWidth-thin) solid;\n border-top-color: var(--borderColor-default);\n}\n\n.FilteredActionList {\n height: inherit;\n max-height: inherit;\n}\n\n.Message {\n display: flex;\n height: 100%;\n padding: var(--base-size-24);\n text-align: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n gap: var(--base-size-4);\n\n a {\n color: inherit;\n text-decoration: underline;\n }\n}\n\n.MessageTitle {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n}\n\n.MessageBody {\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n align-items: center;\n gap: var(--stack-gap-condensed);\n}\n\n.MessageIcon {\n margin-bottom: var(--base-size-8);\n color: var(--fgColor-attention);\n\n &:where([data-variant='error']) {\n color: var(--fgColor-danger);\n }\n}\n\n.MessageAction {\n margin-top: var(--base-size-8);\n}\n\n.ResponsiveCloseButton {\n display: inline-grid;\n}\n\n.ResponsiveFooter {\n display: none;\n align-items: center;\n padding: var(--base-size-8);\n justify-content: center;\n\n &:where([data-display-footer='always']) {\n display: flex;\n }\n\n &:where([data-display-footer='only-small']) {\n @media screen and (--viewportRange-narrow) {\n display: flex;\n }\n }\n\n &[data-stretch-secondary-action='never'] {\n justify-content: space-between;\n }\n\n &:where([data-stretch-secondary-action='only-big']) {\n @media screen and (--viewportRange-narrow) {\n justify-content: space-between;\n }\n }\n\n &:where([data-stretch-save-button='only-small']) {\n justify-content: space-between;\n\n @media screen and (--viewportRange-narrow) {\n justify-content: center;\n }\n }\n}\n\n.SecondaryAction {\n flex-grow: 1;\n align-items: stretch;\n display: flex;\n justify-content: center;\n\n &[data-stretch-secondary-action='never'] {\n flex-grow: 0;\n align-items: flex-start;\n }\n\n &:where([data-stretch-secondary-action='only-big']) {\n @media screen and (--viewportRange-narrow) {\n flex-grow: 0;\n align-items: flex-start;\n }\n }\n}\n\n.CancelSaveButtons {\n display: flex;\n gap: var(--stack-gap-condensed);\n justify-content: flex-end;\n}\n\n.ResponsiveCancelSaveButtons {\n display: none;\n\n @media screen and (--viewportRange-narrow) {\n display: flex;\n gap: var(--stack-gap-condensed);\n justify-content: flex-end;\n }\n}\n\n.ResponsiveSaveButton {\n display: none;\n\n @media screen and (--viewportRange-narrow) {\n display: flex;\n }\n\n &:where([data-stretch-save-button='only-small']) {\n @media screen and (--viewportRange-narrow) {\n flex-grow: 1;\n }\n }\n}\n\n.Backdrop {\n position: absolute;\n inset: 0;\n background-color: var(--overlay-backdrop-bgColor);\n}\n"]}