@patternfly/patternfly 4.176.3 → 4.177.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/UPGRADE-GUIDE.md +3 -0
- package/components/Avatar/avatar.css +224 -0
- package/components/Avatar/avatar.scss +18 -0
- package/components/CodeEditor/code-editor.css +8 -0
- package/components/CodeEditor/code-editor.scss +11 -1
- package/docs/components/Avatar/examples/Avatar.md +53 -5
- package/docs/components/Brand/examples/Brand.md +6 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
- package/docs/components/DataList/examples/DataList.md +11 -11
- package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +27 -27
- package/docs/components/Dropdown/examples/Dropdown.md +2 -2
- package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
- package/docs/components/LogViewer/examples/LogViewer.md +19 -19
- package/docs/components/Masthead/examples/masthead.md +10 -10
- package/docs/components/Menu/examples/Menu.md +2 -2
- package/docs/components/Page/examples/Page.md +4 -4
- package/docs/components/Pagination/examples/Pagination.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.md +14 -14
- package/docs/components/Table/examples/Table.md +8 -8
- package/docs/components/Tabs/examples/Tabs.md +27 -27
- package/docs/components/Toolbar/examples/Toolbar.md +31 -31
- package/docs/demos/Alert/examples/Alert.md +358 -52
- package/docs/demos/BackToTop/examples/BackToTop.md +304 -5
- package/docs/demos/ContextSelector/examples/ContextSelector.md +2199 -45
- package/docs/demos/JumpLinks/examples/JumpLinks.md +1221 -80
- package/docs/demos/Nav/examples/Nav.md +293 -2
- package/docs/demos/Page/examples/Page.md +6098 -161
- package/docs/demos/Table/examples/Table.md +21223 -165
- package/docs/demos/Tabs/examples/Tabs.md +7304 -697
- package/docs/demos/Toolbar/examples/Toolbar.md +1026 -44
- package/docs/layouts/Flex/examples/Flex.md +1 -1
- package/docs/layouts/Gallery/examples/Gallery.md +2 -2
- package/docs/layouts/Grid/examples/Grid.md +9 -9
- package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
- package/docs/utilities/Alignment/examples/Alignment.md +1 -1
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
- package/docs/utilities/Display/examples/Display.md +1 -1
- package/docs/utilities/Flex/examples/Flex.md +1 -1
- package/docs/utilities/Float/examples/Float.md +1 -1
- package/docs/utilities/Sizing/examples/Sizing.md +12 -0
- package/docs/utilities/Spacing/examples/Spacing.md +1 -1
- package/docs/utilities/Text/examples/Text.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +232 -0
- package/patternfly.css +232 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -89,5 +89,5 @@ The divider renders as an `<hr>` by default. It is possible to make the divider
|
|
|
89
89
|
| `.pf-c-divider` | `<hr>`, `<li>`, `<div>` | Defines the divider component. |
|
|
90
90
|
| `.pf-m-vertical` | `.pf-c-divider` | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
|
|
91
91
|
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-divider` | Modifies divider padding/inset to visually match padding of other adjacent components. |
|
|
92
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-divider` | Modifies a divider to be hidden, at optional breakpoint.
|
|
93
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-divider` | Modifies a divider to be shown, at optional breakpoint.
|
|
92
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
93
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -717,30 +717,30 @@ cssPrefix: pf-c-drawer
|
|
|
717
717
|
|
|
718
718
|
### Usage
|
|
719
719
|
|
|
720
|
-
| Class | Applied to | Outcome
|
|
721
|
-
| --------------------------------------------------------- | ----------------------------------------------------------------------- |
|
|
722
|
-
| `.pf-c-drawer` | `<div>` | Initiates the drawer container. **Required**
|
|
723
|
-
| `.pf-c-drawer__section` | `<div>` | Initiates a drawer section area. This element can be used above or below `.pf-c-drawer__main` for titles, toolbars, footers, etc.
|
|
724
|
-
| `.pf-c-drawer__main` | `<div>` | Initiates the drawer main area. **Required**
|
|
725
|
-
| `.pf-c-drawer__content` | `<div>` | Initiates the drawer content container. **Required**
|
|
726
|
-
| `.pf-c-drawer__panel` | `<aside>` | Initiates the drawer panel container. **Required**
|
|
727
|
-
| `.pf-c-drawer__panel-main` | `<div>` | Initiates the drawer panel main container for resizable drawers only.
|
|
728
|
-
| `.pf-c-drawer__body` | `<div>` | Initiates a drawer body container and is the child of `.pf-c-drawer__content`, `.pf-c-drawer__panel` and `.pf-c-drawer__panel-main`. **Required**
|
|
729
|
-
| `.pf-c-drawer__head` | `<div>` | Initiates a drawer head container. This container positions `.pf-c-drawer__actions`, if present.
|
|
730
|
-
| `.pf-c-drawer__actions` | `<div>` | Identifies the drawer close button.
|
|
731
|
-
| `.pf-c-drawer__close` | `<div>` | Identifies the drawer close button.
|
|
732
|
-
| `.pf-m-panel-left` | `.pf-c-drawer` | Modifies the drawer panel to expand from the left.
|
|
733
|
-
| `.pf-m-panel-bottom` | `.pf-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height.
|
|
734
|
-
| `.pf-m-expanded` | `.pf-c-drawer` | Modifies the drawer panel for the expanded state.
|
|
735
|
-
| `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-c-drawer` | Modifies the drawer panel state to always show both content and panel.
|
|
736
|
-
| `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a breakpoint will default to the `md` breakpoint.
|
|
737
|
-
| `.pf-m-no-border` | `.pf-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment.
|
|
738
|
-
| `.pf-m-padding` | `.pf-c-drawer__body` | Modifies the element to add padding.
|
|
739
|
-
| `.pf-m-no-padding` | `.pf-c-drawer__body` | Modifies the element to remove padding.
|
|
740
|
-
| `.pf-m-no-background` | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to transparent.
|
|
741
|
-
| `.pf-m-light-200` | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to light grey.
|
|
742
|
-
| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-drawer__panel` | Modifies the drawer panel width.
|
|
743
|
-
| `.pf-m-resizable` | `.pf-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-c-drawer__splitter` element.
|
|
744
|
-
| `--pf-c-drawer__panel--md--FlexBasis--min` | `.pf-c-drawer__panel` | Defines the drawer panel minimum size.
|
|
745
|
-
| `--pf-c-drawer__panel--md--FlexBasis` | `.pf-c-drawer__panel` | Defines the drawer panel size.
|
|
746
|
-
| `--pf-c-drawer__panel--md--FlexBasis--max` | `.pf-c-drawer__panel` | Defines the drawer panel maximum size.
|
|
720
|
+
| Class | Applied to | Outcome |
|
|
721
|
+
| --------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
722
|
+
| `.pf-c-drawer` | `<div>` | Initiates the drawer container. **Required** |
|
|
723
|
+
| `.pf-c-drawer__section` | `<div>` | Initiates a drawer section area. This element can be used above or below `.pf-c-drawer__main` for titles, toolbars, footers, etc. |
|
|
724
|
+
| `.pf-c-drawer__main` | `<div>` | Initiates the drawer main area. **Required** |
|
|
725
|
+
| `.pf-c-drawer__content` | `<div>` | Initiates the drawer content container. **Required** |
|
|
726
|
+
| `.pf-c-drawer__panel` | `<aside>` | Initiates the drawer panel container. **Required** |
|
|
727
|
+
| `.pf-c-drawer__panel-main` | `<div>` | Initiates the drawer panel main container for resizable drawers only. |
|
|
728
|
+
| `.pf-c-drawer__body` | `<div>` | Initiates a drawer body container and is the child of `.pf-c-drawer__content`, `.pf-c-drawer__panel` and `.pf-c-drawer__panel-main`. **Required** |
|
|
729
|
+
| `.pf-c-drawer__head` | `<div>` | Initiates a drawer head container. This container positions `.pf-c-drawer__actions`, if present. |
|
|
730
|
+
| `.pf-c-drawer__actions` | `<div>` | Identifies the drawer close button. |
|
|
731
|
+
| `.pf-c-drawer__close` | `<div>` | Identifies the drawer close button. |
|
|
732
|
+
| `.pf-m-panel-left` | `.pf-c-drawer` | Modifies the drawer panel to expand from the left. |
|
|
733
|
+
| `.pf-m-panel-bottom` | `.pf-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
|
|
734
|
+
| `.pf-m-expanded` | `.pf-c-drawer` | Modifies the drawer panel for the expanded state. |
|
|
735
|
+
| `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
736
|
+
| `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) will default to the `md` breakpoint. |
|
|
737
|
+
| `.pf-m-no-border` | `.pf-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
|
|
738
|
+
| `.pf-m-padding` | `.pf-c-drawer__body` | Modifies the element to add padding. |
|
|
739
|
+
| `.pf-m-no-padding` | `.pf-c-drawer__body` | Modifies the element to remove padding. |
|
|
740
|
+
| `.pf-m-no-background` | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to transparent. |
|
|
741
|
+
| `.pf-m-light-200` | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to light grey. |
|
|
742
|
+
| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
743
|
+
| `.pf-m-resizable` | `.pf-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-c-drawer__splitter` element. |
|
|
744
|
+
| `--pf-c-drawer__panel--md--FlexBasis--min` | `.pf-c-drawer__panel` | Defines the drawer panel minimum size. |
|
|
745
|
+
| `--pf-c-drawer__panel--md--FlexBasis` | `.pf-c-drawer__panel` | Defines the drawer panel size. |
|
|
746
|
+
| `--pf-c-drawer__panel--md--FlexBasis--max` | `.pf-c-drawer__panel` | Defines the drawer panel maximum size. |
|
|
@@ -1926,8 +1926,8 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
1926
1926
|
| `.pf-c-dropdown__group-title` | `<h1>` | Defines the title for a group of items in the dropdown menu. |
|
|
1927
1927
|
| `.pf-m-expanded` | `.pf-c-dropdown` | Modifies for the expanded state. |
|
|
1928
1928
|
| `.pf-m-top` | `.pf-c-dropdown` | Modifies to display the menu above the toggle. |
|
|
1929
|
-
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-dropdown__menu` | Modifies to display the menu aligned to the left edge of the toggle.
|
|
1930
|
-
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-dropdown__menu` | Modifies to display the menu aligned to the right edge of the toggle.
|
|
1929
|
+
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-dropdown__menu` | Modifies to display the menu aligned to the left edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1930
|
+
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-dropdown__menu` | Modifies to display the menu aligned to the right edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1931
1931
|
| `.pf-m-split-button` | `.pf-c-dropdown__toggle` | Modifies the dropdown toggle area to allow for interactive elements. |
|
|
1932
1932
|
| `.pf-m-action` | `.pf-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown. |
|
|
1933
1933
|
| `.pf-m-text` | `.pf-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
|
|
@@ -508,22 +508,22 @@ cssPrefix: pf-c-jump-links
|
|
|
508
508
|
|
|
509
509
|
### Usage
|
|
510
510
|
|
|
511
|
-
| Class | Applied to | Outcome
|
|
512
|
-
| ---------------------------------------- | ------------------------ |
|
|
513
|
-
| `.pf-c-jump-links` | `<div>` | Initiates the jump links container.
|
|
514
|
-
| `.pf-c-jump-links__header` | `<div>` | Initiates the jump links header.
|
|
515
|
-
| `.pf-c-jump-links__toggle` | `<div>` | Initiates the jump links expandable toggle.
|
|
516
|
-
| `.pf-c-jump-links__toggle-text` | `<span>` | Initiates the jump links expandable toggle text.
|
|
517
|
-
| `.pf-c-jump-links__toggle-icon` | `<span>` | Initiates the jump links expandable toggle icon.
|
|
518
|
-
| `.pf-c-jump-links__label` | `<div>` | Initiates the jump links label.
|
|
519
|
-
| `.pf-c-jump-links__main` | `<div>` | Initiates the jump links main container for when a label and list is used in the horizontal variation.
|
|
520
|
-
| `.pf-c-jump-links__list` | `<ul>` | Initiates the jump links list.
|
|
521
|
-
| `.pf-c-jump-links__item` | `<li>` | Initiates the jump links list item.
|
|
522
|
-
| `.pf-c-jump-links__link` | `<button>` | Initiates the jump links link.
|
|
523
|
-
| `.pf-c-jump-links__link-text` | `<div>` | Initiates the jump links link text.
|
|
524
|
-
| `.pf-m-vertical` | `.pf-c-jump-links` | Modifies the jump links component to be vertical.
|
|
525
|
-
| `.pf-m-center` | `.pf-c-jump-links` | Modifies the jump links component to center its list and label.
|
|
526
|
-
| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be expandable via a toggle. **Note:** works with vertical jump links only. |
|
|
527
|
-
| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be non-expandable. |
|
|
528
|
-
| `.pf-m-expanded` | `.pf-c-jump-links` | Modifies the expandable jump links component for the expanded state.
|
|
529
|
-
| `.pf-m-current` | `.pf-c-jump-links__item` | Modifies the jump links item to be current.
|
|
511
|
+
| Class | Applied to | Outcome |
|
|
512
|
+
| ---------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
513
|
+
| `.pf-c-jump-links` | `<div>` | Initiates the jump links container. |
|
|
514
|
+
| `.pf-c-jump-links__header` | `<div>` | Initiates the jump links header. |
|
|
515
|
+
| `.pf-c-jump-links__toggle` | `<div>` | Initiates the jump links expandable toggle. |
|
|
516
|
+
| `.pf-c-jump-links__toggle-text` | `<span>` | Initiates the jump links expandable toggle text. |
|
|
517
|
+
| `.pf-c-jump-links__toggle-icon` | `<span>` | Initiates the jump links expandable toggle icon. |
|
|
518
|
+
| `.pf-c-jump-links__label` | `<div>` | Initiates the jump links label. |
|
|
519
|
+
| `.pf-c-jump-links__main` | `<div>` | Initiates the jump links main container for when a label and list is used in the horizontal variation. |
|
|
520
|
+
| `.pf-c-jump-links__list` | `<ul>` | Initiates the jump links list. |
|
|
521
|
+
| `.pf-c-jump-links__item` | `<li>` | Initiates the jump links list item. |
|
|
522
|
+
| `.pf-c-jump-links__link` | `<button>` | Initiates the jump links link. |
|
|
523
|
+
| `.pf-c-jump-links__link-text` | `<div>` | Initiates the jump links link text. |
|
|
524
|
+
| `.pf-m-vertical` | `.pf-c-jump-links` | Modifies the jump links component to be vertical. |
|
|
525
|
+
| `.pf-m-center` | `.pf-c-jump-links` | Modifies the jump links component to center its list and label. |
|
|
526
|
+
| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
|
|
527
|
+
| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
528
|
+
| `.pf-m-expanded` | `.pf-c-jump-links` | Modifies the expandable jump links component for the expanded state. |
|
|
529
|
+
| `.pf-m-current` | `.pf-c-jump-links__item` | Modifies the jump links item to be current. |
|
|
@@ -4775,22 +4775,22 @@ cssPrefix: pf-c-log-viewer
|
|
|
4775
4775
|
|
|
4776
4776
|
### Usage
|
|
4777
4777
|
|
|
4778
|
-
| Class | Applied to | Outcome
|
|
4779
|
-
| ---------------------------------------------------------- | -------------------------- |
|
|
4780
|
-
| `.pf-c-log-viewer` | `<div>` | Initiates a log viewer. **Required**
|
|
4781
|
-
| `.pf-c-log-viewer__header` | `<div>` | Initiates the header container for a log viewer. **Required**
|
|
4782
|
-
| `.pf-c-log-viewer__main` | `<div>` | Initiates the main container for a log viewer. **Required**
|
|
4783
|
-
| `.pf-c-log-viewer__scroll-container` | `<div>` | Initiates the scroll container for a log viewer. **Required**
|
|
4784
|
-
| `.pf-c-log-viewer__list` | `<ul>` | Initiates the log viewer list. **Required**
|
|
4785
|
-
| `.pf-c-log-viewer__list-item` | `<li>` | Initiates a log viewer list item. **Required**
|
|
4786
|
-
| `.pf-c-log-viewer__index` | `<span>` | Initiates a log viewer index element. **Required for numbered list**
|
|
4787
|
-
| `.pf-c-log-viewer__text` | `<div>` | Initiates a log viewer text element. **Required**
|
|
4788
|
-
| `.pf-c-log-viewer__string` | `<span>` | Initiates a log viewer string element.
|
|
4789
|
-
| `.pf-c-log-viewer__timestamp` | `<div>` | Initiates a log viewer text element. **Required**
|
|
4790
|
-
| `.pf-m-wrap-text` | `.pf-c-log-viewer` | Modifies the log viewer text to wrap.
|
|
4791
|
-
| `.pf-m-nowrap` | `.pf-c-log-viewer` | Modifies the log viewer text to not wrap.
|
|
4792
|
-
| `.pf-m-line-numbers` | `.pf-c-log-viewer` | Modifies the log viewer to display line numbers.
|
|
4793
|
-
| `.pf-m-dark` | `.pf-c-log-viewer` | Modifies the log viewer content for dark theme.
|
|
4794
|
-
| `.pf-m-match` | `.pf-c-log-viewer__string` | Indicates a string is a search result.
|
|
4795
|
-
| `.pf-m-current` | `.pf-c-log-viewer__string` | Indicates a string is the current search result.
|
|
4796
|
-
| `--pf-c-log-viewer--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-c-log-viewer` | Modifies the height value of a log viewer.
|
|
4778
|
+
| Class | Applied to | Outcome |
|
|
4779
|
+
| ---------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
4780
|
+
| `.pf-c-log-viewer` | `<div>` | Initiates a log viewer. **Required** |
|
|
4781
|
+
| `.pf-c-log-viewer__header` | `<div>` | Initiates the header container for a log viewer. **Required** |
|
|
4782
|
+
| `.pf-c-log-viewer__main` | `<div>` | Initiates the main container for a log viewer. **Required** |
|
|
4783
|
+
| `.pf-c-log-viewer__scroll-container` | `<div>` | Initiates the scroll container for a log viewer. **Required** |
|
|
4784
|
+
| `.pf-c-log-viewer__list` | `<ul>` | Initiates the log viewer list. **Required** |
|
|
4785
|
+
| `.pf-c-log-viewer__list-item` | `<li>` | Initiates a log viewer list item. **Required** |
|
|
4786
|
+
| `.pf-c-log-viewer__index` | `<span>` | Initiates a log viewer index element. **Required for numbered list** |
|
|
4787
|
+
| `.pf-c-log-viewer__text` | `<div>` | Initiates a log viewer text element. **Required** |
|
|
4788
|
+
| `.pf-c-log-viewer__string` | `<span>` | Initiates a log viewer string element. |
|
|
4789
|
+
| `.pf-c-log-viewer__timestamp` | `<div>` | Initiates a log viewer text element. **Required** |
|
|
4790
|
+
| `.pf-m-wrap-text` | `.pf-c-log-viewer` | Modifies the log viewer text to wrap. |
|
|
4791
|
+
| `.pf-m-nowrap` | `.pf-c-log-viewer` | Modifies the log viewer text to not wrap. |
|
|
4792
|
+
| `.pf-m-line-numbers` | `.pf-c-log-viewer` | Modifies the log viewer to display line numbers. |
|
|
4793
|
+
| `.pf-m-dark` | `.pf-c-log-viewer` | Modifies the log viewer content for dark theme. |
|
|
4794
|
+
| `.pf-m-match` | `.pf-c-log-viewer__string` | Indicates a string is a search result. |
|
|
4795
|
+
| `.pf-m-current` | `.pf-c-log-viewer__string` | Indicates a string is the current search result. |
|
|
4796
|
+
| `--pf-c-log-viewer--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-c-log-viewer` | Modifies the height value of a log viewer at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -202,13 +202,13 @@ cssPrefix: pf-c-masthead
|
|
|
202
202
|
|
|
203
203
|
### Usage
|
|
204
204
|
|
|
205
|
-
| Class | Applied to | Outcome
|
|
206
|
-
| ----------------------------------------------------------- | ---------------- |
|
|
207
|
-
| `.pf-c-masthead` | `<header>` | Initiates the masthead component. **Required**
|
|
208
|
-
| `.pf-c-masthead__main` | `<div>` | Initiates the masthead main component. **Required**
|
|
209
|
-
| `.pf-c-masthead__toggle` | `<span>` | Initiates the masthead toggle component.
|
|
210
|
-
| `.pf-c-masthead__brand` | `<a>, <div>` | Initiates the masthead content component.
|
|
211
|
-
| `.pf-c-masthead__content` | `<div>` | Initiates the masthead content component.
|
|
212
|
-
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-masthead` | Modifies masthead horizontal padding.
|
|
213
|
-
| `.pf-m-light` | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--100`.
|
|
214
|
-
| `.pf-m-light-200` | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--200`.
|
|
205
|
+
| Class | Applied to | Outcome |
|
|
206
|
+
| ----------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
207
|
+
| `.pf-c-masthead` | `<header>` | Initiates the masthead component. **Required** |
|
|
208
|
+
| `.pf-c-masthead__main` | `<div>` | Initiates the masthead main component. **Required** |
|
|
209
|
+
| `.pf-c-masthead__toggle` | `<span>` | Initiates the masthead toggle component. |
|
|
210
|
+
| `.pf-c-masthead__brand` | `<a>, <div>` | Initiates the masthead content component. |
|
|
211
|
+
| `.pf-c-masthead__content` | `<div>` | Initiates the masthead content component. |
|
|
212
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
213
|
+
| `.pf-m-light` | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--100`. |
|
|
214
|
+
| `.pf-m-light-200` | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--200`. |
|
|
@@ -5074,8 +5074,8 @@ cssPrefix: pf-c-menu
|
|
|
5074
5074
|
| `.pf-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
|
|
5075
5075
|
| `.pf-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
|
|
5076
5076
|
| `.pf-c-menu__footer` | `<div>` | Initiates the menu footer. |
|
|
5077
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be hidden, at optional breakpoint.
|
|
5078
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be shown, at optional breakpoint.
|
|
5077
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
5078
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
5079
5079
|
| `.pf-m-favorite` | `.pf-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
|
|
5080
5080
|
| `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
|
|
5081
5081
|
| `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected. |
|
|
@@ -205,12 +205,12 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
205
205
|
| `.pf-m-light` | `.pf-c-page__main-section` | Modifies a main page section to have a light theme. |
|
|
206
206
|
| `.pf-m-dark-200` | `.pf-c-page__main-section` | Modifies a main page section to have a dark theme and a dark transparent background. |
|
|
207
207
|
| `.pf-m-dark-100` | `.pf-c-page__main-section` | Modifies a main page section to have a dark theme and a darker transparent background. |
|
|
208
|
-
| `.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
|
|
209
|
-
| `.pf-m-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Modifies the main page section to add padding back in at
|
|
208
|
+
| `.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](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
209
|
+
| `.pf-m-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
|
|
210
210
|
| `.pf-m-fill` | `.pf-c-page__main-section` | Modifies a main page section to grow to fill the available vertical space. |
|
|
211
211
|
| `.pf-m-no-fill` | `.pf-c-page__main-section` | Modifies a main page section to not grow to fill the available vertical space. |
|
|
212
|
-
| `.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
|
|
213
|
-
| `.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
|
|
212
|
+
| `.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](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
|
|
213
|
+
| `.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](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
214
214
|
| `.pf-m-limit-width` | `.pf-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
|
|
215
215
|
| `.pf-m-align-center` | `.pf-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
|
|
216
216
|
| `.pf-m-sticky-top` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the top of its container. |
|
|
@@ -1213,8 +1213,8 @@ Note: `<button>` or `<a>` elements can be used in `.pf-c-pagination__nav-page-se
|
|
|
1213
1213
|
| `.pf-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
|
|
1214
1214
|
| `.pf-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
|
|
1215
1215
|
| `.pf-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |
|
|
1216
|
-
| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles.
|
|
1217
|
-
| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles.
|
|
1216
|
+
| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1217
|
+
| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1218
1218
|
| `.pf-m-bottom` | `.pf-c-pagination` | Modifies for bottom pagination component styles. |
|
|
1219
1219
|
| `.pf-m-compact` | `.pf-c-pagination` | Modifies for compact pagination component styles. |
|
|
1220
1220
|
| `.pf-m-static` | `.pf-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
|
|
@@ -179,17 +179,17 @@ cssPrefix: pf-c-sidebar
|
|
|
179
179
|
|
|
180
180
|
### Usage
|
|
181
181
|
|
|
182
|
-
| Class | Applied to | Outcome
|
|
183
|
-
| ------------------------------------------------------------------ | --------------------------------------------------------------- |
|
|
184
|
-
| `.pf-c-sidebar` | `<div>` | Initiates the sidebar component. **Required**
|
|
185
|
-
| `.pf-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required**
|
|
186
|
-
| `.pf-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required**
|
|
187
|
-
| `.pf-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required**
|
|
188
|
-
| `.pf-m-gutter` | `.pf-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content.
|
|
189
|
-
| `.pf-m-stack` | `.pf-c-sidebar` | Modifies the sidebar to stack the panel on top of the content.
|
|
190
|
-
| `.pf-m-split` | `.pf-c-sidebar` | Modifies the sidebar to position the panel and content side by side.
|
|
191
|
-
| `.pf-m-panel-right` | `.pf-c-sidebar` | Modifies the sidebar to place the panel to the right of the content.
|
|
192
|
-
| `.pf-m-sticky` | `.pf-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout.
|
|
193
|
-
| `.pf-m-static` | `.pf-c-sidebar__panel` | Modifies the panel to be positioned statically.
|
|
194
|
-
| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-sidebar__panel` | Modifies the panel width. **Note:** does not apply when the panel is stacked on top of the content. |
|
|
195
|
-
| `.pf-m-no-background` | `.pf-c-sidebar`, `.pf-c-sidebar__panel, .pf-c-sidebar__content` | Modifies the element to have a transparent background.
|
|
182
|
+
| Class | Applied to | Outcome |
|
|
183
|
+
| ------------------------------------------------------------------ | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
184
|
+
| `.pf-c-sidebar` | `<div>` | Initiates the sidebar component. **Required** |
|
|
185
|
+
| `.pf-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required** |
|
|
186
|
+
| `.pf-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required** |
|
|
187
|
+
| `.pf-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required** |
|
|
188
|
+
| `.pf-m-gutter` | `.pf-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content. |
|
|
189
|
+
| `.pf-m-stack` | `.pf-c-sidebar` | Modifies the sidebar to stack the panel on top of the content. |
|
|
190
|
+
| `.pf-m-split` | `.pf-c-sidebar` | Modifies the sidebar to position the panel and content side by side. |
|
|
191
|
+
| `.pf-m-panel-right` | `.pf-c-sidebar` | Modifies the sidebar to place the panel to the right of the content. |
|
|
192
|
+
| `.pf-m-sticky` | `.pf-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout. |
|
|
193
|
+
| `.pf-m-static` | `.pf-c-sidebar__panel` | Modifies the panel to be positioned statically. |
|
|
194
|
+
| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** does not apply when the panel is stacked on top of the content. |
|
|
195
|
+
| `.pf-m-no-background` | `.pf-c-sidebar`, `.pf-c-sidebar__panel, .pf-c-sidebar__content` | Modifies the element to have a transparent background. |
|
|
@@ -87,10 +87,10 @@ cssPrefix: pf-c-table
|
|
|
87
87
|
|
|
88
88
|
These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.
|
|
89
89
|
|
|
90
|
-
| Class | Applied to | Outcome
|
|
91
|
-
| ------------------------------------------------------------------- | ------------- |
|
|
92
|
-
| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at
|
|
93
|
-
| `.pf-m-grid` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value.
|
|
90
|
+
| Class | Applied to | Outcome |
|
|
91
|
+
| ------------------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
92
|
+
| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
93
|
+
| `.pf-m-grid` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
|
|
94
94
|
|
|
95
95
|
## Sortable
|
|
96
96
|
|
|
@@ -19545,10 +19545,10 @@ Width modifiers control the width of the columns. To control the responsive beha
|
|
|
19545
19545
|
|
|
19546
19546
|
### Hidden/visible breakpoint modifiers usage
|
|
19547
19547
|
|
|
19548
|
-
| Class | Applied to | Outcome
|
|
19549
|
-
| --------------------------------- | -------------------- |
|
|
19550
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-table tr > *` | Hides a table cell at
|
|
19551
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-table tr > *` | Shows a table cell at
|
|
19548
|
+
| Class | Applied to | Outcome |
|
|
19549
|
+
| --------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19550
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-table tr > *` | Hides a table cell at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. **Note: Needs to apply to all cells in the column you want to hide.** |
|
|
19551
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-table tr > *` | Shows a table cell at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
19552
19552
|
|
|
19553
19553
|
## Text control modifiers
|
|
19554
19554
|
|
|
@@ -1895,30 +1895,30 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
|
|
|
1895
1895
|
|
|
1896
1896
|
### Usage
|
|
1897
1897
|
|
|
1898
|
-
| Class | Applied to | Outcome
|
|
1899
|
-
| ---------------------------------------------------------------- | ------------------- |
|
|
1900
|
-
| `.pf-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required**
|
|
1901
|
-
| `.pf-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required**
|
|
1902
|
-
| `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required**
|
|
1903
|
-
| `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required**
|
|
1904
|
-
| `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required**
|
|
1905
|
-
| `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required**
|
|
1906
|
-
| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button.
|
|
1907
|
-
| `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle.
|
|
1908
|
-
| `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button.
|
|
1909
|
-
| `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon.
|
|
1910
|
-
| `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text.
|
|
1911
|
-
| `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component.
|
|
1912
|
-
| `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component.
|
|
1913
|
-
| `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component.
|
|
1914
|
-
| `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component.
|
|
1915
|
-
| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space.
|
|
1916
|
-
| `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected.
|
|
1917
|
-
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components.
|
|
1918
|
-
| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements.
|
|
1919
|
-
| `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors.
|
|
1920
|
-
| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle. **Note:** works with vertical tabs only. |
|
|
1921
|
-
| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be non-expandable. |
|
|
1922
|
-
| `.pf-m-expanded` | `.pf-c-tabs` | Modifies the expandable tabs component for the expanded state.
|
|
1923
|
-
| `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles.
|
|
1924
|
-
| `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable.
|
|
1898
|
+
| Class | Applied to | Outcome |
|
|
1899
|
+
| ---------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1900
|
+
| `.pf-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required** |
|
|
1901
|
+
| `.pf-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required** |
|
|
1902
|
+
| `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required** |
|
|
1903
|
+
| `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required** |
|
|
1904
|
+
| `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required** |
|
|
1905
|
+
| `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
|
|
1906
|
+
| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
|
|
1907
|
+
| `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
|
|
1908
|
+
| `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
|
|
1909
|
+
| `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
|
|
1910
|
+
| `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
|
|
1911
|
+
| `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component. |
|
|
1912
|
+
| `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component. |
|
|
1913
|
+
| `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component. |
|
|
1914
|
+
| `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component. |
|
|
1915
|
+
| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
|
|
1916
|
+
| `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
|
|
1917
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
|
|
1918
|
+
| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
|
|
1919
|
+
| `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
|
|
1920
|
+
| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
|
|
1921
|
+
| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1922
|
+
| `.pf-m-expanded` | `.pf-c-tabs` | Modifies the expandable tabs component for the expanded state. |
|
|
1923
|
+
| `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
|
|
1924
|
+
| `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
|