@patternfly/patternfly 4.176.1 → 4.177.1
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 +11 -0
- package/components/Nav/nav.scss +14 -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 +28 -28
- package/docs/components/Masthead/examples/masthead.md +10 -10
- package/docs/components/Menu/examples/Menu.md +45 -44
- package/docs/components/Nav/examples/Navigation.md +23 -44
- 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 +1 -2
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -202
- package/docs/demos/Card/examples/Card.md +42 -14
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1166 -17
- package/docs/demos/Drawer/examples/Drawer.md +3 -3
- package/docs/demos/JumpLinks/examples/JumpLinks.md +4 -8
- package/docs/demos/Masthead/examples/Masthead.md +14 -6
- package/docs/demos/Nav/examples/Nav.md +8 -9
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +4004 -989
- package/docs/demos/Table/examples/Table.md +16516 -12176
- package/docs/demos/Tabs/examples/Tabs.md +0 -94
- package/docs/demos/Toolbar/examples/Toolbar.md +1 -2
- package/docs/demos/Wizard/examples/Wizard.md +2 -2
- 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 +255 -10
- package/patternfly.css +255 -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. |
|
|
@@ -216,7 +216,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
216
216
|
<div class="pf-c-menu" hidden>
|
|
217
217
|
<div class="pf-c-menu__content">
|
|
218
218
|
<ul class="pf-c-menu__list">
|
|
219
|
-
<li class="pf-c-menu__list-item">
|
|
219
|
+
<li class="pf-c-menu__list-item pf-m-drill-up">
|
|
220
220
|
<button
|
|
221
221
|
class="pf-c-menu__item"
|
|
222
222
|
type="button"
|
|
@@ -724,7 +724,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
724
724
|
<div class="pf-c-menu" hidden>
|
|
725
725
|
<div class="pf-c-menu__content">
|
|
726
726
|
<ul class="pf-c-menu__list">
|
|
727
|
-
<li class="pf-c-menu__list-item">
|
|
727
|
+
<li class="pf-c-menu__list-item pf-m-drill-up">
|
|
728
728
|
<button
|
|
729
729
|
class="pf-c-menu__item"
|
|
730
730
|
type="button"
|
|
@@ -1232,7 +1232,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1232
1232
|
<div class="pf-c-menu" hidden>
|
|
1233
1233
|
<div class="pf-c-menu__content">
|
|
1234
1234
|
<ul class="pf-c-menu__list">
|
|
1235
|
-
<li class="pf-c-menu__list-item">
|
|
1235
|
+
<li class="pf-c-menu__list-item pf-m-drill-up">
|
|
1236
1236
|
<button
|
|
1237
1237
|
class="pf-c-menu__item"
|
|
1238
1238
|
type="button"
|
|
@@ -1740,7 +1740,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1740
1740
|
<div class="pf-c-menu" hidden>
|
|
1741
1741
|
<div class="pf-c-menu__content">
|
|
1742
1742
|
<ul class="pf-c-menu__list">
|
|
1743
|
-
<li class="pf-c-menu__list-item">
|
|
1743
|
+
<li class="pf-c-menu__list-item pf-m-drill-up">
|
|
1744
1744
|
<button
|
|
1745
1745
|
class="pf-c-menu__item"
|
|
1746
1746
|
type="button"
|
|
@@ -2280,7 +2280,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
2280
2280
|
<div class="pf-c-menu" hidden>
|
|
2281
2281
|
<div class="pf-c-menu__content">
|
|
2282
2282
|
<ul class="pf-c-menu__list">
|
|
2283
|
-
<li class="pf-c-menu__list-item">
|
|
2283
|
+
<li class="pf-c-menu__list-item pf-m-drill-up">
|
|
2284
2284
|
<button
|
|
2285
2285
|
class="pf-c-menu__item"
|
|
2286
2286
|
type="button"
|
|
@@ -2836,7 +2836,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
2836
2836
|
<div class="pf-c-menu" hidden>
|
|
2837
2837
|
<div class="pf-c-menu__content">
|
|
2838
2838
|
<ul class="pf-c-menu__list">
|
|
2839
|
-
<li class="pf-c-menu__list-item">
|
|
2839
|
+
<li class="pf-c-menu__list-item pf-m-drill-up">
|
|
2840
2840
|
<button
|
|
2841
2841
|
class="pf-c-menu__item"
|
|
2842
2842
|
type="button"
|
|
@@ -3343,7 +3343,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
3343
3343
|
<div class="pf-c-menu">
|
|
3344
3344
|
<div class="pf-c-menu__content">
|
|
3345
3345
|
<ul class="pf-c-menu__list">
|
|
3346
|
-
<li class="pf-c-menu__list-item">
|
|
3346
|
+
<li class="pf-c-menu__list-item pf-m-drill-up">
|
|
3347
3347
|
<button
|
|
3348
3348
|
class="pf-c-menu__item"
|
|
3349
3349
|
type="button"
|
|
@@ -3850,7 +3850,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
3850
3850
|
<div class="pf-c-menu" hidden>
|
|
3851
3851
|
<div class="pf-c-menu__content">
|
|
3852
3852
|
<ul class="pf-c-menu__list">
|
|
3853
|
-
<li class="pf-c-menu__list-item">
|
|
3853
|
+
<li class="pf-c-menu__list-item pf-m-drill-up">
|
|
3854
3854
|
<button
|
|
3855
3855
|
class="pf-c-menu__item"
|
|
3856
3856
|
type="button"
|
|
@@ -4412,7 +4412,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
4412
4412
|
<div class="pf-c-menu" hidden>
|
|
4413
4413
|
<div class="pf-c-menu__content">
|
|
4414
4414
|
<ul class="pf-c-menu__list">
|
|
4415
|
-
<li class="pf-c-menu__list-item">
|
|
4415
|
+
<li class="pf-c-menu__list-item pf-m-drill-up">
|
|
4416
4416
|
<button
|
|
4417
4417
|
class="pf-c-menu__item"
|
|
4418
4418
|
type="button"
|
|
@@ -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`. |
|