@patternfly/patternfly 4.176.2 → 4.178.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/components/Dropdown/dropdown.css +10 -9
- package/components/Dropdown/dropdown.scss +17 -16
- package/components/Nav/nav.css +3 -0
- package/components/Nav/nav.scss +4 -0
- package/components/Table/table.css +2 -1
- package/components/Table/table.scss +8 -5
- 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/Nav/examples/Navigation.css +3 -1
- package/docs/components/Nav/examples/Navigation.md +79 -0
- 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 +20 -9
- 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 +4 -5
- package/docs/demos/BackToTop/examples/BackToTop.md +2 -203
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/Card/examples/Card.md +42 -14
- package/docs/demos/CardView/examples/CardView.md +1 -1
- package/docs/demos/ContextSelector/examples/ContextSelector.md +32 -869
- package/docs/demos/DataList/examples/DataList.md +4 -4
- package/docs/demos/Drawer/examples/Drawer.md +6 -6
- package/docs/demos/JumpLinks/examples/JumpLinks.md +8 -12
- package/docs/demos/Masthead/examples/Masthead.md +1645 -1028
- package/docs/demos/Nav/examples/Nav.md +16 -17
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +10 -10
- package/docs/demos/Page/examples/Page.md +4956 -989
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
- package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
- package/docs/demos/Table/examples/Table.md +18950 -12842
- package/docs/demos/Tabs/examples/Tabs.md +8 -102
- package/docs/demos/Toolbar/examples/Toolbar.md +2 -3
- package/docs/demos/Wizard/examples/Wizard.md +4 -4
- 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 +247 -10
- package/patternfly.css +247 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -33,6 +33,7 @@ cssPrefix: pf-c-code-editor
|
|
|
33
33
|
<i class="fas fa-upload"></i>
|
|
34
34
|
</button>
|
|
35
35
|
</div>
|
|
36
|
+
<div class="pf-c-code-editor__header-main"></div>
|
|
36
37
|
<div class="pf-c-code-editor__tab">
|
|
37
38
|
<span class="pf-c-code-editor__tab-icon">
|
|
38
39
|
<i class="fas fa-code"></i>
|
|
@@ -80,6 +81,7 @@ cssPrefix: pf-c-code-editor
|
|
|
80
81
|
<i class="fas fa-upload"></i>
|
|
81
82
|
</button>
|
|
82
83
|
</div>
|
|
84
|
+
<div class="pf-c-code-editor__header-main"></div>
|
|
83
85
|
<div class="pf-c-code-editor__tab">
|
|
84
86
|
<span class="pf-c-code-editor__tab-icon">
|
|
85
87
|
<i class="fas fa-code"></i>
|
|
@@ -103,6 +105,7 @@ cssPrefix: pf-c-code-editor
|
|
|
103
105
|
```html
|
|
104
106
|
<div class="pf-c-code-editor">
|
|
105
107
|
<div class="pf-c-code-editor__header">
|
|
108
|
+
<div class="pf-c-code-editor__header-main"></div>
|
|
106
109
|
<div class="pf-c-code-editor__tab">
|
|
107
110
|
<span class="pf-c-code-editor__tab-icon">
|
|
108
111
|
<i class="fas fa-code"></i>
|
|
@@ -136,6 +139,7 @@ cssPrefix: pf-c-code-editor
|
|
|
136
139
|
```html
|
|
137
140
|
<div class="pf-c-code-editor">
|
|
138
141
|
<div class="pf-c-code-editor__header">
|
|
142
|
+
<div class="pf-c-code-editor__header-main"></div>
|
|
139
143
|
<div class="pf-c-code-editor__tab">
|
|
140
144
|
<span class="pf-c-code-editor__tab-icon">
|
|
141
145
|
<i class="fas fa-code"></i>
|
|
@@ -164,6 +168,61 @@ cssPrefix: pf-c-code-editor
|
|
|
164
168
|
|
|
165
169
|
```
|
|
166
170
|
|
|
171
|
+
### With optional header content and keyboard shortcuts
|
|
172
|
+
|
|
173
|
+
```html
|
|
174
|
+
<div class="pf-c-code-editor">
|
|
175
|
+
<div class="pf-c-code-editor__header">
|
|
176
|
+
<div class="pf-c-code-editor__controls">
|
|
177
|
+
<button
|
|
178
|
+
class="pf-c-button pf-m-control"
|
|
179
|
+
type="button"
|
|
180
|
+
aria-label="Copy to clipboard"
|
|
181
|
+
>
|
|
182
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
183
|
+
</button>
|
|
184
|
+
<button
|
|
185
|
+
class="pf-c-button pf-m-control"
|
|
186
|
+
type="button"
|
|
187
|
+
aria-label="Download code"
|
|
188
|
+
>
|
|
189
|
+
<i class="fas fa-download"></i>
|
|
190
|
+
</button>
|
|
191
|
+
<button
|
|
192
|
+
class="pf-c-button pf-m-control"
|
|
193
|
+
type="button"
|
|
194
|
+
aria-label="Upload code"
|
|
195
|
+
>
|
|
196
|
+
<i class="fas fa-upload"></i>
|
|
197
|
+
</button>
|
|
198
|
+
</div>
|
|
199
|
+
<div class="pf-c-code-editor__header-main">Header main content</div>
|
|
200
|
+
<div class="pf-c-code-editor__keyboard-shortcuts">
|
|
201
|
+
<button class="pf-c-button pf-m-link" type="button">
|
|
202
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
203
|
+
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
204
|
+
</span>
|
|
205
|
+
View shortcuts
|
|
206
|
+
</button>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="pf-c-code-editor__tab">
|
|
209
|
+
<span class="pf-c-code-editor__tab-icon">
|
|
210
|
+
<i class="fas fa-code"></i>
|
|
211
|
+
</span>
|
|
212
|
+
<span class="pf-c-code-editor__tab-text">HTML</span>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="pf-c-code-editor__main">
|
|
216
|
+
<code class="pf-c-code-editor__code">
|
|
217
|
+
<pre class="pf-c-code-editor__code-pre">
|
|
218
|
+
code goes here
|
|
219
|
+
</pre>
|
|
220
|
+
</code>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
```
|
|
225
|
+
|
|
167
226
|
## Documentation
|
|
168
227
|
|
|
169
228
|
### Overview
|
|
@@ -175,13 +234,15 @@ cssPrefix: pf-c-code-editor
|
|
|
175
234
|
|
|
176
235
|
### Usage
|
|
177
236
|
|
|
178
|
-
| Class
|
|
179
|
-
|
|
|
180
|
-
| `.pf-c-code-editor`
|
|
181
|
-
| `.pf-c-code-editor__header`
|
|
182
|
-
| `.pf-c-code-editor__main`
|
|
183
|
-
| `.pf-c-code-editor__code`
|
|
184
|
-
| `.pf-c-code-editor__controls`
|
|
185
|
-
| `.pf-c-code-
|
|
186
|
-
| `.pf-c-code-
|
|
187
|
-
| `.pf-c-code-editor__tab
|
|
237
|
+
| Class | Applied to | Outcome |
|
|
238
|
+
| --------------------------------------- | ---------- | ----------------------------------------------------------------------------------------- |
|
|
239
|
+
| `.pf-c-code-editor` | `<div>` | Initiates the code editor component. **Required** |
|
|
240
|
+
| `.pf-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. **Required** |
|
|
241
|
+
| `.pf-c-code-editor__main` | `<div>` | Initiates the main container for a code editor e.g. Monaco **Required** |
|
|
242
|
+
| `.pf-c-code-editor__code` | `<div>` | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
|
|
243
|
+
| `.pf-c-code-editor__controls` | `<div>` | Initiates the code editor controls. |
|
|
244
|
+
| `.pf-c-code-editor__header-main` | `<div>` | Initiates the code editor header content area. |
|
|
245
|
+
| `.pf-c-code-editor__keyboard-shortcuts` | `<div>` | Initiates the code editor header keyboard shortcuts area. |
|
|
246
|
+
| `.pf-c-code-editor__tab` | `<div>` | Initiates the code editor tab. |
|
|
247
|
+
| `.pf-c-code-editor__tab-text` | `<span>` | Initiates the code editor tab text. |
|
|
248
|
+
| `.pf-c-code-editor__tab-icon` | `<span>` | Initiates the code editor tab icon. |
|
|
@@ -372,14 +372,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
372
372
|
|
|
373
373
|
### Usage
|
|
374
374
|
|
|
375
|
-
| Class | Applied to | Outcome
|
|
376
|
-
| --------------------------------- | ------------------------------ |
|
|
377
|
-
| `.pf-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-c-data-list__check` here. **Required**
|
|
378
|
-
| `.pf-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-c-data-list__action` here. **Required**
|
|
379
|
-
| `.pf-c-data-list__check` | `<div>` | Initiates a data list check cell. **Required**
|
|
380
|
-
| `.pf-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required**
|
|
381
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Hides an actions container at
|
|
382
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Shows an actions container at
|
|
375
|
+
| Class | Applied to | Outcome |
|
|
376
|
+
| --------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
377
|
+
| `.pf-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-c-data-list__check` here. **Required** |
|
|
378
|
+
| `.pf-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-c-data-list__action` here. **Required** |
|
|
379
|
+
| `.pf-c-data-list__check` | `<div>` | Initiates a data list check cell. **Required** |
|
|
380
|
+
| `.pf-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** |
|
|
381
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. |
|
|
382
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
383
383
|
|
|
384
384
|
### Expandable
|
|
385
385
|
|
|
@@ -2622,6 +2622,6 @@ The DataList component provides a flexible alternative to the Table component, w
|
|
|
2622
2622
|
|
|
2623
2623
|
### Usage
|
|
2624
2624
|
|
|
2625
|
-
| Class | Applied to | Outcome
|
|
2626
|
-
| ------------------------------------------ | ----------------- |
|
|
2627
|
-
| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-c-data-list` | Modifies the data list to switch to a grid layout at a specified breakpoint. `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
|
|
2625
|
+
| Class | Applied to | Outcome |
|
|
2626
|
+
| ------------------------------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
2627
|
+
| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
|
|
@@ -1264,25 +1264,25 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1264
1264
|
|
|
1265
1265
|
### Usage
|
|
1266
1266
|
|
|
1267
|
-
| Class | Applied to | Outcome
|
|
1268
|
-
| ------------------------------------------------------------------------------- | ---------------------------------------- |
|
|
1269
|
-
| `.pf-c-description-list` | `<dl>` | Initiates the description list component. **Required**
|
|
1270
|
-
| `.pf-c-description-list__group` | `<div>` | Initiates a description list component group. **Required**
|
|
1271
|
-
| `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required**
|
|
1272
|
-
| `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required**
|
|
1273
|
-
| `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required**
|
|
1274
|
-
| `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element.
|
|
1275
|
-
| `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing.
|
|
1276
|
-
| `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid.
|
|
1277
|
-
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text.
|
|
1278
|
-
| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout.
|
|
1279
|
-
| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout.
|
|
1280
|
-
| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right.
|
|
1281
|
-
| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically.
|
|
1282
|
-
| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid.
|
|
1283
|
-
| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns.
|
|
1284
|
-
| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-c-description-list` | Modifies the min value of the `grid-template-columns` declaration.
|
|
1285
|
-
| `--pf-c-description-list__term--m-horizontal--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the value for `--pf-c-description-list--m-horizontal__term--width` declaration.
|
|
1267
|
+
| Class | Applied to | Outcome |
|
|
1268
|
+
| ------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1269
|
+
| `.pf-c-description-list` | `<dl>` | Initiates the description list component. **Required** |
|
|
1270
|
+
| `.pf-c-description-list__group` | `<div>` | Initiates a description list component group. **Required** |
|
|
1271
|
+
| `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
|
|
1272
|
+
| `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
|
|
1273
|
+
| `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
|
|
1274
|
+
| `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
|
|
1275
|
+
| `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
|
|
1276
|
+
| `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
|
|
1277
|
+
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
|
|
1278
|
+
| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
|
|
1279
|
+
| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
|
|
1280
|
+
| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
|
|
1281
|
+
| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
|
|
1282
|
+
| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
|
|
1283
|
+
| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
|
|
1284
|
+
| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1285
|
+
| `--pf-c-description-list__term--m-horizontal--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the value for `--pf-c-description-list--m-horizontal__term--width` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1286
1286
|
|
|
1287
1287
|
<!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element. |
|
|
1288
1288
|
| `.pf-m-order-first{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element to -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. |
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
#ws-core-c-navigation-basic,
|
|
3
3
|
#ws-core-c-navigation-grouped,
|
|
4
4
|
#ws-core-c-navigation-grouped-nav,
|
|
5
|
+
#ws-core-c-navigation-grouped-nav-no-titles,
|
|
5
6
|
#ws-core-c-navigation-expanded,
|
|
6
7
|
#ws-core-c-navigation-expanded-with-subnav-titles,
|
|
7
8
|
#ws-core-c-navigation-mixed,
|
|
@@ -13,7 +14,8 @@
|
|
|
13
14
|
#ws-core-c-navigation-nav-with-drilldown-menu .pf-c-nav,
|
|
14
15
|
#ws-core-c-navigation-level-2-drilldown,
|
|
15
16
|
#ws-core-c-navigation-level-3-drilldown,
|
|
16
|
-
#ws-core-c-navigation-nav-with-flyout .pf-c-nav
|
|
17
|
+
#ws-core-c-navigation-nav-with-flyout .pf-c-nav,
|
|
18
|
+
#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
|
|
17
19
|
padding: 0;
|
|
18
20
|
background-color: var(--pf-global--BackgroundColor--dark-300);
|
|
19
21
|
}
|