@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1 lines • 24.5 kB
Source Map (JSON)
{"version":3,"sources":["../src/PageLayout/PageLayout.module.css.js"],"names":[],"mappings":"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","file":"PageLayout-c092f3db.css","sourcesContent":["/* Exported values for JavaScript consumption */\n:export {\n /* Breakpoint where --pane-max-width-diff changes (used in usePaneWidth.ts) */\n paneMaxWidthDiffBreakpoint: 1280;\n /* Default value for --pane-max-width-diff below the breakpoint */\n paneMaxWidthDiffDefault: 511;\n}\n\n.PageLayoutRoot {\n /* Region Order */\n --region-order-header: 0;\n --region-order-pane-start: 1;\n --region-order-content: 2;\n --region-order-pane-end: 3;\n --region-order-footer: 4;\n\n /* Spacing Values */\n --spacing-none: 0;\n --spacing-condensed: var(--base-size-16);\n --spacing-normal: var(--base-size-16);\n\n @media screen and (min-width: 1012px) {\n --spacing-normal: var(--base-size-24);\n }\n\n /* Pane Width Values */\n --pane-width-small: 100%;\n --pane-width-medium: 100%;\n --pane-width-large: 100%;\n /* NOTE: This value is exported via :export for use in usePaneWidth.ts */\n --pane-max-width-diff: 511px;\n\n @media screen and (min-width: 768px) {\n --pane-width-small: 240px;\n --pane-width-medium: 256px;\n --pane-width-large: 256px;\n }\n\n @media screen and (min-width: 1012px) {\n --pane-width-small: 256px;\n --pane-width-medium: 296px;\n --pane-width-large: 320px;\n }\n\n /* NOTE: This breakpoint value is exported via :export for use in usePaneWidth.ts */\n @media screen and (min-width: 1280px) {\n --pane-max-width-diff: 959px;\n }\n\n /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */\n --spacing: 0;\n --spacing-row: 0;\n --spacing-column: 0;\n --spacing-divider: 0;\n --offset-header: 0;\n --pane-width: 0;\n --pane-min-width: 0;\n --pane-max-width: 0;\n --pane-width-custom: 0;\n --pane-width-size: 0;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.PageLayoutWrapper {\n display: flex;\n margin-right: auto;\n margin-left: auto;\n flex-wrap: wrap;\n /* the wrapper should match the Root's dimensions by default */\n width: 100%;\n height: 100%;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PageLayoutContent {\n display: flex;\n flex: 1 1 100%;\n flex-wrap: wrap;\n max-width: 100%;\n}\n\n.HorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: calc(-1 * var(--spacing-divider));\n /* stylelint-disable-next-line primer/spacing */\n margin-left: calc(-1 * var(--spacing-divider));\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-variant-narrow='none']) {\n display: none;\n }\n\n &:where([data-variant-narrow='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-narrow='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-variant-regular='none']) {\n display: none;\n }\n\n &:where([data-variant-regular='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-regular='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-variant-wide='none']) {\n display: none;\n }\n\n &:where([data-variant-wide='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-wide='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n }\n\n @media screen and (min-width: 768px) {\n margin-right: 0 !important;\n margin-left: 0 !important;\n }\n}\n\n.VerticalDivider {\n position: relative;\n height: 100%;\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-variant-narrow='none']) {\n display: none;\n }\n\n &:where([data-variant-narrow='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-narrow='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-variant-regular='none']) {\n display: none;\n }\n\n &:where([data-variant-regular='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-regular='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-variant-wide='none']) {\n display: none;\n }\n\n &:where([data-variant-wide='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-wide='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n }\n}\n\n.Header {\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n\n &:where([data-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-hidden-wide='true']) {\n display: none;\n }\n }\n}\n\n.HeaderContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.HeaderHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.ContentWrapper {\n display: flex;\n\n /* Hack to prevent overflowing content from pushing the pane region to the next line */\n min-width: 1px;\n flex-direction: column;\n order: var(--region-order-content);\n\n /* Set flex-basis to 0% to allow flex-grow to control the width of the content region.\n Without this, the content region could wrap onto a different line\n than the pane region on wide viewports if its contents are too wide. */\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-is-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-is-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-is-hidden-wide='true']) {\n display: none;\n }\n }\n}\n\n/**\n * OPTIMIZATION: Aggressive containment during drag for ContentWrapper\n * data-dragging is set on PageLayoutContent by JavaScript\n * This avoids expensive :has() selectors\n */\n.PageLayoutContent[data-dragging='true'] .ContentWrapper {\n /* Add paint containment during drag - safe since user can't interact */\n contain: layout style paint;\n\n /* Disable interactions */\n pointer-events: none;\n\n /* Disable transitions to prevent expensive recalculations */\n transition: none;\n\n /* Force compositor layer for hardware acceleration */\n will-change: width;\n transform: translateZ(0);\n}\n\n.Content {\n width: 100%;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n margin-right: auto;\n margin-left: auto;\n flex-grow: 1;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n/**\n * OPTIMIZATION: Freeze content layout during resize drag\n * This prevents expensive recalculations of large content areas\n * while keeping content visible (just frozen in place)\n */\n.PageLayoutContent[data-dragging='true'] .Content {\n /* Full containment (without size) - isolate from layout recalculations */\n contain: layout style paint;\n}\n\n.PaneWrapper {\n display: flex;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-is-hidden-narrow='true']) {\n display: none;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing-row);\n flex-direction: column;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing-row);\n flex-direction: column-reverse;\n order: var(--region-order-pane-start);\n }\n }\n\n /* Base position (non-responsive) - applies at narrow viewports only */\n @media (--viewportRange-narrow) {\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing-row);\n flex-direction: column;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing-row);\n flex-direction: column-reverse;\n order: var(--region-order-pane-start);\n }\n }\n\n @media screen and (min-width: 768px) {\n &:where([data-is-hidden-regular='true']) {\n display: none;\n }\n\n width: auto;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n\n &:where([data-sticky]) {\n position: sticky;\n /* stylelint-disable-next-line primer/spacing */\n top: var(--offset-header);\n max-height: 100vh;\n }\n\n /* Base position (non-responsive) - applies at regular+ viewports */\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-is-hidden-wide='true']) {\n display: none;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n }\n}\n\n.PaneVerticalDivider {\n /* Base position (non-responsive) */\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n }\n\n /* Responsive position */\n @media (--viewportRange-narrow) {\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n\n @media (--viewportRange-regular) {\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n}\n\n.Pane {\n width: var(--pane-width-size);\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n\n @media screen and (min-width: 768px) {\n overflow: auto;\n }\n\n &:where([data-resizable]) {\n width: 100%;\n\n @media screen and (min-width: 768px) {\n /* \n * --pane-max-width is set by JS on mount and updated on resize (debounced).\n * JS calculates viewport - margin to avoid scrollbar discrepancy with 100vw.\n */\n width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width));\n }\n }\n}\n\n/**\n * OPTIMIZATION: Performance enhancements for Pane during drag\n * data-dragging is set on PageLayoutContent by JavaScript\n * This avoids expensive :has() selectors\n */\n.PageLayoutContent[data-dragging='true'] .Pane {\n /* Full containment - isolate from layout recalculations */\n contain: layout style paint;\n\n /* Disable interactions during drag */\n pointer-events: none;\n\n /* Disable transitions during drag */\n transition: none;\n\n /* Force hardware acceleration */\n will-change: width, transform;\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n\n.PaneHorizontalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n }\n\n /* Responsive position */\n @media (--viewportRange-narrow) {\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n\n @media (--viewportRange-regular) {\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n}\n\n.FooterWrapper {\n width: 100%;\n order: var(--region-order-footer);\n\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n\n &:where([data-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-hidden-wide='true']) {\n display: none;\n }\n }\n}\n\n.FooterHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.FooterContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n/**\n * DraggableHandle - Interactive resize handle\n */\n.DraggableHandle {\n position: absolute;\n inset: 0 -2px;\n cursor: col-resize;\n background-color: transparent;\n transition-delay: 0.1s;\n\n /**\n * OPTIMIZATION: Prevent touch scrolling and text selection during drag\n * This is done in CSS because it needs to be set before any pointer events\n */\n touch-action: none;\n user-select: none;\n}\n\n.DraggableHandle:hover {\n background-color: var(--bgColor-neutral-muted);\n}\n\n.DraggableHandle[data-dragging='true'] {\n background-color: var(--bgColor-accent-emphasis);\n cursor: col-resize;\n}\n\n.DraggableHandle[data-dragging='true']:hover {\n background-color: var(--bgColor-accent-emphasis);\n}\n"]}