@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1 lines • 5.23 kB
Source Map (JSON)
{"version":3,"sources":["../src/Pagination/Pagination.module.css"],"names":[],"mappings":"AAAA,2BAgBE,4BAA6B,CAC7B,gDAAyC,CARzC,oDAA6B,CAK7B,cAAe,CAbf,oBAAqB,CAKrB,iBAAkB,CAHlB,WAAY,CAKZ,aAAc,CAHd,sCAAgC,CAHhC,cAAe,CAEf,iGAAiF,CAMjF,iBAAkB,CAClB,4BAAqB,CAArB,oBAAqB,CAOrB,uDAA8D,CAH9D,wBAAiB,CAAjB,gBAAiB,CAFjB,qBAAsB,CADtB,kBAOF,CAEA,uDACE,uFAOE,6BAA8B,CAD9B,UAAW,CAJX,oBAAqB,CAErB,WAAY,CACZ,0BAA2B,CAF3B,UAKF,CAGA,4CAEE,gIAUC,CAXD,sCAYF,CAGA,2CAEE,gIAUC,CAXD,qCAYF,CACF,CAEA,sCACE,cACF,CAEA,kEAGE,wGAA0D,CAC1D,SAAU,CAFV,4BAAqB,CAArB,oBAAqB,CAGrB,uBACF,CAEA,yCACE,6EAAiD,CACjD,mBACF,CAEA,kCACE,+DACF,CAEA,0EAEE,kDACF,CAEA,wFAGE,4EAAgD,CAChD,wBAAyB,CAFzB,2DAGF,CAEA,uDAIE,gFAAqD,CAHrD,6EAAiD,CACjD,mBAGF,CAEA,wLAME,4BAA6B,CAF7B,6DAA8B,CAC9B,cAEF,CAEA,0CAIE,kBAAmB,CAFnB,eAAgB,CAGhB,iBACF,CAEA,mDACE,oHACE,YACF,CAEA,6FACE,mBACF,CAEA,4FACE,qBACF,CACF,CAEA,oCACE,qHACE,YACF,CAEA,8FACE,mBACF,CAEA,6FACE,qBACF,CACF,CAEA,sCACE,kHACE,YACF,CAEA,2FACE,mBACF,CAEA,0FACE,qBACF,CACF","file":"Pagination-e98833e8.css","sourcesContent":[".Page {\n display: inline-block;\n min-width: 32px; /* primer.control.medium.size */\n height: 32px; /* primer.control.medium.size */\n padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */\n margin-right: var(--base-size-4);\n font-style: normal;\n /* stylelint-disable-next-line primer/typography */\n line-height: 1;\n color: var(--fgColor-default);\n text-align: center;\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border-radius: var(--borderRadius-medium);\n transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n}\n\n@supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {\n .Page[rel='prev']::before,\n .Page[rel='next']::after {\n display: inline-block;\n width: 16px;\n height: 16px;\n vertical-align: text-bottom;\n content: '';\n background-color: currentColor;\n }\n\n /* chevron-left */\n .Page[rel='prev']::before {\n margin-right: var(--base-size-4);\n clip-path: polygon(\n 9.8px 12.8px,\n 8.7px 12.8px,\n 4.5px 8.5px,\n 4.5px 7.5px,\n 8.7px 3.2px,\n 9.8px 4.3px,\n 6.1px 8px,\n 9.8px 11.7px,\n 9.8px 12.8px\n );\n }\n\n /* chevron-right */\n .Page[rel='next']::after {\n margin-left: var(--base-size-4);\n clip-path: polygon(\n 6.2px 3.2px,\n 7.3px 3.2px,\n 11.5px 7.5px,\n 11.5px 8.5px,\n 7.3px 12.8px,\n 6.2px 11.7px,\n 9.9px 8px,\n 6.2px 4.3px,\n 6.2px 3.2px\n );\n }\n}\n\n.Page:last-child {\n margin-right: 0;\n}\n\n.Page:hover,\n.Page:focus {\n text-decoration: none;\n background-color: var(--control-transparent-bgColor-hover);\n outline: 0;\n transition-duration: 0.1s;\n}\n\n.Page:focus-visible {\n outline: 2px solid var(--bgColor-accent-emphasis);\n outline-offset: -2px;\n}\n\n.Page:active {\n border-color: var(--borderColor-muted);\n}\n\n.Page[rel='prev'],\n.Page[rel='next'] {\n color: var(--fgColor-accent);\n}\n\n.Page[aria-current],\n.Page[aria-current]:hover {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-accent-emphasis);\n border-color: transparent;\n}\n\n.Page[aria-current]:focus-visible {\n outline: 2px solid var(--bgColor-accent-emphasis);\n outline-offset: -2px;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n\n.Page[aria-hidden],\n.Page[aria-hidden]:hover,\n.Page[role='presentation'],\n.Page[role='presentation']:hover {\n color: var(--fgColor-disabled);\n cursor: default;\n background-color: transparent;\n}\n\n.PaginationContainer {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: 20px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: 15px;\n text-align: center;\n}\n\n@media screen and (--viewportRange-narrow) {\n .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {\n display: none;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child {\n margin-inline-end: 0;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child {\n margin-inline-start: 0;\n }\n}\n\n@media screen and (--viewportRange-regular) {\n .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) {\n display: none;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child {\n margin-inline-end: 0;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child {\n margin-inline-start: 0;\n }\n}\n\n@media screen and (--viewportRange-wide) {\n .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) {\n display: none;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child {\n margin-inline-end: 0;\n }\n\n .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child {\n margin-inline-start: 0;\n }\n}\n"]}