@primer/react/lib-esm/PageHeader/PageHeader-4e1d8fee.css.map

An implementation of GitHub's Primer Design System using React

{"version":3,"sources":["../src/PageHeader/PageHeader.module.css"],"names":[],"mappings":"AAAA,iCAEE,+BAAgC,CAChC,iCAAkC,CAClC,8BAA+B,CAC/B,6BAA8B,CAC9B,kCAAmC,CACnC,0BAA2B,CAC3B,8BAA+B,CAC/B,6BAA8B,CAG9B,0CAA2C,CAC3C,iCAAkC,CAClC,2CAA4C,CAG5C,yCAA0C,CAC1C,yCAA0C,CAC1C,kDAAmD,CAEnD,YAAa,CAIb,6QAI0D,CAL1D,6CA4FF,CAhFE,0FACE,mEAAsE,CACtE,wEAA2E,CAC3E,4EAA+E,CAE/E,oFACF,CAEA,2FACE,uEAA0E,CAC1E,0EAA6E,CAC7E,6EAAgF,CAEhF,qFACF,CAEA,6FACE,uEAA0E,CAC1E,wEAA2E,CAC3E,6EAAgF,CAEhF,qFACF,CAEA,6MAEE,8GAA0E,CAC1E,0CACF,CAEA,oCACE,+GACE,8GAA0E,CAC1E,0CACF,CACF,CAEA,oCACE,gHACE,8GAA0E,CAC1E,0CACF,CACF,CAEA,qCACE,6GACE,8GAA0E,CAC1E,0CACF,CACF,CAEA,2UAKE,yCACF,CAEA,mDACE,YACF,CAGE,oCADF,sDAEI,YAEJ,CADE,CAIA,oCADF,uDAEI,YAEJ,CADE,CAIA,qCADF,oDAEI,YAEJ,CADE,CAIJ,kCAME,kBAAmB,CAHnB,8CAAiD,CACjD,8CAA2C,CAI3C,sBAAuB,CADvB,2CAA4C,CAF5C,qDAAuD,CAHvD,uCASF,CAEA,mEAJE,kBAAmB,CARnB,YAAa,CASb,oCAQF,CALA,iCAGE,kDAEF,CAEA,iCACE,YAAa,CACb,kDACF,CAEA,yCAIE,kBAAmB,CAEnB,WAAY,CACZ,wBAAyB,CAJzB,2DAKF,CAEA,yEATE,YAAa,CACb,kBAAmB,CAGnB,oCAYF,CAPA,gCAME,sBAAuB,CAJvB,oBAAqB,CADrB,yCAMF,CAEA,oCAIE,wBAAyB,CADzB,6CAGF,CAEA,sEAHE,kBAAmB,CAJnB,YAAa,CACb,sCAeF,CATA,kCAGE,8CAAiD,CACjD,8CAA2C,CAG3C,qBAAsB,CADtB,0CAA2C,CAD3C,qDAIF,CAEA,oCAIE,kBAAmB,CAFnB,YAAa,CACb,mDAEF,CAEA,4BAEE,aAAc,CAEd,iBAAkB,CAClB,mBAAoB,CAFpB,0CAGF,CAEA,sDACE,YACF,CAEA,qCAIE,kBAAmB,CAFnB,YAAa,CACb,oDAEF,CAEA,qCAIE,yBAA0B,CAD1B,8CAGF,CAEA,mEAHE,kBAAmB,CAJnB,YAAa,CACb,qCAgBF,CAVA,8BAIE,kBAAmB,CAGnB,oCAA+B,CAD/B,iBAAkB,CADlB,sCAAuC,CAGvC,wBAAyB,CANzB,qBAQF,CAEA,kCASE,kBAAmB,CARnB,YAAa,CAKb,kBAAmB,CAInB,oCAA+B,CAF/B,qBAAsB,CADtB,0CAIF,CAEA,mEAVE,8CAAiD,CACjD,8CAA2C,CAC3C,qDAAuD,CAHvD,oCAmBF,CARA,iCACE,aAAc,CAMd,oBAAqB,CADrB,yCAEF","file":"PageHeader-4e1d8fee.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  &[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 screen and (max-width: 768px) {\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 screen and (min-width: 768px) {\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 screen and (min-width: 1440px) {\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 screen and (max-width: 768px) {\n      display: none;\n    }\n  }\n\n  & [data-hidden-regular] {\n    @media screen and (min-width: 768px) {\n      display: none;\n    }\n  }\n\n  & [data-hidden-wide] {\n    @media screen and (min-width: 1440px) {\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"]}