@patternfly/patternfly 4.176.0 → 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/components/Dropdown/dropdown.css +10 -9
- package/components/Dropdown/dropdown.scss +17 -16
- package/components/Label/label.css +43 -12
- package/components/Label/label.scss +45 -13
- package/components/Nav/nav.css +11 -0
- package/components/Nav/nav.scss +14 -0
- 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/Label/examples/Label.md +33 -67
- package/docs/components/LabelGroup/examples/LabelGroup.md +64 -107
- 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 +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 +1 -2
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -202
- package/docs/demos/Card/examples/Card.md +42 -36
- 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 +15623 -12413
- package/docs/demos/Tabs/examples/Tabs.md +0 -96
- 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 +296 -21
- package/patternfly.css +296 -21
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -122,7 +122,9 @@
|
|
|
122
122
|
|
|
123
123
|
// Content
|
|
124
124
|
--pf-c-label__content--Color: var(--pf-global--Color--100);
|
|
125
|
+
--pf-c-label__content--MaxWidth: 100%;
|
|
125
126
|
--pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
|
|
127
|
+
--pf-c-label--m-editable__content--MaxWidth: 16ch;
|
|
126
128
|
|
|
127
129
|
// text
|
|
128
130
|
--pf-c-label__text--MaxWidth: 16ch;
|
|
@@ -143,8 +145,6 @@
|
|
|
143
145
|
--pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
|
|
144
146
|
|
|
145
147
|
// Editable
|
|
146
|
-
--pf-c-label__editable-text--MaxWidth: 16ch;
|
|
147
|
-
--pf-c-label__editable-text--BorderWidth: 0;
|
|
148
148
|
--pf-c-label--m-editable--Cursor: pointer;
|
|
149
149
|
--pf-c-label--m-editable--TextDecoration: underline;
|
|
150
150
|
--pf-c-label--m-editable--TextDecorationStyle: dashed;
|
|
@@ -153,7 +153,12 @@
|
|
|
153
153
|
--pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
|
|
154
154
|
--pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
|
|
155
155
|
--pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
|
|
156
|
-
|
|
156
|
+
--pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
157
|
+
--pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
|
|
158
|
+
--pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
159
|
+
--pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
|
|
160
|
+
--pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
161
|
+
--pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
|
|
157
162
|
|
|
158
163
|
// Editable active
|
|
159
164
|
--pf-c-label--m-editable--m-editable-active--Cursor: auto;
|
|
@@ -191,6 +196,9 @@
|
|
|
191
196
|
--pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
|
|
192
197
|
--pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
|
|
193
198
|
--pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
|
|
199
|
+
--pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
|
|
200
|
+
--pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
|
|
201
|
+
--pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
|
|
194
202
|
}
|
|
195
203
|
|
|
196
204
|
&.pf-m-green {
|
|
@@ -204,6 +212,9 @@
|
|
|
204
212
|
--pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
|
|
205
213
|
--pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
|
|
206
214
|
--pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
|
|
215
|
+
--pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
|
|
216
|
+
--pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
|
|
217
|
+
--pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
|
|
207
218
|
}
|
|
208
219
|
|
|
209
220
|
&.pf-m-orange {
|
|
@@ -217,6 +228,9 @@
|
|
|
217
228
|
--pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
|
|
218
229
|
--pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
|
|
219
230
|
--pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
|
|
231
|
+
--pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
|
|
232
|
+
--pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
|
|
233
|
+
--pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
|
|
220
234
|
}
|
|
221
235
|
|
|
222
236
|
&.pf-m-red {
|
|
@@ -230,6 +244,9 @@
|
|
|
230
244
|
--pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
|
|
231
245
|
--pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
|
|
232
246
|
--pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
|
|
247
|
+
--pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
|
|
248
|
+
--pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
|
|
249
|
+
--pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
|
|
233
250
|
}
|
|
234
251
|
|
|
235
252
|
&.pf-m-purple {
|
|
@@ -243,6 +260,9 @@
|
|
|
243
260
|
--pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
|
|
244
261
|
--pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
|
|
245
262
|
--pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
|
|
263
|
+
--pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
|
|
264
|
+
--pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
|
|
265
|
+
--pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
|
|
246
266
|
}
|
|
247
267
|
|
|
248
268
|
&.pf-m-cyan {
|
|
@@ -256,6 +276,9 @@
|
|
|
256
276
|
--pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
|
|
257
277
|
--pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
|
|
258
278
|
--pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
|
|
279
|
+
--pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
|
|
280
|
+
--pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
|
|
281
|
+
--pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
|
|
259
282
|
}
|
|
260
283
|
|
|
261
284
|
&.pf-m-outline {
|
|
@@ -263,6 +286,9 @@
|
|
|
263
286
|
--pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
|
|
264
287
|
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
|
|
265
288
|
--pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
|
|
289
|
+
--pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
|
|
290
|
+
--pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
|
|
291
|
+
--pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
|
|
266
292
|
|
|
267
293
|
// stylelint-disable selector-no-qualifying-type, max-nesting-depth
|
|
268
294
|
a,
|
|
@@ -292,6 +318,18 @@
|
|
|
292
318
|
text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
|
|
293
319
|
text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
|
|
294
320
|
|
|
321
|
+
--pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
|
|
322
|
+
--pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
|
|
323
|
+
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
|
|
324
|
+
--pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
|
|
325
|
+
--pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
|
|
326
|
+
--pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
|
|
327
|
+
--pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
|
|
328
|
+
|
|
329
|
+
// override the outline variant border width
|
|
330
|
+
--pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
|
|
331
|
+
--pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
|
|
332
|
+
|
|
295
333
|
&:hover {
|
|
296
334
|
--pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
|
|
297
335
|
}
|
|
@@ -305,21 +343,12 @@
|
|
|
305
343
|
--pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
|
|
306
344
|
--pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
|
|
307
345
|
--pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
|
|
308
|
-
--pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
|
|
309
|
-
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
|
|
310
346
|
|
|
311
347
|
.pf-c-button {
|
|
312
348
|
visibility: hidden; // use visibility hidden to retain positioning
|
|
313
349
|
}
|
|
314
350
|
}
|
|
315
351
|
|
|
316
|
-
.pf-c-label__editable-text {
|
|
317
|
-
@include pf-text-overflow;
|
|
318
|
-
|
|
319
|
-
max-width: var(--pf-c-label__editable-text--MaxWidth);
|
|
320
|
-
border-width: var(--pf-c-label__editable-text--BorderWidth);
|
|
321
|
-
}
|
|
322
|
-
|
|
323
352
|
.pf-c-button {
|
|
324
353
|
--pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
|
|
325
354
|
--pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
|
|
@@ -358,8 +387,11 @@
|
|
|
358
387
|
}
|
|
359
388
|
|
|
360
389
|
.pf-c-label__content {
|
|
390
|
+
@include pf-text-overflow;
|
|
391
|
+
|
|
392
|
+
max-width: var(--pf-c-label__content--MaxWidth);
|
|
361
393
|
color: var(--pf-c-label__content--Color);
|
|
362
|
-
border: 0;
|
|
394
|
+
border-width: 0;
|
|
363
395
|
|
|
364
396
|
&::before {
|
|
365
397
|
position: absolute;
|
package/components/Nav/nav.css
CHANGED
|
@@ -271,6 +271,8 @@
|
|
|
271
271
|
--pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
|
|
272
272
|
--pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
|
|
273
273
|
--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
|
|
274
|
+
--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth: var(--pf-global--BorderWidth--lg);
|
|
275
|
+
--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight: var(--pf-global--FontWeight--bold);
|
|
274
276
|
--pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
|
|
275
277
|
--pf-c-nav--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
|
|
276
278
|
--pf-c-nav--c-menu__item--PaddingBottom: var(--pf-global--spacer--md);
|
|
@@ -399,6 +401,15 @@
|
|
|
399
401
|
--pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
|
|
400
402
|
background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
|
|
401
403
|
}
|
|
404
|
+
.pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) {
|
|
405
|
+
--pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
|
|
406
|
+
}
|
|
407
|
+
.pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) > .pf-c-menu__item {
|
|
408
|
+
--pf-c-menu__item--FontWeight: var(--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
|
|
409
|
+
}
|
|
410
|
+
.pf-c-nav .pf-c-menu__item-toggle-icon {
|
|
411
|
+
margin-left: calc(var(--pf-c-menu__item-toggle-icon--PaddingLeft) * -1);
|
|
412
|
+
}
|
|
402
413
|
.pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
|
|
403
414
|
content: none;
|
|
404
415
|
}
|
package/components/Nav/nav.scss
CHANGED
|
@@ -329,6 +329,8 @@
|
|
|
329
329
|
--pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
|
|
330
330
|
--pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
|
|
331
331
|
--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
|
|
332
|
+
--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth: var(--pf-global--BorderWidth--lg);
|
|
333
|
+
--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight: var(--pf-global--FontWeight--bold);
|
|
332
334
|
|
|
333
335
|
// Menu item
|
|
334
336
|
--pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
|
|
@@ -489,6 +491,18 @@
|
|
|
489
491
|
}
|
|
490
492
|
}
|
|
491
493
|
|
|
494
|
+
.pf-c-menu__list-item:where(.pf-m-drill-up) {
|
|
495
|
+
--pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
|
|
496
|
+
|
|
497
|
+
> .pf-c-menu__item {
|
|
498
|
+
--pf-c-menu__item--FontWeight: var(--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.pf-c-menu__item-toggle-icon {
|
|
503
|
+
margin-left: calc(var(--pf-c-menu__item-toggle-icon--PaddingLeft) * -1);
|
|
504
|
+
}
|
|
505
|
+
|
|
492
506
|
&.pf-m-horizontal,
|
|
493
507
|
&.pf-m-tertiary {
|
|
494
508
|
.pf-c-nav__link::after {
|
|
@@ -39,6 +39,50 @@ cssPrefix: pf-c-avatar
|
|
|
39
39
|
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
+
### Small
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<img
|
|
46
|
+
class="pf-c-avatar pf-m-sm"
|
|
47
|
+
src="/assets/images/img_avatar-light.svg"
|
|
48
|
+
alt="Avatar image small"
|
|
49
|
+
/>
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Medium
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<img
|
|
57
|
+
class="pf-c-avatar pf-m-md"
|
|
58
|
+
src="/assets/images/img_avatar-light.svg"
|
|
59
|
+
alt="Avatar image medium"
|
|
60
|
+
/>
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Large
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<img
|
|
68
|
+
class="pf-c-avatar pf-m-lg"
|
|
69
|
+
src="/assets/images/img_avatar-light.svg"
|
|
70
|
+
alt="Avatar image large"
|
|
71
|
+
/>
|
|
72
|
+
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Extra large
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<img
|
|
79
|
+
class="pf-c-avatar pf-m-xl"
|
|
80
|
+
src="/assets/images/img_avatar-light.svg"
|
|
81
|
+
alt="Avatar image extra large"
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
|
|
42
86
|
## Documentation
|
|
43
87
|
|
|
44
88
|
### Overview
|
|
@@ -53,8 +97,12 @@ The avatar component provides a default SVG icon. If an image is used it should
|
|
|
53
97
|
|
|
54
98
|
### Usage
|
|
55
99
|
|
|
56
|
-
| Class
|
|
57
|
-
|
|
|
58
|
-
| `.pf-c-avatar`
|
|
59
|
-
| `.pf-m-light`
|
|
60
|
-
| `.pf-m-dark`
|
|
100
|
+
| Class | Applied to | Outcome |
|
|
101
|
+
| ---------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
102
|
+
| `.pf-c-avatar` | `<img>` | Initiates an avatar image. **Required** |
|
|
103
|
+
| `.pf-m-light` | `.pf-c-avatar` | Modifies an avatar for use against a light background. |
|
|
104
|
+
| `.pf-m-dark` | `.pf-c-avatar` | Modifies an avatar for use against a dark background. |
|
|
105
|
+
| `.pf-m-sm{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
106
|
+
| `.pf-m-md{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
|
|
107
|
+
| `.pf-m-lg{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
108
|
+
| `.pf-m-xl{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -56,9 +56,9 @@ Simple brand component.
|
|
|
56
56
|
|
|
57
57
|
### Usage
|
|
58
58
|
|
|
59
|
-
| Class | Applied to | Outcome
|
|
60
|
-
| -------------------------------------------------- | ------------------ |
|
|
61
|
-
| `.pf-c-brand` | `<img>, <picture>` | Initiates a brand image. **Required**
|
|
62
|
-
| `.pf-m-picture` | `.pf-c-brand` | Modifies a brand image to a picture.
|
|
63
|
-
| `--pf-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-c-brand` | Modifies the width value of a picture. |
|
|
64
|
-
| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand` | Modifies the height value of a picture. |
|
|
59
|
+
| Class | Applied to | Outcome |
|
|
60
|
+
| -------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
61
|
+
| `.pf-c-brand` | `<img>, <picture>` | Initiates a brand image. **Required** |
|
|
62
|
+
| `.pf-m-picture` | `.pf-c-brand` | Modifies a brand image to a picture. |
|
|
63
|
+
| `--pf-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-c-brand` | Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
64
|
+
| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand` | Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -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. |
|