@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,7 +33,6 @@ section: components
|
|
|
33
33
|
/>
|
|
34
34
|
</a>
|
|
35
35
|
</div>
|
|
36
|
-
|
|
37
36
|
<div class="pf-c-page__header-tools">
|
|
38
37
|
<div class="pf-c-page__header-tools-group">
|
|
39
38
|
<div
|
|
@@ -559,7 +558,6 @@ section: components
|
|
|
559
558
|
/>
|
|
560
559
|
</a>
|
|
561
560
|
</div>
|
|
562
|
-
|
|
563
561
|
<div class="pf-c-page__header-tools">
|
|
564
562
|
<div class="pf-c-page__header-tools-group">
|
|
565
563
|
<div
|
|
@@ -1095,7 +1093,6 @@ section: components
|
|
|
1095
1093
|
/>
|
|
1096
1094
|
</a>
|
|
1097
1095
|
</div>
|
|
1098
|
-
|
|
1099
1096
|
<div class="pf-c-page__header-tools">
|
|
1100
1097
|
<div class="pf-c-page__header-tools-group">
|
|
1101
1098
|
<div
|
|
@@ -1483,7 +1480,6 @@ section: components
|
|
|
1483
1480
|
/>
|
|
1484
1481
|
</a>
|
|
1485
1482
|
</div>
|
|
1486
|
-
|
|
1487
1483
|
<div class="pf-c-page__header-tools">
|
|
1488
1484
|
<div class="pf-c-page__header-tools-group">
|
|
1489
1485
|
<div
|
|
@@ -3277,7 +3273,6 @@ section: components
|
|
|
3277
3273
|
/>
|
|
3278
3274
|
</a>
|
|
3279
3275
|
</div>
|
|
3280
|
-
|
|
3281
3276
|
<div class="pf-c-page__header-tools">
|
|
3282
3277
|
<div class="pf-c-page__header-tools-group">
|
|
3283
3278
|
<div
|
|
@@ -5199,7 +5194,6 @@ section: components
|
|
|
5199
5194
|
/>
|
|
5200
5195
|
</a>
|
|
5201
5196
|
</div>
|
|
5202
|
-
|
|
5203
5197
|
<div class="pf-c-page__header-tools">
|
|
5204
5198
|
<div class="pf-c-page__header-tools-group">
|
|
5205
5199
|
<div
|
|
@@ -6551,7 +6545,6 @@ section: components
|
|
|
6551
6545
|
/>
|
|
6552
6546
|
</a>
|
|
6553
6547
|
</div>
|
|
6554
|
-
|
|
6555
6548
|
<div class="pf-c-page__header-tools">
|
|
6556
6549
|
<div class="pf-c-page__header-tools-group">
|
|
6557
6550
|
<div
|
|
@@ -6965,7 +6958,6 @@ section: components
|
|
|
6965
6958
|
/>
|
|
6966
6959
|
</a>
|
|
6967
6960
|
</div>
|
|
6968
|
-
|
|
6969
6961
|
<div class="pf-c-page__header-tools">
|
|
6970
6962
|
<div class="pf-c-page__header-tools-group">
|
|
6971
6963
|
<div
|
|
@@ -7346,89 +7338,3 @@ section: components
|
|
|
7346
7338
|
</div>
|
|
7347
7339
|
|
|
7348
7340
|
```
|
|
7349
|
-
|
|
7350
|
-
<!-- ### Vertical tabs
|
|
7351
|
-
```hbs isFullscreen
|
|
7352
|
-
{{#> tabs--page-wrapper tabs--page-wrapper--id="vertical-tabs-example"}}
|
|
7353
|
-
{{> page-template-breadcrumb page-template-breadcrumbs--IsOS="true"}}
|
|
7354
|
-
{{#> page-main-section page-main-section--IsLimitWidth="true" page-main-section--modifier="pf-m-light"}}
|
|
7355
|
-
{{#> title title--modifier="pf-m-2xl pf-u-mt-md"}}
|
|
7356
|
-
Install OpenShift on AWS
|
|
7357
|
-
{{/title}}
|
|
7358
|
-
{{/page-main-section}}
|
|
7359
|
-
{{#> page-main-section page-main-section--IsLimitWidth="true" tabs--id=(concat tabs--page-wrapper--id '-tabs') tab-content--id=(concat tabs--page-wrapper--id '-tabs')}}
|
|
7360
|
-
{{#> card card--modifier="pf-m-full-height"}}
|
|
7361
|
-
{{#> sidebar}}
|
|
7362
|
-
{{#> sidebar-panel}}
|
|
7363
|
-
{{#> tabs tabs--modifier="pf-m-page-insets pf-m-vertical pf-m-box" }}
|
|
7364
|
-
{{#> tabs-list}}
|
|
7365
|
-
{{> __tabs-item
|
|
7366
|
-
__tabs-item--current="true"
|
|
7367
|
-
__tabs-item--id="installation"
|
|
7368
|
-
__tabs-item--aria-label="Installation"
|
|
7369
|
-
__tabs-item--text="Installation"
|
|
7370
|
-
__tabs-item--attribute=(concat 'aria-controls="' tabs--id '-installation-panel"')}}
|
|
7371
|
-
{{> __tabs-item
|
|
7372
|
-
__tabs-item--id="limits"
|
|
7373
|
-
__tabs-item--aria-label="Limits"
|
|
7374
|
-
__tabs-item--text="Limits"
|
|
7375
|
-
__tabs-item--attribute=(concat 'aria-controls="' tabs--id '-limits-panel"')}}
|
|
7376
|
-
{{> __tabs-item
|
|
7377
|
-
__tabs-item--id="cluster-installation"
|
|
7378
|
-
__tabs-item--aria-label="Cluster installation"
|
|
7379
|
-
__tabs-item--text="Cluster installation"
|
|
7380
|
-
__tabs-item--attribute=(concat 'aria-controls="' tabs--id '-cluster-installation-panel"')}}
|
|
7381
|
-
{{> __tabs-item
|
|
7382
|
-
__tabs-item--id="subscription-support"
|
|
7383
|
-
__tabs-item--aria-label="Subscription and support"
|
|
7384
|
-
__tabs-item--text="Subscription and support"
|
|
7385
|
-
__tabs-item--attribute=(concat 'aria-controls="' tabs--id '-subscription-support-panel"')}}
|
|
7386
|
-
{{/tabs-list}}
|
|
7387
|
-
{{/tabs}}
|
|
7388
|
-
{{/sidebar-panel}}
|
|
7389
|
-
{{#> sidebar-content}}
|
|
7390
|
-
{{#> tab-content tab-content--IsActive="true" tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-installation-link" id="' tab-content--id '-installation-panel"') tab-content-body--modifier="pf-m-padding"}}
|
|
7391
|
-
{{#> content}}
|
|
7392
|
-
<h2>Installation content</h2>
|
|
7393
|
-
<p>This document is a guide for preparing a new AWS account for use with OpenShift. It will help prepare an account to create a single cluster and provide insight for adjustments which may be needed for additional cluster.</p>
|
|
7394
|
-
<p>Follow along with these steps and the links below to configure your AWS account and provision on OpenShift cluster.</p>
|
|
7395
|
-
<ol>
|
|
7396
|
-
<li>
|
|
7397
|
-
<a href="#">
|
|
7398
|
-
Limits
|
|
7399
|
-
</a>
|
|
7400
|
-
</li>
|
|
7401
|
-
<li>
|
|
7402
|
-
<a href="#">
|
|
7403
|
-
Cluster installation
|
|
7404
|
-
</a>
|
|
7405
|
-
</li>
|
|
7406
|
-
<li>
|
|
7407
|
-
<a href="#">
|
|
7408
|
-
Subscription and support
|
|
7409
|
-
</a>
|
|
7410
|
-
</li>
|
|
7411
|
-
</ol>
|
|
7412
|
-
{{/content}}
|
|
7413
|
-
{{/tab-content}}
|
|
7414
|
-
{{#> tab-content tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-limits-link" id="' tab-content--id '-limits-panel"') tab-content-body--modifier="pf-m-padding"}}
|
|
7415
|
-
{{#> content}}
|
|
7416
|
-
<p>Limits content</p>
|
|
7417
|
-
{{/content}}
|
|
7418
|
-
{{/tab-content}}
|
|
7419
|
-
{{#> tab-content tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-cluster-installation-link" id="' tab-content--id '-cluster-installation-panel"') tab-content-body--modifier="pf-m-padding"}}
|
|
7420
|
-
{{#> content}}
|
|
7421
|
-
<p>Cluster installation content</p>
|
|
7422
|
-
{{/content}}
|
|
7423
|
-
{{/tab-content}}
|
|
7424
|
-
{{#> tab-content tab-content--attribute=(concat 'aria-labelledby="' tab-content--id '-subscription-support-link" id="' tab-content--id '-subscription-support-panel"') tab-content-body--modifier="pf-m-padding"}}
|
|
7425
|
-
{{#> content}}
|
|
7426
|
-
<p>Subscription and support content</p>
|
|
7427
|
-
{{/content}}
|
|
7428
|
-
{{/tab-content}}
|
|
7429
|
-
{{/sidebar-content}}
|
|
7430
|
-
{{/sidebar}}
|
|
7431
|
-
{{/card}}
|
|
7432
|
-
{{/page-main-section}}
|
|
7433
|
-
{{/tabs--page-wrapper}}
|
|
7434
|
-
``` -->
|
|
@@ -1797,7 +1797,6 @@ section: components
|
|
|
1797
1797
|
/>
|
|
1798
1798
|
</a>
|
|
1799
1799
|
</div>
|
|
1800
|
-
|
|
1801
1800
|
<div class="pf-c-page__header-tools">
|
|
1802
1801
|
<div class="pf-c-page__header-tools-group">
|
|
1803
1802
|
<div
|
|
@@ -2000,7 +1999,7 @@ section: components
|
|
|
2000
1999
|
<div class="pf-c-page__main-body">
|
|
2001
2000
|
<div class="pf-c-content">
|
|
2002
2001
|
<h1>Main title</h1>
|
|
2003
|
-
<p>This is a
|
|
2002
|
+
<p>This is a full page demo.</p>
|
|
2004
2003
|
</div>
|
|
2005
2004
|
</div>
|
|
2006
2005
|
</section>
|
|
@@ -715,7 +715,7 @@ wrapperTag: div
|
|
|
715
715
|
<div class="pf-c-page__main-body">
|
|
716
716
|
<div class="pf-c-content">
|
|
717
717
|
<h1>Main title</h1>
|
|
718
|
-
<p>This is a
|
|
718
|
+
<p>This is a full page demo.</p>
|
|
719
719
|
</div>
|
|
720
720
|
</div>
|
|
721
721
|
</section>
|
|
@@ -1176,7 +1176,7 @@ wrapperTag: div
|
|
|
1176
1176
|
<div class="pf-c-page__main-body">
|
|
1177
1177
|
<div class="pf-c-content">
|
|
1178
1178
|
<h1>Main title</h1>
|
|
1179
|
-
<p>This is a
|
|
1179
|
+
<p>This is a full page demo.</p>
|
|
1180
1180
|
</div>
|
|
1181
1181
|
</div>
|
|
1182
1182
|
</section>
|
|
@@ -23,7 +23,7 @@ The flex layout is based on the CSS Flex properties where the layout determines
|
|
|
23
23
|
|
|
24
24
|
### Breakpoints
|
|
25
25
|
|
|
26
|
-
- `-on-sm
|
|
26
|
+
- [Breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
|
|
27
27
|
|
|
28
28
|
### Usefulness
|
|
29
29
|
|
|
@@ -174,5 +174,5 @@ The gallery layout is designed so that all of its children are of uniform size,
|
|
|
174
174
|
| `.pf-l-gallery` | `<div>` | Initializes a Gallery layout |
|
|
175
175
|
| `.pf-l-gallery__item` | `<div>` | Explicitly sets the child for the gallery. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
|
|
176
176
|
| `.pf-m-gutter` | `.pf-l-gallery` | Adds space between children by using the globally defined gutter value. |
|
|
177
|
-
| `--pf-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the min value of `grid-template-columns` declaration.
|
|
178
|
-
| `--pf-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the max value of `grid-template-columns` declaration.
|
|
177
|
+
| `--pf-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
178
|
+
| `--pf-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -304,12 +304,12 @@ The grid layout is based on CSS Grid’s two-dimensional system of columns and r
|
|
|
304
304
|
|
|
305
305
|
### Usage
|
|
306
306
|
|
|
307
|
-
| Class | Applied to | Outcome
|
|
308
|
-
| ----------------------------------------------------- | --------------------------------------------- |
|
|
309
|
-
| `.pf-l-grid` | `<div>` | Initializes the grid layout.
|
|
310
|
-
| `.pf-l-grid__item` | `<div>` | Explicitly sets a child of the grid. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers.
|
|
311
|
-
| `.pf-m-gutter` | `.pf-l-grid` | Adds space between children by using the globally defined gutter value.
|
|
312
|
-
| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-l-grid` | Defines grid item size on grid container. |
|
|
313
|
-
| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-l-grid__item` | Defines grid item size. Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
|
|
314
|
-
| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-l-grid__item` | Defines grid item row span. For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: .pf-m-8-col.pf-m-2-row + .pf-m-4-col + .pf-m-4-col. There is no limit to number of spanned rows. |
|
|
315
|
-
| `--pf-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-l-grid > .pf-l-grid`, `.pf-l-grid__item` | Modifies the order of the grid layout element. |
|
|
307
|
+
| Class | Applied to | Outcome |
|
|
308
|
+
| ----------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
309
|
+
| `.pf-l-grid` | `<div>` | Initializes the grid layout. |
|
|
310
|
+
| `.pf-l-grid__item` | `<div>` | Explicitly sets a child of the grid. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
|
|
311
|
+
| `.pf-m-gutter` | `.pf-l-grid` | Adds space between children by using the globally defined gutter value. |
|
|
312
|
+
| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-l-grid` | Defines grid item size on grid container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
313
|
+
| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-l-grid__item` | Defines grid item size at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
|
|
314
|
+
| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-l-grid__item` | Defines grid item row span at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: .pf-m-8-col.pf-m-2-row + .pf-m-4-col + .pf-m-4-col. There is no limit to number of spanned rows. |
|
|
315
|
+
| `--pf-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-l-grid > .pf-l-grid`, `.pf-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -34,7 +34,7 @@ The text underneath is hidden.
|
|
|
34
34
|
|
|
35
35
|
### Overview
|
|
36
36
|
|
|
37
|
-
Breakpoint is optional. Breakpoints: base (no breakpoint value),
|
|
37
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-screen-reader-on-lg**
|
|
38
38
|
|
|
39
39
|
### Usage
|
|
40
40
|
|
|
@@ -23,7 +23,7 @@ section: utilities
|
|
|
23
23
|
|
|
24
24
|
### Overview
|
|
25
25
|
|
|
26
|
-
Breakpoint is optional. Breakpoints: base (no breakpoint value),
|
|
26
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-text-left-on-lg**
|
|
27
27
|
|
|
28
28
|
### Usage
|
|
29
29
|
|
|
@@ -79,7 +79,7 @@ Care should be taken especially when applying background colors, as this can hav
|
|
|
79
79
|
|
|
80
80
|
Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utilities/text#inverse-colors).
|
|
81
81
|
|
|
82
|
-
Breakpoint is optional. Breakpoints: base (no breakpoint value),
|
|
82
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-background-color-200-on-lg**
|
|
83
83
|
|
|
84
84
|
### Usage
|
|
85
85
|
|
|
@@ -76,7 +76,7 @@ section: utilities
|
|
|
76
76
|
|
|
77
77
|
### Overview
|
|
78
78
|
|
|
79
|
-
Breakpoint is optional. Breakpoints: base (no breakpoint value),
|
|
79
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-display-inline-block-on-lg**
|
|
80
80
|
|
|
81
81
|
### Usage
|
|
82
82
|
|
|
@@ -328,7 +328,7 @@ section: utilities
|
|
|
328
328
|
|
|
329
329
|
### Overview
|
|
330
330
|
|
|
331
|
-
For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. Breakpoint is optional. Breakpoints: base (no breakpoint value),
|
|
331
|
+
For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-flex-row-on-lg**
|
|
332
332
|
|
|
333
333
|
<!-- ## Accessibility
|
|
334
334
|
|
|
@@ -18,7 +18,7 @@ section: utilities
|
|
|
18
18
|
|
|
19
19
|
### Overview
|
|
20
20
|
|
|
21
|
-
Breakpoint is optional. Breakpoints: base (no breakpoint value),
|
|
21
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-text-left-on-lg**
|
|
22
22
|
|
|
23
23
|
### Usage
|
|
24
24
|
|
|
@@ -20,6 +20,8 @@ section: utilities
|
|
|
20
20
|
|
|
21
21
|
### Usage
|
|
22
22
|
|
|
23
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-w-initial-on-lg**
|
|
24
|
+
|
|
23
25
|
| Class | Applied to | Outcome |
|
|
24
26
|
| ----------------------------------- | ---------- | ------------------------------- |
|
|
25
27
|
| `.pf-u-w-initial{-on-[breakpoint]}` | `*` | Sets width: initial (auto) |
|
|
@@ -46,6 +48,8 @@ section: utilities
|
|
|
46
48
|
|
|
47
49
|
### Usage
|
|
48
50
|
|
|
51
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-w-25vw-on-lg**
|
|
52
|
+
|
|
49
53
|
| Class | Applied to | Outcome |
|
|
50
54
|
| --------------------------------- | ---------- | -------------------------------- |
|
|
51
55
|
| `.pf-u-w-25vw{-on-[breakpoint]}` | `*` | Sets width: 25vw |
|
|
@@ -84,6 +88,8 @@ section: utilities
|
|
|
84
88
|
|
|
85
89
|
### Usage
|
|
86
90
|
|
|
91
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-h-initial-on-lg**
|
|
92
|
+
|
|
87
93
|
| Class | Applied to | Outcome |
|
|
88
94
|
| ----------------------------------- | ---------- | -------------------------------- |
|
|
89
95
|
| `.pf-u-h-initial{-on-[breakpoint]}` | `*` | Sets height: initial (auto) |
|
|
@@ -122,6 +128,8 @@ section: utilities
|
|
|
122
128
|
|
|
123
129
|
### Usage
|
|
124
130
|
|
|
131
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-h-25vh-on-lg**
|
|
132
|
+
|
|
125
133
|
| Class | Applied to | Outcome |
|
|
126
134
|
| --------------------------------- | ---------- | --------------------------------- |
|
|
127
135
|
| `.pf-u-h-25vh{-on-[breakpoint]}` | `*` | Sets height: 25vh |
|
|
@@ -178,6 +186,8 @@ section: utilities
|
|
|
178
186
|
| `.pf-u-min-width` | `*` | Sets min-width: `var(--pf-u-min-width--MinWidth{-on-[breakpoint]})`. |
|
|
179
187
|
| `.pf-u-max-width` | `*` | Sets min-width: `var(--pf-u-max-width--MaxWidth{-on-[breakpoint]})`. |
|
|
180
188
|
|
|
189
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-u-min-width--MinWidth-on-lg**
|
|
190
|
+
|
|
181
191
|
| Custom property | Applied to | Outcome |
|
|
182
192
|
| ------------------------------------------------------- | ----------------- | --------------------------------------- |
|
|
183
193
|
| `--pf-u-min-width--MinWidth{-on-[breakpoint]}: {width}` | `.pf-u-min-width` | Modifies the min width custom property. |
|
|
@@ -230,6 +240,8 @@ section: utilities
|
|
|
230
240
|
| `.pf-u-min-height` | `*` | Sets min-height: `var(--pf-u-min-height--MinHeight{-on-[breakpoint]})`. |
|
|
231
241
|
| `.pf-u-max-height` | `*` | Sets max-height: `var(--pf-u-max-height--MaxHeight{-on-[breakpoint]})`. |
|
|
232
242
|
|
|
243
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-u-min-height--MinHeight-on-lg**
|
|
244
|
+
|
|
233
245
|
| Custom property | Applied to | Outcome |
|
|
234
246
|
| ---------------------------------------------------------- | ------------------ | ---------------------------------------- |
|
|
235
247
|
| `--pf-u-min-height--MinHeight{-on-[breakpoint]}: {height}` | `.pf-u-min-height` | Modifies the min height custom property. |
|
|
@@ -97,7 +97,7 @@ section: utilities
|
|
|
97
97
|
|
|
98
98
|
### Overview
|
|
99
99
|
|
|
100
|
-
Breakpoint is optional. Breakpoints: base (no breakpoint value),
|
|
100
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-m-sm-on-lg**
|
|
101
101
|
|
|
102
102
|
### Margin properties
|
|
103
103
|
|
|
@@ -149,7 +149,7 @@ These text utilities can be used to modify text within the PatternFly framework.
|
|
|
149
149
|
|
|
150
150
|
Care should be taken especially when applying text colors, as this can have a negative effect on the readability and accessibility of text. Refer to the information on [contrast ratios](/guidelines/colors/#contrast-ratios) for more information.
|
|
151
151
|
|
|
152
|
-
Breakpoint is optional. Breakpoints: base (no breakpoint value),
|
|
152
|
+
[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-font-size-xl-on-lg**
|
|
153
153
|
|
|
154
154
|
### Usage
|
|
155
155
|
|