@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1 lines • 14.4 kB
Source Map (JSON)
{"version":3,"sources":["../src/PageHeader/PageHeader.module.css.js"],"names":[],"mappings":"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","file":"PageHeader-9f4a690a.css","sourcesContent":[".PageHeader {\n /* Grid Row Order */\n --grid-row-order-context-area: 1;\n --grid-row-order-leading-action: 2;\n --grid-row-order-breadcrumbs: 2;\n --grid-row-order-title-area: 2;\n --grid-row-order-trailing-action: 2;\n --grid-row-order-actions: 2;\n --grid-row-order-description: 3;\n --grid-row-order-navigation: 4;\n\n /* Title Area Region Order */\n --title-area-region-order-leading-visual: 0;\n --title-area-region-order-title: 1;\n --title-area-region-order-trailing-visual: 2;\n\n /* Context Area Region Order */\n --context-area-region-order-parent-link: 0;\n --context-area-region-order-context-bar: 1;\n --context-area-region-order-context-area-actions: 2;\n\n display: grid;\n\n /* We have max 5 columns. */\n grid-template-columns: auto auto auto auto 1fr;\n grid-template-areas:\n 'context-area context-area context-area context-area context-area'\n 'leading-action breadcrumbs title-area trailing-action actions'\n 'description description description description description'\n 'navigation navigation navigation navigation navigation';\n\n /*\n line-height is calculated with calc(height/font-size) and the below numbers are from @primer/primitives.\n --custom-font-size, --custom-line-height, --custom-font-weight are custom properties that can be used to override the below values.\n We don't want these values to be overridden but still want to allow consumers to override them if needed.\n */\n &:has([data-component='TitleArea'][data-size-variant='large']) {\n font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); /* calc(48/32) */\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n }\n\n &:has([data-component='TitleArea'][data-size-variant='medium']) {\n font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n }\n\n &:has([data-component='TitleArea'][data-size-variant='subtitle']) {\n font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n }\n\n /* Responsive size variants */\n @media (--viewportRange-narrow) {\n &:has([data-component='TitleArea'][data-size-variant-narrow='large']) {\n font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n }\n\n &:has([data-component='TitleArea'][data-size-variant-narrow='medium']) {\n font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n }\n\n &:has([data-component='TitleArea'][data-size-variant-narrow='subtitle']) {\n font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n }\n }\n\n @media (--viewportRange-regular) {\n &:has([data-component='TitleArea'][data-size-variant-regular='large']) {\n font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n }\n\n &:has([data-component='TitleArea'][data-size-variant-regular='medium']) {\n font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n }\n\n &:has([data-component='TitleArea'][data-size-variant-regular='subtitle']) {\n font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n }\n }\n\n @media (--viewportRange-wide) {\n &:has([data-component='TitleArea'][data-size-variant-wide='large']) {\n font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n }\n\n &:has([data-component='TitleArea'][data-size-variant-wide='medium']) {\n font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n }\n\n &:has([data-component='TitleArea'][data-size-variant-wide='subtitle']) {\n font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n }\n }\n\n &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-all]),\n &[data-has-border='true']:not(:has([data-component='PH_Navigation'])) {\n border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n padding-block-end: var(--base-size-8);\n }\n\n @media (--viewportRange-narrow) {\n &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-narrow]) {\n border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n padding-block-end: var(--base-size-8);\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-regular]) {\n border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n padding-block-end: var(--base-size-8);\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-wide]) {\n border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n padding-block-end: var(--base-size-8);\n }\n }\n\n & [data-component='PH_LeadingAction'],\n & [data-component='PH_TrailingAction'],\n & [data-component='PH_Actions'],\n & [data-component='PH_LeadingVisual'],\n & [data-component='PH_TrailingVisual'] {\n height: calc(var(--title-line-height) * 1em);\n }\n\n & [data-hidden-all] {\n display: none;\n }\n\n & [data-hidden-narrow] {\n @media (--viewportRange-narrow) {\n display: none;\n }\n }\n\n & [data-hidden-regular] {\n @media (--viewportRange-regular) {\n display: none;\n }\n }\n\n & [data-hidden-wide] {\n @media (--viewportRange-wide) {\n display: none;\n }\n }\n}\n\n.ContextArea {\n display: flex;\n padding-bottom: var(--base-size-8);\n font-size: var(--text-body-size-medium, 0.875rem);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-medium, 1.4285);\n flex-direction: row;\n grid-row: var(--grid-row-order-context-area);\n grid-area: context-area;\n align-items: center;\n gap: var(--stack-gap-condensed);\n}\n\n.ParentLink {\n display: flex;\n align-items: center;\n order: var(--context-area-region-order-parent-link);\n gap: var(--stack-gap-condensed);\n}\n\n.ContextBar {\n display: flex;\n order: var(--context-area-region-order-context-bar);\n}\n\n.ContextAreaActions {\n display: flex;\n flex-direction: row;\n order: var(--context-area-region-order-context-area-actions);\n align-items: center;\n gap: var(--stack-gap-condensed);\n flex-grow: 1;\n justify-content: flex-end;\n}\n\n.TitleArea {\n grid-row: var(--grid-row-order-title-area);\n grid-area: title-area;\n display: flex;\n gap: var(--stack-gap-condensed);\n flex-direction: row;\n align-items: flex-start;\n}\n\n.LeadingAction {\n display: flex;\n padding-right: var(--base-size-8);\n grid-row: var(--grid-row-order-leading-action);\n grid-area: leading-action;\n align-items: center;\n}\n\n.Breadcrumbs {\n display: flex;\n padding-right: var(--base-size-8);\n font-size: var(--text-body-size-medium, 0.875rem);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-medium, 1.4285);\n grid-row: var(--grid-row-order-breadcrumbs);\n grid-area: breadcrumbs;\n align-items: center;\n}\n\n.LeadingVisual {\n /* using flex and order to display the leading visual in the title area. */\n display: flex;\n order: var(--title-area-region-order-leading-visual);\n align-items: center;\n}\n\n.Title {\n /* using flex and order to display the title in the title area. */\n display: block;\n order: var(--title-area-region-order-title);\n font-size: inherit;\n font-weight: inherit;\n}\n\n.Title:where([data-hidden='true']) {\n display: none;\n}\n\n.TrailingVisual {\n /* using flex and order to display the trailing visual in the title area. */\n display: flex;\n order: var(--title-area-region-order-trailing-visual);\n align-items: center;\n}\n\n.TrailingAction {\n display: flex;\n padding-left: var(--base-size-8);\n grid-row: var(--grid-row-order-trailing-action);\n grid-area: trailing-action;\n align-items: center;\n}\n\n.Actions {\n display: flex;\n min-width: max-content;\n padding-left: var(--base-size-8);\n flex-direction: row;\n grid-row: var(--grid-row-order-actions);\n grid-area: actions;\n gap: var(--stack-gap-condensed);\n justify-content: flex-end;\n align-items: center;\n}\n\n.Description {\n display: flex;\n padding-top: var(--base-size-8);\n font-size: var(--text-body-size-medium, 0.875rem);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-medium, 1.4285);\n flex-direction: row;\n grid-row: var(--grid-row-order-description);\n grid-area: description;\n align-items: center;\n gap: var(--stack-gap-condensed);\n}\n\n.Navigation {\n display: block;\n padding-top: var(--base-size-8);\n font-size: var(--text-body-size-medium, 0.875rem);\n font-weight: var(--base-text-weight-normal);\n line-height: var(--text-body-lineHeight-medium, 1.4285);\n grid-row: var(--grid-row-order-navigation);\n grid-area: navigation;\n}\n"]}