Examples
With or without fill
Navigation
header-tools
.pf-m-fill to fill the available space.
.pf-m-no-fill to not fill the available space.
Main section padding
toggle
Logo
header-tools
.pf-c-page__main-section has default padding.
.pf-c-page__main-section uses
.pf-m-no-padding to remove all padding.
.pf-c-page__main-section uses
.pf-m-no-padding .pf-m-padding-on-md to remove padding up to the
md breakpoint.
Main section variations
toggle
Logo
header-tools
.pf-c-page__main-nav for tertiary navigation
.pf-c-page__main-tabs for tabs
.pf-c-page__main-group for a group of page sections
.pf-c-page__main-section for main sections
.pf-c-page__main-wizard for wizards
Centered section
toggle
Logo
header-tools
When a width limited page section is wider than the value of
The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
--pf-c-page--section--m-limit-width--MaxWidth, the section will be centered in the main section.
The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
Documentation
Overview
This component provides the basic chrome for a page, including sidebar, header, and main areas. To make the page component take up the full height of the viewport, it is recommended to add height: 100%; to all ancestor elements of the page component.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
role="banner" | .pf-c-page__header | Identifies the element that serves as the banner region. |
role="main" | .pf-c-page__main | Identifies the element that serves as the main region. |
tabindex="-1" | .pf-c-page__main | Allows the main region to receive programmatic focus. Required |
id="[id]" | .pf-c-page__main | Provides a hook for sending focus to new content. Required |
aria-expanded="true/false" | .pf-c-page__header-brand-toggle > .pf-c-button | Indicates that the expandable content is visible and the current state of the contents. Required |
aria-controls="[id of nav]" | .pf-c-page__header-brand-toggle > .pf-c-button | Identifies the element controlled by the toggle. Required |
tabindex="0" | .pf-c-page__main-section.pf-m-overflow-scroll | If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding tabindex="0". |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-page | <div> | Declares the page component. |
.pf-m-full-height | .pf-c-page | Sets the page to be full height. Eliminates the need to ensure that all ancestors of .pf-c-page have height of 100% set. |
.pf-c-page__header | <header> | Declares the page header. |
.pf-c-page__header-brand | <div> | Creates a header container to nest the brand component. |
.pf-c-page__header-brand-toggle | <div> | Creates a container to nest the sidebar toggle. |
.pf-c-page__header-brand-link | <a>, <span> | Creates a link for the brand logo. Use a <span> if there is no link. |
.pf-c-page__header-selector | <div> | Creates a header container to nest the context selector component. |
.pf-c-page__header-nav | <div> | Creates a container to nest the navigation component in the header. |
.pf-c-page__header-tools | <div> | Creates a container to nest the icons and menus in header. |
.pf-c-page__header-tools-group | <div> | Creates a container for grouping sets of icons and menus in header. |
.pf-c-page__header-tools-item | <div> | Creates a container for an item in a header tools group. |
.pf-c-page__sidebar | <aside> | Declares the page sidebar. |
.pf-c-page__sidebar-body | <div> | Creates a wrapper within the sidebar to hold content. |
.pf-c-page__main | <main> | Declares the main page area. |
.pf-c-page__main-nav | <section> | Creates a container to nest the navigation component in the main page area. |
.pf-c-page__main-breadcrumb | <section> | Creates a container to nest the breadcrumb component in the main page area. |
.pf-c-page__main-section | <section> | Creates a section container in the main page area. Note: The last/only .pf-c-page__main-section element will grow to fill the availble vertical space. You can change this behavior using .pf-m-fill and .pf-m-no-fill, which are documented below. |
.pf-c-page__main-tabs | <section> | Creates a container to nest the tabs component in the main page area. |
.pf-c-page__main-wizard | <section> | Creates a container to nest the wizard component in the main page area. |
.pf-c-page__main-body | <div> | Creates the body section for a page section. Required when using .pf-m-limit-width on .pf-c-page__main-section |
.pf-c-page__main-group | <div> | Creates the group of .pf-c-page__main-* sections. Can be used in combination with .pf-m-sticky-[top/bottom] to make multiple sections sticky. |
.pf-c-page__drawer | <div> | Creates a container for the drawer component when placing the main page element in the drawer body. |
.pf-m-selected | .pf-c-page__header-tools-item | Modifies a header tools item to indicate that the button inside is in the selected state. |
.pf-m-expanded | .pf-c-page__sidebar | Modifies the sidebar for the expanded state. |
.pf-m-collapsed | .pf-c-page__sidebar | Modifies the sidebar for the collapsed state. |
.pf-m-light | .pf-c-page__sidebar | Modifies the sidebar the light variation. Note: for use with a light themed nav component |
.pf-m-light | .pf-c-page__main-section | Modifies a main page section to have a light theme. |
.pf-m-dark-200 | .pf-c-page__main-section | Modifies a main page section to have a dark theme and a dark transparent background. |
.pf-m-dark-100 | .pf-c-page__main-section | Modifies a main page section to have a dark theme and a darker transparent background. |
.pf-m-light-200 | .pf-c-page__main-wizard | Modifies a wizard page section to have a light 200 theme. |
.pf-m-no-padding, .pf-m-no-padding{-on-[breakpoint]} | .pf-c-page__main-section | Removes padding from the main page section at an optional breakpoint. |
.pf-m-padding{-on-[breakpoint]} | .pf-c-page__main-section | Modifies the main page section to add padding back in at an optional breakpoint. Should be used with pf-m-no-padding. |
.pf-m-fill | .pf-c-page__main-section | Modifies a main page section to grow to fill the available vertical space. |
.pf-m-no-fill | .pf-c-page__main-section | Modifies a main page section to not grow to fill the available vertical space. |
.pf-m-hidden{-on-[breakpoint]} | .pf-c-page__header-tools-group, .pf-c-page__header-tools-item | Hides a header tools group or item at an optional breakpoint, or hides it at all breakpoints with .pf-m-hidden. |
.pf-m-visible{-on-[breakpoint]} | .pf-c-page__header-tools-group, .pf-c-page__header-tools-item | Shows a header tools group or item at an optional breakpoint. |
.pf-m-limit-width | .pf-c-page__main-section | Modifies a page section to limit the max-width of the content inside. |
.pf-m-align-center | .pf-c-page__main-section.pf-m-limit-width | Modifies a page section body to align center. |
.pf-m-sticky-top{-on-[breakpoint]-height} | .pf-c-page__main-* | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
.pf-m-sticky-bottom{-on-[breakpoint]-height} | .pf-c-page__main-* | Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint. |
.pf-m-shadow-bottom | .pf-c-page__main-* | Modifies a section/group to have a bottom shadow. |
.pf-m-shadow-top | .pf-c-page__main-* | Modifies a section/group to have a top shadow. |
.pf-m-overflow-scroll | .pf-c-page__main-* | Modifies a section/group to show a scrollbar if it has overflow content. |
CSS variables
| .pf-c-page__sidebar.pf-m-light | --pf-global--Color--100 | #151515 | ||
| .pf-c-page__sidebar.pf-m-light | --pf-global--Color--200 | #6a6e73 | ||
| .pf-c-page__sidebar.pf-m-light | --pf-global--BorderColor--100 | #d2d2d2 | ||
| .pf-c-page__sidebar.pf-m-light | --pf-global--primary-color--100 | #06c | ||
| .pf-c-page__sidebar.pf-m-light | --pf-global--link--Color | #06c | ||
| .pf-c-page__sidebar.pf-m-light | --pf-global--link--Color--hover | #004080 | ||
| .pf-c-page__sidebar.pf-m-light | --pf-global--BackgroundColor--100 | #fff | ||
| .pf-c-page__sidebar.pf-m-light | --pf-c-page__sidebar--BackgroundColor | #fff | ||
| .pf-c-page__main-section[class*=pf-m-dark-] | --pf-global--Color--100 | #fff | ||
| .pf-c-page__main-section[class*=pf-m-dark-] | --pf-global--Color--200 | #f0f0f0 | ||
| .pf-c-page__main-section[class*=pf-m-dark-] | --pf-global--BorderColor--100 | #b8bbbe | ||
| .pf-c-page__main-section[class*=pf-m-dark-] | --pf-global--primary-color--100 | #73bcf7 | ||
| .pf-c-page__main-section[class*=pf-m-dark-] | --pf-global--link--Color | #2b9af3 | ||
| .pf-c-page__main-section[class*=pf-m-dark-] | --pf-global--link--Color--hover | #2b9af3 | ||
| .pf-c-page__main-section[class*=pf-m-dark-] | --pf-global--BackgroundColor--100 | #151515 | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card | --pf-c-card--BackgroundColor | rgba(#030303, .32) | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-primary--Color | #06c | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-primary--hover--Color | #06c | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-primary--focus--Color | #06c | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-primary--active--Color | #06c | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-primary--BackgroundColor | #fff | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-primary--hover--BackgroundColor | #f0f0f0 | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-primary--focus--BackgroundColor | #f0f0f0 | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-primary--active--BackgroundColor | #f0f0f0 | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-secondary--Color | #fff | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-secondary--hover--Color | #fff | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-secondary--focus--Color | #fff | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-secondary--active--Color | #fff | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-secondary--BorderColor | #fff | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-secondary--hover--BorderColor | #fff | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-secondary--focus--BorderColor | #fff | ||
| .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button | --pf-c-button--m-secondary--active--BorderColor | #fff | ||
| .pf-c-page__header-tools-item | --pf-hidden-visible--visible--Visibility | visible | ||
| .pf-c-page__header-tools-item | --pf-hidden-visible--hidden--Display | none | ||
| .pf-c-page__header-tools-item | --pf-hidden-visible--hidden--Visibility | hidden | ||
| .pf-c-page__header-tools-item | --pf-hidden-visible--Display | block | ||
| .pf-c-page__header-tools-item | --pf-hidden-visible--Visibility | visible | ||
| .pf-c-page__header-tools-item | --pf-hidden-visible--visible--Display | block | ||
| .pf-m-hidden.pf-c-page__header-tools-item | --pf-hidden-visible--Display | none | ||
| .pf-m-hidden.pf-c-page__header-tools-item | --pf-hidden-visible--Visibility | hidden | ||
| .pf-c-page | --pf-c-page--BackgroundColor | #f0f0f0 | ||
| .pf-c-page | --pf-c-page__header--BackgroundColor | #151515 | ||
| .pf-c-page | --pf-c-page__header--ZIndex | 300 | ||
| .pf-c-page | --pf-c-page__header--MinHeight | 4.75rem | ||
| .pf-c-page | --pf-c-page__header-brand--PaddingLeft | 1rem | ||
| .pf-c-page | --pf-c-page__header-brand--xl--PaddingRight | 2rem | ||
| .pf-c-page | --pf-c-page__header-brand--xl--PaddingLeft | 1.5rem | ||
| .pf-c-page | --pf-c-page__header-sidebar-toggle__c-button--PaddingTop | 0.5rem | ||
| .pf-c-page | --pf-c-page__header-sidebar-toggle__c-button--PaddingRight | 0.5rem | ||
| .pf-c-page | --pf-c-page__header-sidebar-toggle__c-button--PaddingBottom | 0.5rem | ||
| .pf-c-page | --pf-c-page__header-sidebar-toggle__c-button--PaddingLeft | 0.5rem | ||
| .pf-c-page | --pf-c-page__header-sidebar-toggle__c-button--MarginRight | 1rem | ||
| .pf-c-page | --pf-c-page__header-sidebar-toggle__c-button--MarginLeft | calc(0.5rem * -1) | ||
| .pf-c-page | --pf-c-page__header-sidebar-toggle__c-button--FontSize | 1.5rem | ||
| .pf-c-page | --pf-c-page__header-brand-link--c-brand--MaxHeight | 3.75rem | ||
| .pf-c-page | --pf-c-page__header-nav--BackgroundColor | #212427 | ||
| .pf-c-page | --pf-c-page__header-nav--xl--BackgroundColor | transparent | ||
| .pf-c-page | --pf-c-page__header-nav--xl--PaddingRight | 2rem | ||
| .pf-c-page | --pf-c-page__header-nav--xl--PaddingLeft | 2rem | ||
| .pf-c-page | --pf-c-page__header-tools--MarginRight | 1rem | ||
| .pf-c-page | --pf-c-page__header-tools--xl--MarginRight | 1.5rem | ||
| .pf-c-page | --pf-c-page__header-tools--c-avatar--MarginLeft | 1rem | ||
| .pf-c-page | --pf-c-page__header-tools-group--MarginLeft | 2rem | ||
| .pf-c-page | --pf-c-page__header-tools-group--Display | flex | ||
| .pf-c-page | --pf-c-page__header-tools-item--Display | block | ||
| .pf-c-page | --pf-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor | #3c3f42 | ||
| .pf-c-page | --pf-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor | #004080 | ||
| .pf-c-page | --pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor | #a30000 | ||
| .pf-c-page | --pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor | #004080 | ||
| .pf-c-page | --pf-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor | #a30000 | ||
| .pf-c-page | --pf-c-page__header-tools--c-button--m-selected--before--Width | auto | ||
| .pf-c-page | --pf-c-page__header-tools--c-button--m-selected--before--Height | auto | ||
| .pf-c-page | --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor | #3c3f42 | ||
| .pf-c-page | --pf-c-page__header-tools--c-button--m-selected--before--BorderRadius | 3px | ||
| .pf-c-page | --pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor | transparent | ||
| .pf-c-page | --pf-c-page__sidebar--ZIndex | 200 | ||
| .pf-c-page | --pf-c-page__sidebar--Width | 18.125rem | ||
| .pf-c-page | --pf-c-page__sidebar--BackgroundColor | #212427 | ||
| .pf-c-page | --pf-c-page__sidebar--m-light--BackgroundColor | #fff | ||
| .pf-c-page | --pf-c-page__sidebar--m-light--BorderRightWidth | 1px | ||
| .pf-c-page | --pf-c-page__sidebar--m-light--BorderRightColor | #d2d2d2 | ||
| .pf-c-page | --pf-c-page__sidebar--BoxShadow | 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | ||
| .pf-c-page | --pf-c-page__sidebar--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| .pf-c-page | --pf-c-page__sidebar--TranslateX | -100% | ||
| .pf-c-page | --pf-c-page__sidebar--TranslateZ | 0 | ||
| .pf-c-page | --pf-c-page__sidebar--m-expanded--TranslateX | 0 | ||
| .pf-c-page | --pf-c-page__sidebar--xl--TranslateX | 0 | ||
| .pf-c-page | --pf-c-page__sidebar-body--PaddingTop | 0.5rem | ||
| .pf-c-page | --pf-c-page__sidebar-body--PaddingBottom | 1rem | ||
| .pf-c-page | --pf-c-page__sidebar-body--m-menu--PaddingTop | 0 | ||
| .pf-c-page | --pf-c-page__sidebar-body--m-menu--PaddingBottom | 0 | ||
| .pf-c-page | --pf-c-page__sidebar-body--m-menu--BorderTopColor | #3c3f42 | ||
| .pf-c-page | --pf-c-page__sidebar-body--m-menu--BorderTopWidth | 1px | ||
| .pf-c-page | --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor | #3c3f42 | ||
| .pf-c-page | --pf-c-page__main--ZIndex | 100 | ||
| .pf-c-page | --pf-c-page__main-section--PaddingTop | 1rem | ||
| .pf-c-page | --pf-c-page__main-section--PaddingRight | 1rem | ||
| .pf-c-page | --pf-c-page__main-section--PaddingBottom | 1rem | ||
| .pf-c-page | --pf-c-page__main-section--PaddingLeft | 1rem | ||
| .pf-c-page | --pf-c-page__main-section--xl--PaddingTop | 1.5rem | ||
| .pf-c-page | --pf-c-page__main-section--xl--PaddingRight | 1.5rem | ||
| .pf-c-page | --pf-c-page__main-section--xl--PaddingBottom | 1.5rem | ||
| .pf-c-page | --pf-c-page__main-section--xl--PaddingLeft | 1.5rem | ||
| .pf-c-page | --pf-c-page__main-breadcrumb--main-section--PaddingTop | 1rem | ||
| .pf-c-page | --pf-c-page__main-section--BackgroundColor | #f0f0f0 | ||
| .pf-c-page | --pf-c-page__main-section--m-light--BackgroundColor | #fff | ||
| .pf-c-page | --pf-c-page__main-section--m-light-100--BackgroundColor | #fafafa | ||
| .pf-c-page | --pf-c-page__main-section--m-dark-100--BackgroundColor | rgba(#030303, .62) | ||
| .pf-c-page | --pf-c-page__main-section--m-dark-200--BackgroundColor | rgba(#030303, .32) | ||
| .pf-c-page | --pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop | 1rem | ||
| .pf-c-page | --pf-c-page__main-nav--page__main-tabs--PaddingTop | 1rem | ||
| .pf-c-page | --pf-c-page--section--m-limit-width--MaxWidth | calc(125rem - 18.125rem) | ||
| .pf-c-page | --pf-c-page--section--m-sticky-top--ZIndex | 300 | ||
| .pf-c-page | --pf-c-page--section--m-sticky-top--BoxShadow | 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
| .pf-c-page | --pf-c-page--section--m-sticky-bottom--ZIndex | 300 | ||
| .pf-c-page | --pf-c-page--section--m-sticky-bottom--BoxShadow | 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
| .pf-c-page | --pf-c-page--section--m-shadow-bottom--BoxShadow | 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
| .pf-c-page | --pf-c-page--section--m-shadow-bottom--ZIndex | 100 | ||
| .pf-c-page | --pf-c-page--section--m-shadow-top--BoxShadow | 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
| .pf-c-page | --pf-c-page--section--m-shadow-top--ZIndex | 100 | ||
| .pf-c-page | --pf-c-page__main-nav--BackgroundColor | #fff | ||
| .pf-c-page | --pf-c-page__main-nav--PaddingTop | 1rem | ||
| .pf-c-page | --pf-c-page__main-nav--PaddingRight | 0 | ||
| .pf-c-page | --pf-c-page__main-nav--PaddingLeft | 0 | ||
| .pf-c-page | --pf-c-page__main-nav--m-sticky-top--PaddingBottom | 1rem | ||
| .pf-c-page | --pf-c-page__main-nav--xl--PaddingRight | 0.5rem | ||
| .pf-c-page | --pf-c-page__main-nav--xl--PaddingLeft | 0.5rem | ||
| .pf-c-page | --pf-c-page__main-subnav--BackgroundColor | #212427 | ||
| .pf-c-page | --pf-c-page__main-subnav--BorderTopWidth | 1px | ||
| .pf-c-page | --pf-c-page__main-subnav--BorderTopColor | #3c3f42 | ||
| .pf-c-page | --pf-c-page__main-subnav--BorderLeftWidth | 0 | ||
| .pf-c-page | --pf-c-page__main-subnav--BorderLeftColor | #3c3f42 | ||
| .pf-c-page | --pf-c-page__sidebar--main__main-subnav--BorderLeftWidth | 1px | ||
| .pf-c-page | --pf-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth | 0 | ||
| .pf-c-page | --pf-c-page__main-breadcrumb--BackgroundColor | #fff | ||
| .pf-c-page | --pf-c-page__main-breadcrumb--PaddingTop | 1rem | ||
| .pf-c-page | --pf-c-page__main-breadcrumb--PaddingRight | 1rem | ||
| .pf-c-page | --pf-c-page__main-breadcrumb--PaddingBottom | 0 | ||
| .pf-c-page | --pf-c-page__main-breadcrumb--PaddingLeft | 1rem | ||
| .pf-c-page | --pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom | 1rem | ||
| .pf-c-page | --pf-c-page__main-breadcrumb--xl--PaddingRight | 1.5rem | ||
| .pf-c-page | --pf-c-page__main-breadcrumb--xl--PaddingLeft | 1.5rem | ||
| .pf-c-page | --pf-c-page__main-tabs--PaddingTop | 0 | ||
| .pf-c-page | --pf-c-page__main-tabs--PaddingRight | 0 | ||
| .pf-c-page | --pf-c-page__main-tabs--PaddingBottom | 0 | ||
| .pf-c-page | --pf-c-page__main-tabs--PaddingLeft | 0 | ||
| .pf-c-page | --pf-c-page__main-tabs--BackgroundColor | #fff | ||
| .pf-c-page | --pf-c-page__main-wizard--BackgroundColor | #fff | ||
| .pf-c-page | --pf-c-page__main-wizard--BorderTopColor | #d2d2d2 | ||
| .pf-c-page | --pf-c-page__main-wizard--BorderTopWidth | 1px | ||
| .pf-c-page | --pf-c-page__main-wizard--m-light-200--BackgroundColor | #f0f0f0 | ||
| .pf-c-page__header-tools-group | --pf-hidden-visible--visible--Display | flex | ||
| .pf-c-page__header-tools-item .pf-c-notification-badge.pf-m-read:hover | --pf-c-notification-badge--after--BackgroundColor | #3c3f42 | ||
| .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-unread | --pf-c-notification-badge--after--BackgroundColor | #004080 | ||
| .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-attention | --pf-c-notification-badge--after--BackgroundColor | #a30000 | ||
| .pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-unread | --pf-c-notification-badge--after--BackgroundColor | #004080 | ||
| .pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-attention | --pf-c-notification-badge--after--BackgroundColor | #a30000 | ||
| .pf-c-page__sidebar.pf-m-expanded | --pf-c-page__sidebar--TranslateX | 0 | ||
| .pf-c-page__sidebar-body.pf-m-menu | --pf-c-page__sidebar-body--PaddingTop | 0 | ||
| .pf-c-page__sidebar-body.pf-m-menu | --pf-c-page__sidebar-body--PaddingBottom | 0 | ||
| .pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu | --pf-c-page__sidebar-body--m-menu--BorderTopWidth | 0 | ||
| .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector | --pf-c-context-selector__toggle--BorderTopColor | transparent | ||
| .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector | --pf-c-context-selector__toggle--BorderRightColor | transparent | ||
| .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector | --pf-c-context-selector__toggle--BorderBottomColor | #3c3f42 | ||
| .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector | --pf-c-context-selector__toggle--BorderLeftColor | transparent | ||
| .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector | --pf-c-context-selector__menu--Top | 100% | ||
| .pf-c-page__sidebar.pf-m-collapsed ~ .pf-c-page__main | --pf-c-page__main-subnav--BorderLeftWidth | 0 | ||
| .pf-c-page__main-breadcrumb + .pf-c-page__main-section | --pf-c-page__main-section--PaddingTop | 1rem | ||
| .pf-c-page__main-breadcrumb.pf-m-sticky-top | --pf-c-page__main-breadcrumb--PaddingBottom | 1rem | ||
| .pf-c-page__main-nav + .pf-c-page__main-tabs | --pf-c-page__main-tabs--PaddingTop | 1rem | ||
| .pf-c-page__main-breadcrumb + .pf-c-page__main-tabs | --pf-c-page__main-tabs--PaddingTop | 1rem | ||
| .pf-c-page__main-section.pf-m-light | --pf-c-page__main-section--BackgroundColor | #fff | ||
| .pf-c-page__main-section.pf-m-light-100 | --pf-c-page__main-section--BackgroundColor | #fafafa | ||
| .pf-c-page__main-section.pf-m-dark-100 | --pf-c-page__main-section--BackgroundColor | rgba(#030303, .62) | ||
| .pf-c-page__main-section.pf-m-dark-200 | --pf-c-page__main-section--BackgroundColor | rgba(#030303, .32) | ||
| .pf-c-page__main-wizard:first-child | --pf-c-page__main-wizard--BorderTopWidth | 0 | ||
| .pf-c-page__main-wizard.pf-m-light-200 | --pf-c-page__main-wizard--BackgroundColor | #f0f0f0 | ||
View source on GitHub
