@patternfly/pfe-styles
Version:
Helper classes for PatternFly Elements
1 lines • 52.1 kB
Source Map (JSON)
{"version":3,"sources":["pfe-typography-classes.scss","../../pfe-sass/mixins/_copy-mixins.scss","pfe-typography-classes.css","../../pfe-sass/mixins/_components.scss","../../pfe-sass/functions/_custom-properties.scss"],"names":[],"mappings":"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","file":"pfe-typography-classes.css","sourcesContent":["@import \"../../pfe-sass/pfe-sass\";\n\n// TITLES\n@each $size in (6xl, 5xl, 4xl, 3xl, 2xl, xl, lg, md, sm, xs) {\n .pfe-title--#{$size} {\n @include pfe-typography($sizing: $size, $important: true); \n }\n}\n\n// TEXT\n@each $size in (xl, lg, md, sm, xs) {\n .pfe-text--#{$size} {\n @include pfe-typography($sizing: $size, $type: text, $important: true); \n }\n}\n\n// List Styles\n// @todo concider breaking these into their own file or renaming this\n// file to not be just typography focused but more \"style utilities\" focused.\n$LOCAL: list-ol--primary;\nol.pfe-list--primary {\n @include ordered-list-primary;\n}","@import \"../maps/_typography\";\n\n/// Mixin for creating an accessible focus state\n/// @group tools\n/// @param {Color} $color [$pfe-color--link]\n/// @see {variable} $pfe-color--link\n/// @example - scss\n/// .thing {\n/// @include pfe-accessibility-focus($pfe-color--link--on-dark);\n/// }\n/// @example - css\n/// .thing {\n/// outline-offset: 1px;\n/// outline-style: dotted;\n/// outline-width: 1px;\n/// text-decoration: none !important;\n/// outline-color: #73bcf7;\n/// }\n@mixin pfe-accessibility-focus($color: $pfe-color--link) {\n outline-offset: 1px;\n outline-style: dotted;\n outline-width: 1px;\n text-decoration: none !important;\n\n @if type-of($color) ==color {\n outline-color: $color;\n }\n}\n\n@mixin pfe-underline($color: default-link-hover-line, $opacity: 1) {\n text-decoration: underline;\n text-decoration-skip: ink;\n}\n\n/// Mixin for authors outside of PFE to control spacing between content\n/// @group typography\n/// @param {*} $sizing [lg, md, sm] \n/// @param {*} $type [heading, body] \n/// @example - scss\n/// @include pfe-content--text--spacing-block(sm);\n@mixin pfe-content--text--spacing-block($sizing: md, $type: body) {\n &:not(:last-child):not(:empty) {\n margin-bottom: pfe-var(content-spacer--#{$type}--#{$sizing}); //16px\n }\n} \n\n/// Mixin for authors outside of PFE to customize block level elements\n/// The variable stack includes a hook just for headings when they appear in the \n/// light DOM within components: --pf-c--FontSize\n///\n/// Components can't control the font size of block level elements like HTML headings \n/// when they are in the light DOM. A component _could_ redefine the variables for \n/// standard headings by using the variable hooks such as: `--pf-c--content--h4--FontSize` \n/// but it can't know if the light DOM might contain an H1, H2, H3, etc. it shouldn't\n/// redefine the variables for all possible headings. Instead, there is one dedicated\n/// variable for this purpose. \n/// @group typography\n/// @param {*} $sizing [h1, h2, h3, h4, h5, h6, p, small] \n/// @example - scss\n/// .project-wrapper h3 {\n/// @include pfe-title(xl); \n/// }\n/// @example - css\n/// .project-wrapper h3 {\n/// font-family: \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif;\n/// font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n/// line-height: 1.3;\n/// line-height: var(--pfe-theme--line-height--heading, 1.3);\n/// font-weight: 500;\n/// font-weight: var(--pfe-theme--font-weight--normal, 500);\n/// font-size: 1.25rem;\n/// font-size: var(--pf-c--FontSize, var(--pf-c--content--h3--FontSize, var(--pf-global--FontSize--xl, 1.25rem)));\n/// }\n@mixin pfe-content ($element: \"p\", $base: false){\n // TEXT\n @if $element == \"p\" or $element == \"small\" {\n // Extend includes: line height, weight, font family\n @extend %pfe-content-base;\n\n // Accomodate for irregular variable naming\n @if $element == \"p\" {\n font-size: var(--pf-c--FontSize, pfe-var(content--FontSize));\n }\n @else {\n font-size: var(--pf-c--FontSize, pfe-var(content--#{$element}--FontSize));\n }\n @if $base {\n font-family: pfe-var(font-family);\n line-height: pfe-var(line-height);\n font-weight: pfe-var(font-weight--normal);\n }\n // spacing\n @include pfe-content--text--spacing-block(sm);\n } \n @else { // HEADINGS\n font-family: pfe-var(font-family--heading);\n line-height: pfe-var(line-height--heading);\n font-weight: pfe-var(font-weight--normal);\n\n font-size: var(--pf-c--FontSize, #{pfe-var(content--#{$element}--FontSize)});\n // spacing\n @include pfe-content--text--spacing-block(sm, heading);\n }\n}\n\n\n\n/// Mixin to generate a typography stack - font-family, font-size, line-height, font-weight\n/// and spacing between elements. It accepts a few inputs and determines what variable stack\n/// and CSS properties to output. NOTE! There is an alias mixin `pfe-c-typography` below for easier usage within components. \n/// @group typography\n/// @param {String} $sizing [xl] - Human-readable description for the font-size of the stack you are building.\n/// @param {String} $type [title] - Describes the type of element being created and determines which variable stack to pull from. Also accepts \"text\".\n/// @param {Bool} $base [true] You may opt out of other typography properties (besides size) such as font-weight and line-height (and font-family on text). \n/// @param {Bool} $spacing [true] - You may opt out of the margin-bottom which adds space below the typographical element \n/// @param {Bool} $important [false] - Boolean value for if properties need to be postfixed with `!important`. Use of `!important` is only recommended for utility classes.\n/// @param {Boolean} $use-local [false] - Set this to true when using the mixin within components. This will print a local CSS variable at the beginning of the CSS variable stack and will omit title/text variables. Note that this mixin will not utilize any values from the $LOCAL-VARIABLES map.\n/// @param {String} $region [null] - For use with local variables only. For more about the regional designation, see pfe-var().\n/// @param {Boolean} $light-dom-heading: [false] - Print the --pf-c--FontSize variable with a value of the font-size variable stack. For more information about --pf-c--FontSize, see the HTML HEADINGS section in pfe-base.scss.\n/// @requires {function} pfe-var\n/// @requires {function} pfe-local\n/// @requires {variable} $pf-title-set--mega\n/// @requires {variable} $pf-title-set--regular\n/// @requires {variable} $pf-title-set--tiny\n/// @example - scss - Basic example for xs text typography set\n/// .small-text {\n/// @include pfe-typography(\n/// $sizing: \"xs\",\n/// $type: \"text\",\n/// $base: true,\n/// $important: true,\n/// $use-local: false\n/// )\n/// }\n/// @example - css - Rendered result\n/// .small-text {\n/// font-size: 0.75rem !important;\n/// font-size: var(--pf-c-text--m-xs--FontSize, var(--pf-global--FontSize--xs, 0.75rem)) !important;\n/// font-family: \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif !important;\n/// font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n/// line-height: 1.5 !important;\n/// line-height: var(--pfe-theme--line-height, 1.5) !important;\n/// font-weight: 400 !important;\n/// font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n/// }\n/// \n/// .small-text:not(:last-child):not(:empty) {\n/// margin-bottom: 0.5rem !important;\n/// margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem) !important;\n/// }\n/// @example - scss - Basic example for 5xl title typography set\n/// .large-heading {\n/// @include pfe-typography(\n/// $sizing: \"5xl\",\n/// $type: \"title\",\n/// $important: true,\n/// $use-local: false\n/// )\n/// }\n/// @example - css - Rendered result\n/// .large-heading {\n/// font-family: \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif !important;\n/// font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n/// font-size: 2.5rem !important;\n/// font-size: var(--pf-c-title--m-5xl--FontSize, var(--pf-global--FontSize--5xl, 2.5rem)) !important;\n/// line-height: 1.2 !important;\n/// line-height: var(--pfe-theme--line-height--heading-mega, 1.2) !important;\n/// font-weight: 300 !important;\n/// font-weight: var(--pfe-theme--font-weight--light, 300) !important;\n/// }\n/// \n/// .large-heading:not(:last-child) {\n/// margin-bottom: 1.5rem !important;\n/// margin-bottom: var(--pfe-theme--content-spacer--heading--md, 1.5rem) !important;\n/// }\n@mixin pfe-typography (\n $sizing: \"xl\", \n $type: \"title\", \n $base: true, \n $spacing: true, \n $use-local: false,\n $region: null,\n $light-dom-heading: false,\n $important: false\n ){\n\n // Ensure that even numerical entries are treated like strings, \"6xl\" vs. 6xl\n $sizing: \"#{$sizing}\";\n\n // Adds !important to the end of the property; useful for utility classes only. Use with caution. \n $rules: \"\";\n @if $important {\n $rules: \" !important\";\n }\n // Text / body copy typography!\n @if $type == \"text\" { \n // Capture the values of properties to use directly or wrapped in the pfe-local function below\n $font-family: pfe-var(font-family);\n $line-height: pfe-var(line-height);\n $font-weight: pfe-var(font-weight--normal);\n $margin-bottom: pfe-var(content-spacer--body--sm);\n\n @if $use-local {\n $font-size: pfe-var(FontSize--#{$sizing});\n font-size: pfe-local(FontSize, $font-size, $region)#{$rules};\n @if $base { \n font-family: pfe-local(LineHeight, $font-family, $region)#{$rules};\n line-height: pfe-local(LineHeight, $line-height, $region)#{$rules};\n font-weight: pfe-local(FontWeight, $font-weight, $region)#{$rules};\n }\n @if $spacing { \n &:not(:last-child) {\n margin-bottom: pfe-local(MarginBottom, $margin-bottom, $region)#{$rules};\n }\n }\n }\n @else {\n // include text var and global var in stack\n $font-size: pfe-var(text--m-#{$sizing}--FontSize);\n font-size: $font-size#{$rules};\n @if $base { // these styles are ordinarily inherited from the body tag, but some projects may need extra specificity\n font-family: $font-family#{$rules};\n line-height: $line-height#{$rules};\n font-weight: $font-weight#{$rules};\n }\n @if $spacing { \n &:not(:last-child):not(:empty) {\n margin-bottom: $margin-bottom#{$rules}; //16px\n }\n }\n }\n // this CSS custom property is an extra hook for components to override things, like .pfe-card { --pf-c-FontSize: 32px; }\n @if $use-local and $light-dom-heading {\n --pf-c--FontSize: #{pfe-local(FontSize)};\n }\n }\n // Title typography!\n @else {\n // Capture the values of properties to use directly or wrapped in the pfe-local function below\n // Initialize variables at the $pf-title-set--tiny size\n // $sizing == \"lg\" or \"md\" or \"sm\" or \"xs\" \n $line-height: pfe-var(line-height);\n $font-weight: pfe-var(font-weight--normal);\n $margin-bottom: pfe-var(content-spacer--heading--sm);\n\n @if index($pf-title-set--mega, $sizing) != null {\n $line-height: pfe-var(line-height--heading-mega);\n $font-weight: pfe-var(font-weight--light);\n @if $spacing { \n $margin-bottom: pfe-var(content-spacer--heading--md);\n }\n }\n // $sizing == \"4xl\" or \"3xl\" or \"2xl\" \n @else if index($pf-title-set--regular, $sizing) != null {\n $line-height: pfe-var(line-height--heading);\n $font-weight: pfe-var(font-weight--normal);\n @if $spacing { \n $margin-bottom: pfe-var(content-spacer--heading--sm);\n }\n }\n // If this value was not found in the tiny set, it's likely not supported\n @else if index($pf-title-set--tiny, $sizing) == null {\n @warn \"#{$sizing} was not found in $pf-title-set--mega, $pf-title-set--regular, or $pf-title-set--tiny.\";\n }\n\n // For component use, this option allows the mixin to use values set in the component level map\n @if $use-local {\n // remove title var from stack, use global only\n $font-size: pfe-var(FontSize--#{$sizing});\n\n font-family: pfe-var(font-family--heading)#{$rules};\n font-size: pfe-local(FontSize, $font-size, $region)#{$rules};\n @if $base == true {\n line-height: pfe-local(LineHeight, $line-height, $region)#{$rules};\n font-weight: pfe-local(FontWeight, $font-weight, $region)#{$rules};\n }\n @if $spacing { \n &:not(:last-child) {\n margin-bottom: pfe-local(MarginBottom, $margin-bottom, $region)#{$rules};\n }\n }\n }\n \n @else {\n // include title var and global var in stack\n $font-size: pfe-var(title--m-#{$sizing}--FontSize);\n font-family: pfe-var(font-family--heading)#{$rules};\n font-size: $font-size#{$rules};\n @if $base == true {\n line-height: $line-height#{$rules};\n font-weight: $font-weight#{$rules};\n }\n @if $spacing { \n &:not(:last-child) {\n margin-bottom: $margin-bottom#{$rules};\n }\n }\n }\n // this CSS custom property is an extra hook for components to override things, like .pfe-card { --pf-c-FontSize: 32px; }\n @if $use-local and $light-dom-heading {\n --pf-c--FontSize: #{pfe-local(FontSize)};\n }\n }\n}\n\n/// ALIAS Typography mixin for generating the font-size only within components. Still accepts all arguments.\n/// @group typography\n/// @param {String} $sizing [xl] - Human-readable description for the font-size of the stack you are building.\n/// @param {String} $type [title] - Describes the type of element being created and determines which variable stack to pull from. Also accepts \"text\".\n/// @param {Bool} $base [false] You may opt out of other typography properties (besides size) such as font-weight and line-height (and font-family on text). \n/// @param {Bool} $spacing [false] - You may opt out of the margin-bottom which adds space below the typographical element \n/// @param {Bool} $important [false] - Boolean value for if properties need to be postfixed with `!important`. Use of `!important` is only recommended for utility classes.\n/// @param {Boolean} $use-local [true] - Set this to true when using the mixin within components. This will print a local CSS variable at the beginning of the CSS variable stack and will omit title/text variables. Note that this mixin will not utilize any values from the $LOCAL-VARIABLES map.\n/// @param {String} $region [null] - For use with local variables only. For more about the regional designation, see pfe-var().\n/// @param {Boolean} $light-dom-heading: [false] - Print the --pf-c--FontSize variable with a value of the font-size variable stack. For more information about --pf-c--FontSize, see the HTML HEADINGS section in pfe-base.scss.\n/// @requires {function} pfe-var\n/// @requires {function} pfe-local\n/// @requires {variable} $pf-title-set--mega\n/// @requires {variable} $pf-title-set--regular\n/// @requires {variable} $pf-title-set--tiny\n/// @example - scss - Basic example for medium text sizing\n/// $LOCAL: jump-links;\n/// .jump-links-text {\n/// @include pfe-c-typography($type: text, $sizing: md, $region: header, $light-dom-heading: true)\n/// }\n/// @example - css - Rendered result\n/// .jump-links-text {\n/// font-size: 1rem;\n/// font-size: var(--pfe-clipboard__header--FontSize, var(--pf-global--FontSize--md, 1rem));\n/// --pf-c--FontSize: var(--pfe-clipboard--FontSize, 1rem);\n/// }\n@mixin pfe-c-typography (\n $sizing: \"xl\", \n $type: \"title\", \n $base: false, // different than mixin above\n $spacing: false, // different than mixin above\n $use-local: true, \n $region: null,\n $light-dom-heading: false,\n $important: false\n) {\n @include pfe-typography(\n $sizing: $sizing,\n $type: $type,\n $base: $base,\n $spacing: $spacing,\n $use-local: $use-local,\n $region: $region,\n $light-dom-heading: $light-dom-heading,\n $important: $important,\n );\n}",".pfe-title--6xl {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n font-size: var(--pf-c-title--m-6xl--FontSize, var(--pf-global--FontSize--6xl, 3rem)) !important;\n line-height: var(--pfe-theme--line-height--heading-mega, 1.2) !important;\n font-weight: var(--pfe-theme--font-weight--light, 300) !important;\n}\n\n.pfe-title--6xl:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--md, 1.5rem) !important;\n}\n\n.pfe-title--5xl {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n font-size: var(--pf-c-title--m-5xl--FontSize, var(--pf-global--FontSize--5xl, 2.5rem)) !important;\n line-height: var(--pfe-theme--line-height--heading-mega, 1.2) !important;\n font-weight: var(--pfe-theme--font-weight--light, 300) !important;\n}\n\n.pfe-title--5xl:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--md, 1.5rem) !important;\n}\n\n.pfe-title--4xl {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n font-size: var(--pf-c-title--m-4xl--FontSize, var(--pf-global--FontSize--4xl, 2.25rem)) !important;\n line-height: var(--pfe-theme--line-height--heading, 1.3) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-title--4xl:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem) !important;\n}\n\n.pfe-title--3xl {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n font-size: var(--pf-c-title--m-3xl--FontSize, var(--pf-global--FontSize--3xl, 1.75rem)) !important;\n line-height: var(--pfe-theme--line-height--heading, 1.3) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-title--3xl:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem) !important;\n}\n\n.pfe-title--2xl {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n font-size: var(--pf-c-title--m-2xl--FontSize, var(--pf-global--FontSize--2xl, 1.5rem)) !important;\n line-height: var(--pfe-theme--line-height--heading, 1.3) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-title--2xl:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem) !important;\n}\n\n.pfe-title--xl {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n font-size: var(--pf-c-title--m-xl--FontSize, var(--pf-global--FontSize--xl, 1.25rem)) !important;\n line-height: var(--pfe-theme--line-height, 1.5) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-title--xl:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem) !important;\n}\n\n.pfe-title--lg {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem)) !important;\n line-height: var(--pfe-theme--line-height, 1.5) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-title--lg:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem) !important;\n}\n\n.pfe-title--md {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n font-size: var(--pf-c-title--m-md--FontSize, var(--pf-global--FontSize--md, 1rem)) !important;\n line-height: var(--pfe-theme--line-height, 1.5) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-title--md:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem) !important;\n}\n\n.pfe-title--sm {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n font-size: var(--pf-c-title--m-sm--FontSize, var(--pf-global--FontSize--sm, 0.875rem)) !important;\n line-height: var(--pfe-theme--line-height, 1.5) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-title--sm:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem) !important;\n}\n\n.pfe-title--xs {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n font-size: var(--pf-c-title--m-xs--FontSize, var(--pf-global--FontSize--xs, 0.75rem)) !important;\n line-height: var(--pfe-theme--line-height, 1.5) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-title--xs:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem) !important;\n}\n\n.pfe-text--xl {\n font-size: var(--pf-c-text--m-xl--FontSize, var(--pf-global--FontSize--xl, 1.25rem)) !important;\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n line-height: var(--pfe-theme--line-height, 1.5) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-text--xl:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem) !important;\n}\n\n.pfe-text--lg {\n font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem)) !important;\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n line-height: var(--pfe-theme--line-height, 1.5) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-text--lg:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem) !important;\n}\n\n.pfe-text--md {\n font-size: var(--pf-c-text--m-md--FontSize, var(--pf-global--FontSize--md, 1rem)) !important;\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n line-height: var(--pfe-theme--line-height, 1.5) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-text--md:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem) !important;\n}\n\n.pfe-text--sm {\n font-size: var(--pf-c-text--m-sm--FontSize, var(--pf-global--FontSize--sm, 0.875rem)) !important;\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n line-height: var(--pfe-theme--line-height, 1.5) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-text--sm:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem) !important;\n}\n\n.pfe-text--xs {\n font-size: var(--pf-c-text--m-xs--FontSize, var(--pf-global--FontSize--xs, 0.75rem)) !important;\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n line-height: var(--pfe-theme--line-height, 1.5) !important;\n font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n}\n\n.pfe-text--xs:not(:last-child):not(:empty) {\n margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem) !important;\n}\n\nol.pfe-list--primary {\n list-style: none;\n min-height: var(--pfe-list-ol--primary--gap, var(--pfe-theme--content-spacer, 1.5rem));\n margin: var(--pfe-list-ol--primary--gap, var(--pfe-theme--content-spacer, 1.5rem));\n padding-left: var(--pfe-list-ol--primary--PaddingLeft, 0);\n}\n\nol.pfe-list--primary > li {\n counter-increment: pfe-list;\n position: relative;\n min-height: var(--pfe-list-ol--primary__circle--size, 56px);\n padding-left: calc(var(--pfe-list-ol--primary--spacer, var(--pfe-theme--content-spacer, 1.5rem)) + var(--pfe-list-ol--primary__circle--size, 56px));\n padding-top: calc((var(--pfe-list-ol--primary__circle--size, 56px) / 2) - ((var(--pfe-list-ol--primary__circle--FontSize, 24px) / 2)));\n}\n\nol.pfe-list--primary > ul {\n list-style-type: disc;\n}\n\nol.pfe-list--primary > li:before {\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n font-size: var(--pf-c-title--m-2xl--FontSize, var(--pf-global--FontSize--2xl, 1.5rem));\n line-height: var(--pfe-theme--line-height--heading, 1.3);\n font-weight: var(--pfe-theme--font-weight--normal, 400);\n display: block;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n width: var(--pfe-list-ol--primary__circle--size, 56px);\n height: var(--pfe-list-ol--primary__circle--size, 56px);\n content: counter(pfe-list);\n font-size: var(--pfe-list-ol--primary__circle--FontSize, 24px);\n color: rgba(var(--pfe-list-ol--primary__circle--color, 238, 0, 0), 1);\n background-color: var(--pfe-list-ol--primary__circle--BackgroundColor, rgba(var(--pfe-list-ol--primary__circle--color, 238, 0, 0), 0.07));\n}\n\nol.pfe-list--primary > li:before:not(:last-child) {\n margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);\n}\n\nol.pfe-list--primary > li *:first-child {\n margin-top: var(--pfe-list-ol--primary__item-first-child--MarginTop, 0);\n}\n\nol.pfe-list--primary.pfe-l-grid.pfe-m-gutters {\n --pfe-grid--gap--vertical: var(--pfe-list-ol--primary--gap, var(--pfe-theme--content-spacer, 1.5rem));\n --pfe-grid--gap--horizontal: var(--pfe-list-ol--primary--gap, var(--pfe-theme--content-spacer, 1.5rem));\n --pfe-grid--Margin: var(--pfe-list-ol--primary--Margin, var(--pfe-theme--content-spacer, 1.5rem));\n --pfe-grid__item--Margin: var(--pfe-list-ol--primary__item--Margin, 0);\n}\n","////\n/// Accordion-specific SASS Vars\n/// @group accordion\n////\n\n@function pfe-accordion-variables($state: default, $context: default, $variant: default) {\n // Shared variables for all contexts\n $accordion-styles: ();\n\n @if $state != expanded { // Default state\n // Shared variables for all contexts\n $accordion-styles: (\n BorderColor--accent: transparent,\n BorderColor: pfe-var(surface--border),\n BorderTopWidth: pfe-var(surface--border-width),\n BorderRightWidth: 0,\n BorderBottomWidth: pfe-var(surface--border-width),\n BorderLeftWidth: pfe-var(surface--border-width--heavy),\n Color: pfe-broadcasted(text),\n TextAlign: left,\n accent: pfe-var(ui-accent),\n base: (\n Padding: pfe-var(container-spacer)\n )\n );\n\n @if $context == dark { // Dark context\n $accordion-styles: (\n accent: pfe-var(ui-accent--on-dark)\n );\n }\n @else if $context == saturated { // Saturated context\n $accordion-styles: (\n accent: pfe-var(ui-accent--on-saturated)\n );\n }\n\n @if $variant == disclosure {\n $accordion-styles: (\n BorderRightWidth: pfe-var(surface--border-width),\n BorderLeftWidth: pfe-var(surface--border-width),\n BorderColor--accent: pfe-var(surface--border)\n );\n }\n }\n @else { // Expanded state\n // Shared variables for all contexts\n $accordion-styles: (\n BorderColor: pfe-var(surface--border),\n BorderRightWidth: pfe-var(surface--border-width),\n BorderLeftWidth: pfe-var(surface--border-width--heavy),\n // Defaults for light context\n BackgroundColor: rgba(255, 255, 255, 1),\n Color: pfe-var(text),\n BorderColor--accent: pfe-local(accent),\n BoxShadow: 0 5px pfe-var(surface--border-width--heavy) rgba(140, 140, 140, 0.35),\n ZIndex: 3\n );\n\n @if $context == dark { // Dark context\n $accordion-styles: (\n BackgroundColor: rgba(247, 247, 249, .1),\n Color: pfe-broadcasted(text),\n BorderColor--accent: pfe-var(ui-accent--on-dark),\n BoxShadow: none\n );\n }\n @else if $context == saturated { // Saturated context\n $accordion-styles: (\n BackgroundColor: rgba(0, 0, 0, 0.2),\n Color: pfe-broadcasted(text),\n BorderColor--accent: pfe-var(ui-accent--on-saturated),\n BoxShadow: none\n );\n }\n \n @if $variant == disclosure {\n $accordion-styles: (\n BorderLeftWidth: pfe-var(surface--border-width--heavy),\n BorderColor--accent: pfe-var(ui-accent)\n );\n }\n }\n\n @return $accordion-styles;\n}\n\n@mixin pfe-accordion-props($variant: default) {\n margin: 0;\n width: pfe-local(Width, 100%);\n max-width: 100%;\n height: auto;\n position: relative;\n\n // Since the default bg color is transparent, look to broadcast values\n background-color: pfe-local(BackgroundColor, transparent);\n color: pfe-local(Color);\n\n // Border settings\n border-width: 0;\n border-style: pfe-var(surface--border-style);\n border-color: pfe-local(BorderColor);\n border-top-width: pfe-local(BorderTopWidth, $fallback: pfe-var(surface--border-width));\n border-right-width: pfe-local(BorderRightWidth, $fallback: 0);\n border-bottom-width: pfe-local(BorderBottomWidth, $fallback: pfe-var(surface--border-width));\n border-left-width: pfe-local(BorderLeftWidth, $fallback: pfe-var(surface--border-width--heavy));\n\n @include browser-query(ie11) {\n border-top-width: pfe-fetch(surface--border-width);\n border-right-width: 0;\n border-bottom-width: pfe-fetch(surface--border-width);\n border-left-width: pfe-fetch(surface--border-width--heavy);\n }\n\n // Custom border color for the accent mark on the left\n border-left-color: pfe-local(BorderColor--accent);\n\n box-shadow: pfe-local(BoxShadow);\n z-index: pfe-local(ZIndex);\n\n &:hover,\n &:focus {\n @include pfe-print-local((\n BorderColor--accent: pfe-local(accent)\n ));\n\n @include browser-query(ie11) {\n border-left-color: pfe-fetch(ui-accent);\n }\n }\n}\n\n//-- Trigger-specific properties\n@mixin pfe-trigger {\n $chevron--spacing: 50px;\n\n $LOCAL-VARIABLES: (\n BorderBottomWidth: 0,\n ZIndex: 3,\n trigger: (\n Padding: pfe-local(Padding, $region: base) $chevron--spacing pfe-local(Padding, $region: base) calc(#{pfe-local(Padding, $region: base)} * 1.5)\n )\n );\n\n @include pfe-print-local($LOCAL-VARIABLES);\n @include pfe-accordion-props;\n\n // -webkit-appearance: button;\n cursor: pointer;\n\n font-family: inherit;\n font-size: pfe-local(FontSize--header, calc(#{pfe-var(font-size)} * 1.1));\n font-weight: pfe-var(font-weight--bold);\n text-align: pfe-local(TextAlign, left);\n line-height: pfe-var(line-height);\n padding: pfe-local(Padding, $region: trigger);\n\n &:hover {\n outline: none;\n border-left-width: pfe-var(surface--border-width--heavy);\n }\n\n &:focus {\n outline: none;\n text-decoration: underline;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin pfe-trigger-last($context: light) {\n @include pfe-print-local((\n BorderBottomWidth: pfe-var(surface--border-width)\n ));\n}\n\n//-- Panel-specific properties\n@mixin pfe-panel-variables($context: light) {\n $LOCAL-VARIABLES: (\n accent: pfe-var(ui-accent),\n BorderTopWidth: 0\n );\n\n @if $context == \"light\" { // Light context\n $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (\n BoxShadow: 0 5px pfe-var(surface--border-width--heavy) rgba(140, 140, 140, 0.35)\n ));\n }\n @else {\n $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (\n BoxShadow: none\n ));\n }\n\n @include pfe-print-local($LOCAL-VARIABLES);\n}\n\n@mixin pfe-panel-container() {\n // Ensure the box shadow does not propagate to nest accordions\n @include pfe-print-local( ( BoxShadow: none ) );\n\n @extend %container;\n padding: pfe-local(Padding, $region: panel-container);\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron($state: open, $position: after, $size: .4em, $offset: $size, $width: .1em) {\n content: \"\";\n position: absolute;\n top: calc(#{pfe-var(container-spacer)} + #{$offset});\n\n display: block;\n border-style: pfe-var(surface--border-style);\n height: $size;\n width: $size;\n transition: transform 0.15s;\n @if $state == open {\n border-width: $width $width 0 0;\n border-bottom: 0;\n transform: rotate(135deg);\n top: calc(#{pfe-var(container-spacer)} + #{$offset});\n @if $position == before {\n left: calc(#{pfe-var(container-spacer)} * 1.3125); // 21px\n top: calc(#{pfe-var(container-spacer)} + .25em);\n transform: rotate(135deg);\n }\n @else {\n right: calc(#{pfe-var(container-spacer)} * 1.3125);\n }\n }\n @else {\n border-width: 0 $width $width 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: calc(#{pfe-var(container-spacer)} * 1.3125);\n transform: rotate(-45deg);\n }\n @else {\n right: calc(#{pfe-var(container-spacer)} * 1.3125);\n }\n }\n}\n\n/// ===========================================================================\n/// List styles\n/// ===========================================================================\n\n// Mixins and extends can't use the LOCAL-VARIABLES map because we would be\n// at risk of overriding an elements map if they call our mixin. We need to\n// use just regular sass variables and pfe-local and specify the $fallbacks.\n@mixin ordered-list-primary($size: 56px) {\n // First we create our Sass variables that we will use for fallbacks\n // The gap between list items\n $gap: pfe-var(content-spacer);\n // The space between the circle and content\n $spacer: pfe-var(content-spacer);\n // rgb value of the color theme of the circle\n // we need to wrap this in a calc function so it can be dynamic.\n $color: (238, 0, 0);\n // font size of the number inside of the circle\n $number-font-size: $pf-global--FontSize--2xl;\n\n list-style: none;\n min-height: pfe-local(gap, $fallback: $gap);\n margin: pfe-local(gap, $fallback: $gap);\n padding-left: pfe-local(PaddingLeft, $fallback: 0);\n\n & > li {\n // increment the local counter variable\n counter-increment: pfe-list;\n position: relative;\n min-height: pfe-local(size, $region: circle, $fallback: $size);\n // the li content will start after the circle and a defined spacer\n padding-left: calc(#{pfe-local(spacer, $fallback: $spacer)} + #{pfe-local(size, $region: circle, $fallback: $size)});\n // the li content needs to align with the middle of the radius but we\n // need to account for the fact that it's also calculating the size\n // of the line height of the number inside of the circle\n padding-top: calc((#{pfe-local(size, $region: circle, $fallback: $size)} / 2) - ((#{pfe-local(FontSize, $region: circle, $fallback: $number-font-size)} / 2)));\n }\n & > ul {\n list-style-type: disc;\n }\n & > li:before {\n @include pfe-typography(2xl, $type: \"title\");\n // we need to make sure that if the size of the number in the circle changes\n // that doesn't affect the size or shape of the circle. since we don't have\n // any more psuedo elements to work with, we need to use the flexbox technique\n // to center the text.\n display: block;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n // make the circle using border-radius\n border-radius: 50%;\n // keep the circle on the upper left\n position: absolute;\n top: 0;\n left: 0;\n // set the size of the circle\n width: pfe-local(size, $region: circle, $fallback: $size);\n height: pfe-local(size, $region: circle, $fallback: $size);\n // set the contents of the circle\n content: counter(pfe-list);\n font-size: pfe-local(FontSize, $region: circle, $fallback: $number-font-size);\n color: rgba(#{pfe-local(color, $region: circle, $fallback: $color)}, 1);\n // generate a background color based on the circle text color\n // provide an override for BackgroundColor if the user needs to specify\n // custom color.\n background-color: pfe-local(BackgroundColor, $region: circle, $fallback: rgba(pfe-local(color, $region: circle, $fallback: $color), 0.07));\n }\n\n & > li *:first-child {\n margin-top: pfe-local(MarginTop, $region: item-first-child, $fallback: 0);\n }\n\n // for pfe-grids we:\n // - use the pfe-grid API to add grid gap.\n // - remove the margins on the <li> tags in favor of the grid gap.\n // - add top and bottom margin back to the <ol> tags to maintain correct offset with surrounding content.\n &.pfe-l-grid.pfe-m-gutters {\n --pfe-grid--gap--vertical: #{pfe-local(gap, $fallback: $gap)};\n --pfe-grid--gap--horizontal: #{pfe-local(gap, $fallback: $gap)};\n --pfe-grid--Margin: #{pfe-local(Margin, $fallback: $gap)};\n --pfe-grid__item--Margin: #{pfe-local(Margin, $region: item, $fallback: 0)};\n }\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n