Introduction
Toolbar relies on groups (.pf-c-toolbar__group) and items (.pf-c-toolbar__item), with default spacer values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group or item. Each modifier applies a unique CSS variable, therefore, the base spacer value for all elements can be customized and item/groups spacers can be themed individually. The default spacer value for items and groups is set to --pf-c-toolbar--spacer--base, whose value is --pf-global--spacer--md or 16px.
Default spacing for items and groups:
Class | CSS Variable | Computed Value |
|---|---|---|
.pf-c-toolbar__item | --pf-c-toolbar__item--spacer | 16px |
.pf-c-toolbar__group | --pf-c-toolbar__group--spacer | 16px |
Toolbar item types
Class | Applied to | Outcome |
|---|---|---|
.pf-m-bulk-select | .pf-c-toolbar__item | Initiates bulk select spacing. Spacer value is set to var(--pf-c-toolbar--m-bulk-select--spacer). |
.pf-m-overflow-menu | .pf-c-toolbar__item | Initiates overflow menu spacing. Spacer value is set to var(--pf-c-toolbar--m-overflow-menu--spacer). |
.pf-m-pagination | .pf-c-toolbar__item | Initiates pagination spacing and margin. Spacer value is set to var(--pf-c-toolbar--m-pagination--spacer). |
.pf-m-search-filter | .pf-c-toolbar__item | Initiates search filter spacing. Spacer value is set to var(--pf-c-toolbar--m-search-filter--spacer). |
Modifiers
Class | Applied to | Outcome |
|---|---|---|
.pf-m-hidden{-on-[breakpoint]} | .pf-c-toolbar > * | Modifies toolbar element to be hidden, at optional breakpoint. |
.pf-m-visible{-on-[breakpoint]} | .pf-c-toolbar > * | Modifies toolbar element to be shown, at optional breakpoint. |
.pf-m-align-right{-on-[breakpoint]} | .pf-c-toolbar > * | Modifies toolbar element to align right, at optional breakpoint. |
.pf-m-align-left{-on-[breakpoint]} | .pf-c-toolbar > * | Modifies toolbar element to align left, at optional breakpoint. |
Special notes
Several components in the following examples do not include functional and/or accessibility specifications (for example .pf-c-select, .pf-c-options-menu). Rather, .pf-c-toolbar focuses on functionality and accessibility specifications that apply to it only.
Available breakpoints are: -on-sm, -on-md, -on-lg, -on-xl, and -on-2xl.
Examples
Item types
Class | Applied to | Outcome |
|---|---|---|
.pf-c-toolbar__item | <div> | Initiates the toolbar component item. Required |
.pf-c-toolbar__group | <div> | Initiates the toolbar component group. |
Spacers
In some instances, it may be necessary to adjust spacing explicitly where items are hidden/shown. For example, if a .pf-m-toggle-group is adjacent to an element being hidden/shown, the spacing may appear to be inconsistent. If possible, rely on modifier values. Available spacer modifiers are .pf-m-spacer-{none, sm, md, lg}{-on-md, -on-lg, -on-xl} and .pf-m-space-items-{none, sm, md, lg}{-on-md, -on-lg, -on-xl}. These modifiers will overwrite existing modifiers provided by .pf-c-toolbar.
Toolbar spacers and insets
Class | Applied to | Outcome |
|---|---|---|
.pf-m-page-insets | .pf-c-toolbar | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from --pf-global--spacer--md to --pf-global--spacer--lg at the xl breakpoint. |
.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]} | .pf-c-toolbar__group, .pf-c-toolbar__item | Modifies toolbar group or item spacing at optional breakpoint. |
.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]} | .pf-c-toolbar__group | Modifies toolbar group child spacing at optional breakpoint. |
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]} | .pf-c-toolbar | Modifies toolbar horizontal padding at optional breakpoint. |
Width control usage
Class | Applied to | Outcome |
|---|---|---|
--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width} | .pf-c-toolbar__item | Modifies the width value of a toolbar item at optional breakpoint. |
--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width} | .pf-c-toolbar__item | Modifies the min width value of a toolbar item at optional breakpoint. |
Toolbar group types
Class | Applied to | Outcome |
|---|---|---|
.pf-m-filter-group | .pf-c-toolbar__group | Modifies toolbar group spacing. Spacer value is set to var(--pf-c-toolbar__group--m-filter-group--spacer). Child spacer value is set to var(--pf-c-toolbar__group--m-filter-group--space-items). |
.pf-m-icon-button-group | .pf-c-toolbar__group | Modifies toolbar group spacing. Spacer value is set to var(--pf-c-toolbar__group--m-toggle-group--spacer). Child spacer value is set to var(--pf-c-toolbar__group--m-icon-button-group--space-items). |
.pf-m-button-group | .pf-c-toolbar__group | Modifies toolbar group spacing. Spacer value is set to var(--pf-c-toolbar__group--m-toggle-group--spacer). Child spacer value is set to var(--pf-c-toolbar__group--m-button-group--space-items). |
Toggle group modifier
The .pf-m-toggle-group controls when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. .pf-m-show-on-{md, lg, xl} controls when filters are shown and when the toggle button is hidden.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
hidden | .pf-c-toolbar__item, .pf-c-toolbar__group, .pf-c-toolbar__toggle, .pf-c-toolbar__expandable-content | Indicates that the toggle group element is hidden. Required |
aria-expanded="true" | .pf-c-toolbar__toggle > .pf-c-button | Indicates that the expandable content is visible. Required |
aria-expanded="false" | .pf-c-toolbar__toggle > .pf-c-button | Indicates the the expandable content is hidden. Required |
aria-controls="[id of expandable content]" | .pf-c-toolbar__toggle > .pf-c-button | Identifies the expanded content controlled by the toggle button. Required |
id="[expandable-content_id]" | .pf-c-toolbar__expandable-content | Provides a reference for toggle button description. Required |
Responsive attributes
Attribute | Applied to | Outcome |
|---|---|---|
aria-haspopup="true" | .pf-c-toolbar__toggle > .pf-c-button | When expandable content appears above content (mobile viewport), aria-haspopup="true" should be applied to indicate that focus should be trapped. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-m-show{-on-[breakpoint]} | .pf-c-toolbar__group.pf-m-toggle-group, .pf-c-toolbar__expandable-content | Modifies toolbar element visibility at optional breakpoint. This selector must be applied consistently to toggle group and expandable content. |
.pf-m-chip-container | .pf-c-toolbar__content-section, .pf-c-toolbar__group | Modifies the toolbar element for applied filters layout. |
.pf-m-expanded | .pf-c-toolbar__expandable-content, .pf-c-toolbar__toggle | Modifies the component for the expanded state. |
Selected
Stacked
Documentation
Overview
As the toolbar component is a hybrid layout and component, some of its elements are presentational, while some require accessibility support.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-toolbar | <div> | Initiates the toolbar component. Required |
.pf-c-toolbar__item | <div> | Initiates a toolbar item. Required |
.pf-c-toolbar__group | <div> | Initiates a toolbar group. |
.pf-c-toolbar__content | <div> | Initiates a toolbar content container. Required |
.pf-c-toolbar__content-section | <div> | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one .pf-c-toolbar__content-section per .pf-c-toolbar__content Required |
.pf-c-toolbar__expandable-content | <div> | Initiates a toolbar expandable content section. |
.pf-m-sticky | .pf-c-toolbar | Modifies toolbar component to be sticky to the top of its container. |
.pf-m-full-height | .pf-c-toolbar | Modifies toolbar component to full height of its container and removes vertical padding. |
.pf-m-static | .pf-c-toolbar | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
.pf-m-expanded | .pf-c-toolbar__expandable-content | Modifies expandable content section for the expanded state. |
.pf-m-bulk-select | .pf-c-toolbar__item | Initiates bulk select spacing. |
.pf-m-overflow-menu | .pf-c-toolbar__item | Initiates overflow menu spacing. |
.pf-m-pagination | .pf-c-toolbar__item | Initiates pagination spacing and margin. |
.pf-m-search-filter | .pf-c-toolbar__item | Initiates search filter spacing. |
.pf-m-chip-group | .pf-c-toolbar__item | Initiates chip group spacing. |
.pf-m-expand-all | .pf-c-toolbar__item | Initiates an item for an expand all button. |
.pf-m-expanded | .pf-c-toolbar__item.pf-m-expand-all | Modifies an expand all button for the expanded state. |
.pf-m-button-group | .pf-c-toolbar__group | Initiates button group spacing. |
.pf-m-icon-button-group | .pf-c-toolbar__group | Initiates icon button group spacing. |
.pf-m-filter-group | .pf-c-toolbar__group | Initiates filter group spacing. |
.pf-m-hidden{-on-[breakpoint]} | .pf-c-toolbar__content, .pf-c-toolbar__content-section, .pf-c-toolbar__item, .pf-c-toolbar__group | Modifies toolbar element to be hidden, at optional breakpoint. |
.pf-m-visible{-on-[breakpoint]} | .pf-c-toolbar__content, .pf-c-toolbar__content-section, .pf-c-toolbar__item, .pf-c-toolbar__group | Modifies toolbar element to be shown, at optional breakpoint. |
.pf-m-align-right{-on-[breakpoint]} | .pf-c-toolbar > * | Modifies toolbar element to align right, at optional breakpoint. |
.pf-m-align-left{-on-[breakpoint]} | .pf-c-toolbar > * | Modifies toolbar element to align left, at optional breakpoint. |
.pf-m-label | .pf-c-toolbar__item | Modifies toolbar item to label. |
.pf-m-chip-container | .pf-c-toolbar__content, .pf-c-toolbar__group | Modifies the toolbar element for applied filters layout. |
.pf-m-overflow-container | .pf-c-toolbar__item, .pf-c-toolbar__group | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
.pf-m-expanded | .pf-c-toolbar__expandable-content, .pf-c-toolbar__toggle | Modifies the component for the expanded state. |
.pf-m-wrap | .pf-c-toolbar, .pf-c-toolbar__content-section, .pf-c-toolbar__group | Modifies the toolbar element to wrap. |
.pf-m-nowrap | .pf-c-toolbar, .pf-c-toolbar__group | Modifies the toolbar element to nowrap. |
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
hidden | .pf-c-toolbar__item, .pf-c-toolbar__group, .pf-c-toolbar__toggle, .pf-c-toolbar__expandable-content | Indicates that the toolbar element is hidden. Required |
aria-expanded="true" | .pf-c-toolbar__toggle > .pf-c-button | Indicates that the expandable content is visible. Required |
aria-expanded="false" | .pf-c-toolbar__toggle > .pf-c-button | Indicates the the expandable content is hidden. Required |
aria-controls="[id of expandable content]" | .pf-c-toolbar__toggle > .pf-c-button | Identifies the expanded content controlled by the toggle button. Required |
id="[expandable-content_id]" | .pf-c-toolbar__expandable-content | Provides a reference for toggle button description. Required |
aria-label="Expand all" | .pf-c-toolbar__item.pf-m-expand-all | Provides an accessible label for the expand all item button. Required |
aria-label="Collapse all" | .pf-c-toolbar__item.pf-m-expand-all.pf-m-expanded | Provides an accessible label for the expand all item button. Required |
Toggle group usage
Class | Applied to | Outcome |
|---|---|---|
.pf-m-toggle-group | .pf-c-toolbar__group | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
.pf-m-show{-on-[breakpoint]} | .pf-c-toolbar__group.pf-m-toggle-group, .pf-c-toolbar__expandable-content | Modifies toolbar element to hidden at optional breakpoint. This selector must be applied consistently to toggle group and expandable content. |
Spacer system
Class | Applied to | Outcome |
|---|---|---|
.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]} | .pf-c-toolbar__group, .pf-c-toolbar__item | Modifies toolbar group or item spacing at optional breakpoint. |
.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]} | .pf-c-toolbar__group | Modifies toolbar group child spacing at optional breakpoint. |
CSS variables
| .pf-c-toolbar__content-section | --pf-hidden-visible--visible--Visibility | visible | ||
| .pf-c-toolbar__content-section | --pf-hidden-visible--hidden--Display | none | ||
| .pf-c-toolbar__content-section | --pf-hidden-visible--hidden--Visibility | hidden | ||
| .pf-c-toolbar__content-section | --pf-hidden-visible--Display | flex | ||
| .pf-c-toolbar__content-section | --pf-hidden-visible--Visibility | visible | ||
| .pf-c-toolbar__content-section | --pf-hidden-visible--visible--Display | flex | ||
| .pf-m-hidden.pf-c-toolbar__content-section | --pf-hidden-visible--Display | none | ||
| .pf-m-hidden.pf-c-toolbar__content-section | --pf-hidden-visible--Visibility | hidden | ||
| .pf-c-toolbar | --pf-c-toolbar--BackgroundColor | #fff | ||
| .pf-c-toolbar | --pf-c-toolbar--RowGap | 1.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar--PaddingTop | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar--PaddingBottom | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__item--Display | block | ||
| .pf-c-toolbar | --pf-c-toolbar__item--MinWidth--base | auto | ||
| .pf-c-toolbar | --pf-c-toolbar__group--Display | flex | ||
| .pf-c-toolbar | --pf-c-toolbar--m-sticky--ZIndex | 100 | ||
| .pf-c-toolbar | --pf-c-toolbar--m-sticky--BoxShadow | 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | ||
| .pf-c-toolbar | --pf-c-toolbar__content--Display | flex | ||
| .pf-c-toolbar | --pf-c-toolbar__content--PaddingRight | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__content--PaddingLeft | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__content-section--Display | flex | ||
| .pf-c-toolbar | --pf-c-toolbar--m-page-insets--inset | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar--m-page-insets--xl--inset | 1.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--Display | grid | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--PaddingTop | 1.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--PaddingRight | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--PaddingBottom | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--PaddingLeft | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--lg--PaddingRight | 0 | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--lg--PaddingBottom | 0 | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--lg--PaddingLeft | 0 | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--ZIndex | 200 | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--BoxShadow | 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18) | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--BackgroundColor | #fff | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content--m-expanded--GridRowGap | 1.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__group--m-chip-container--MarginTop | calc(1rem * -1) | ||
| .pf-c-toolbar | --pf-c-toolbar__group--m-chip-container__item--MarginTop | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar--spacer--base | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__item--spacer | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__group--spacer | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__item--Width | auto | ||
| .pf-c-toolbar | --pf-c-toolbar__group--m-toggle-group--spacer | 0.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__group--m-toggle-group--m-show--spacer | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__group--m-icon-button-group--spacer | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__group--m-icon-button-group--space-items | 0 | ||
| .pf-c-toolbar | --pf-c-toolbar__group--m-button-group--spacer | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__group--m-button-group--space-items | 0.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__group--m-filter-group--spacer | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__group--m-filter-group--space-items | 0 | ||
| .pf-c-toolbar | --pf-c-toolbar__item--m-overflow-menu--spacer | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__item--m-bulk-select--spacer | 1.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__expand-all-icon--Rotate | 0 | ||
| .pf-c-toolbar | --pf-c-toolbar__expand-all-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| .pf-c-toolbar | --pf-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate | 90deg | ||
| .pf-c-toolbar | --pf-c-toolbar__item--m-search-filter--spacer | 0.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__item--m-chip-group--spacer | 0.5rem | ||
| .pf-c-toolbar | --pf-c-toolbar__item--m-label--spacer | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar__item--m-label--FontWeight | 700 | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content__item--m-label--MarginBottom | calc(-1 * 1.5rem + 0.5rem) | ||
| .pf-c-toolbar | --pf-c-toolbar__expandable-content__item--m-label--FontSize | 0.875rem | ||
| .pf-c-toolbar | --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color | #151515 | ||
| .pf-c-toolbar | --pf-c-toolbar--c-divider--m-vertical--spacer | 1rem | ||
| .pf-c-toolbar | --pf-c-toolbar--m-full-height--PaddingTop | 0 | ||
| .pf-c-toolbar | --pf-c-toolbar--m-full-height--PaddingBottom | 0 | ||
| .pf-c-toolbar | --pf-c-toolbar--m-full-height__item--Display | flex | ||
| .pf-c-toolbar | --pf-c-toolbar--m-full-height__item--AlignItems | center | ||
| .pf-c-toolbar.pf-m-page-insets | --pf-c-toolbar__content--PaddingRight | 1rem | ||
| .pf-c-toolbar.pf-m-page-insets | --pf-c-toolbar__content--PaddingLeft | 1rem | ||
| .pf-c-toolbar.pf-m-full-height | --pf-c-toolbar--PaddingTop | 0 | ||
| .pf-c-toolbar.pf-m-full-height | --pf-c-toolbar--PaddingBottom | 0 | ||
| .pf-c-toolbar.pf-m-full-height | --pf-c-toolbar__item--Display | flex | ||
| .pf-c-toolbar__content-section > .pf-c-divider | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar__content-section > .pf-c-divider.pf-m-vertical:last-child | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar__group | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar__group | --pf-hidden-visible--visible--Display | flex | ||
| .pf-c-toolbar__group.pf-m-button-group | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar__group.pf-m-button-group > * | --pf-c-toolbar--spacer | 0.5rem | ||
| .pf-c-toolbar__group.pf-m-icon-button-group | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar__group.pf-m-icon-button-group > * | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar__group.pf-m-filter-group | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar__group.pf-m-filter-group > * | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar__group.pf-m-toggle-group | --pf-c-toolbar--spacer | 0.5rem | ||
| .pf-c-toolbar__group:last-child | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar__item | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar__item | --pf-c-toolbar__item--Width--base | auto | ||
| .pf-c-toolbar__item | --pf-c-toolbar__item--MinWidth--base | undefined | ||
| .pf-c-toolbar__item | --pf-hidden-visible--visible--Display | block | ||
| .pf-c-toolbar__item.pf-m-overflow-menu | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar__item.pf-m-bulk-select | --pf-c-toolbar--spacer | 1.5rem | ||
| .pf-c-toolbar__item.pf-m-expand-all.pf-m-expanded | --pf-c-toolbar__expand-all-icon--Rotate | 90deg | ||
| .pf-c-toolbar__item.pf-m-search-filter | --pf-c-toolbar--spacer | 0.5rem | ||
| .pf-c-toolbar__item.pf-m-chip-group | --pf-c-toolbar--spacer | 0.5rem | ||
| .pf-c-toolbar__item.pf-m-label | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar__item:last-child | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar__content | --pf-hidden-visible--visible--Display | flex | ||
| .pf-c-toolbar__expandable-content .pf-c-toolbar__group | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__item | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__group | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__group:last-child | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar .pf-c-chip-group:last-child | --pf-c-chip-group--MarginRight | 0 | ||
| .pf-c-toolbar .pf-c-chip-group li:last-child | --pf-c-chip-group__li--m-toolbar--MarginRight | 0 | ||
| .pf-m-toggle-group.pf-m-show | --pf-c-toolbar--spacer | |||
| .pf-c-toolbar .pf-m-space-items-none > * | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar .pf-m-space-items-none > :last-child | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar .pf-m-space-items-sm > * | --pf-c-toolbar--spacer | 0.5rem | ||
| .pf-c-toolbar .pf-m-space-items-sm > :last-child | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar .pf-m-space-items-md > * | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar .pf-m-space-items-md > :last-child | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar .pf-m-space-items-lg > * | --pf-c-toolbar--spacer | 1.5rem | ||
| .pf-c-toolbar .pf-m-space-items-lg > :last-child | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar .pf-m-spacer-none | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar .pf-m-spacer-none:last-child | --pf-c-toolbar--spacer | 0 | ||
| .pf-c-toolbar .pf-m-spacer-sm | --pf-c-toolbar--spacer | 0.5rem | ||
| .pf-c-toolbar .pf-m-spacer-sm:last-child | --pf-c-toolbar--spacer | 0.5rem | ||
| .pf-c-toolbar .pf-m-spacer-md | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar .pf-m-spacer-md:last-child | --pf-c-toolbar--spacer | 1rem | ||
| .pf-c-toolbar .pf-m-spacer-lg | --pf-c-toolbar--spacer | 1.5rem | ||
| .pf-c-toolbar .pf-m-spacer-lg:last-child | --pf-c-toolbar--spacer | 1.5rem | ||
| .pf-c-toolbar.pf-m-inset-none | --pf-c-toolbar--inset | 0 | ||
| .pf-c-toolbar.pf-m-inset-none | --pf-c-toolbar__content--PaddingRight | 0 | ||
| .pf-c-toolbar.pf-m-inset-none | --pf-c-toolbar__content--PaddingLeft | 0 | ||
| .pf-c-toolbar.pf-m-inset-sm | --pf-c-toolbar--inset | 0.5rem | ||
| .pf-c-toolbar.pf-m-inset-sm | --pf-c-toolbar__content--PaddingRight | 0.5rem | ||
| .pf-c-toolbar.pf-m-inset-sm | --pf-c-toolbar__content--PaddingLeft | 0.5rem | ||
| .pf-c-toolbar.pf-m-inset-md | --pf-c-toolbar--inset | 1rem | ||
| .pf-c-toolbar.pf-m-inset-md | --pf-c-toolbar__content--PaddingRight | 1rem | ||
| .pf-c-toolbar.pf-m-inset-md | --pf-c-toolbar__content--PaddingLeft | 1rem | ||
| .pf-c-toolbar.pf-m-inset-lg | --pf-c-toolbar--inset | 1.5rem | ||
| .pf-c-toolbar.pf-m-inset-lg | --pf-c-toolbar__content--PaddingRight | 1.5rem | ||
| .pf-c-toolbar.pf-m-inset-lg | --pf-c-toolbar__content--PaddingLeft | 1.5rem | ||
| .pf-c-toolbar.pf-m-inset-xl | --pf-c-toolbar--inset | 2rem | ||
| .pf-c-toolbar.pf-m-inset-xl | --pf-c-toolbar__content--PaddingRight | 2rem | ||
| .pf-c-toolbar.pf-m-inset-xl | --pf-c-toolbar__content--PaddingLeft | 2rem | ||
| .pf-c-toolbar.pf-m-inset-2xl | --pf-c-toolbar--inset | 3rem | ||
| .pf-c-toolbar.pf-m-inset-2xl | --pf-c-toolbar__content--PaddingRight | 3rem | ||
| .pf-c-toolbar.pf-m-inset-2xl | --pf-c-toolbar__content--PaddingLeft | 3rem | ||
| .pf-c-toolbar__content-section > :last-child | --pf-c-toolbar--spacer | 0 | ||
View source on GitHub
