@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.91
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/base/patternfly-common.css +10 -10
- package/base/patternfly-globals.css +3 -3
- package/base/patternfly-icons.css +1 -1
- package/base/patternfly-themes.css +53 -53
- package/base/patternfly-variables.css +236 -245
- package/base/tokens/_tokens-font.scss +0 -11
- package/components/AboutModalBox/about-modal-box.css +102 -102
- package/components/Accordion/accordion.css +118 -118
- package/components/ActionList/action-list.css +16 -16
- package/components/Alert/alert-group.css +50 -50
- package/components/Alert/alert.css +161 -161
- package/components/AppLauncher/app-launcher.css +167 -167
- package/components/Avatar/avatar.css +116 -116
- package/components/BackToTop/back-to-top.css +21 -21
- package/components/Backdrop/backdrop.css +9 -9
- package/components/BackgroundImage/background-image.css +15 -15
- package/components/Badge/badge.css +35 -35
- package/components/Banner/banner.css +114 -114
- package/components/Brand/brand.css +28 -28
- package/components/Breadcrumb/breadcrumb.css +62 -62
- package/components/Button/button.css +514 -514
- package/components/CalendarMonth/calendar-month.css +144 -144
- package/components/Card/card.css +230 -230
- package/components/Check/check.css +43 -43
- package/components/Chip/chip-group.css +60 -60
- package/components/Chip/chip.css +83 -83
- package/components/ClipboardCopy/clipboard-copy.css +71 -71
- package/components/CodeBlock/code-block.css +35 -35
- package/components/CodeEditor/code-editor.css +121 -121
- package/components/Content/content.css +216 -216
- package/components/ContextSelector/context-selector.css +251 -251
- package/components/DataList/data-list-grid.css +182 -182
- package/components/DataList/data-list.css +468 -468
- package/components/DatePicker/date-picker.css +35 -35
- package/components/DescriptionList/description-list-order.css +90 -90
- package/components/DescriptionList/description-list.css +193 -193
- package/components/Divider/divider.css +143 -143
- package/components/DragDrop/drag-drop.css +46 -46
- package/components/Drawer/drawer.css +474 -474
- package/components/Dropdown/dropdown.css +457 -457
- package/components/DualListSelector/dual-list-selector.css +199 -199
- package/components/EmptyState/empty-state.css +104 -104
- package/components/ExpandableSection/expandable-section.css +113 -113
- package/components/FileUpload/file-upload.css +32 -32
- package/components/Form/form.css +281 -281
- package/components/FormControl/form-control.css +197 -197
- package/components/HelperText/helper-text.css +51 -51
- package/components/Hint/hint.css +46 -46
- package/components/Icon/icon.css +218 -218
- package/components/InlineEdit/inline-edit.css +43 -43
- package/components/InputGroup/input-group.css +52 -52
- package/components/JumpLinks/jump-links.css +183 -183
- package/components/Label/label-group.css +86 -86
- package/components/Label/label.css +438 -438
- package/components/List/list.css +53 -53
- package/components/LogViewer/log-viewer.css +138 -138
- package/components/Login/login.css +139 -139
- package/components/Masthead/masthead.css +319 -319
- package/components/Menu/menu.css +415 -415
- package/components/MenuToggle/menu-toggle.css +275 -275
- package/components/ModalBox/modal-box.css +121 -121
- package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
- package/components/Nav/nav.css +225 -225
- package/components/NotificationBadge/notification-badge.css +66 -66
- package/components/NotificationDrawer/notification-drawer.css +179 -179
- package/components/NumberInput/number-input.css +20 -20
- package/components/OptionsMenu/options-menu.css +190 -190
- package/components/OverflowMenu/overflow-menu.css +19 -19
- package/components/Page/page.css +598 -598
- package/components/Pagination/pagination.css +220 -220
- package/components/Panel/panel.css +72 -72
- package/components/Popover/popover.css +148 -148
- package/components/Progress/progress.css +80 -80
- package/components/ProgressStepper/progress-stepper.css +514 -514
- package/components/Radio/radio.css +44 -44
- package/components/Select/select.css +423 -423
- package/components/Sidebar/sidebar.css +166 -166
- package/components/SimpleList/simple-list.css +53 -53
- package/components/Skeleton/skeleton.css +112 -112
- package/components/SkipToContent/skip-to-content.css +8 -8
- package/components/Slider/slider.css +144 -144
- package/components/Spinner/spinner.css +36 -36
- package/components/Switch/switch.css +89 -89
- package/components/TabContent/tab-content.css +34 -34
- package/components/Table/table-grid.css +911 -911
- package/components/Table/table-scrollable.css +38 -38
- package/components/Table/table-tree-view.css +497 -497
- package/components/Table/table.css +660 -660
- package/components/Tabs/tabs.css +616 -616
- package/components/TextInputGroup/text-input-group.css +88 -88
- package/components/Tile/tile.css +68 -68
- package/components/Timestamp/timestamp.css +29 -29
- package/components/Title/title.css +87 -87
- package/components/ToggleGroup/toggle-group.css +86 -86
- package/components/Toolbar/toolbar.css +2279 -2279
- package/components/Tooltip/tooltip.css +85 -85
- package/components/TreeView/tree-view.css +363 -363
- package/components/Truncate/truncate.css +15 -15
- package/components/Wizard/wizard.css +272 -272
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
- package/docs/components/Accordion/examples/Accordion.md +188 -188
- package/docs/components/ActionList/examples/ActionList.md +55 -55
- package/docs/components/Alert/examples/Alert.md +222 -222
- package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
- package/docs/components/Avatar/examples/Avatar.md +6 -6
- package/docs/components/BackToTop/examples/BackToTop.md +3 -3
- package/docs/components/Backdrop/examples/Backdrop.md +1 -1
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
- package/docs/components/Badge/examples/Badge.md +17 -17
- package/docs/components/Banner/examples/Banner.md +42 -42
- package/docs/components/Brand/examples/Brand.md +4 -4
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
- package/docs/components/Button/examples/Button.md +364 -364
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
- package/docs/components/Card/examples/Card.md +515 -515
- package/docs/components/Check/examples/Check.md +37 -37
- package/docs/components/Chip/examples/Chip.md +216 -216
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
- package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
- package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
- package/docs/components/Content/examples/Content.md +1 -1
- package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
- package/docs/components/DataList/examples/DataList.md +666 -666
- package/docs/components/DatePicker/examples/DatePicker.md +54 -54
- package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
- package/docs/components/Divider/examples/Divider.md +18 -18
- package/docs/components/DragDrop/examples/DragDrop.md +27 -27
- package/docs/components/Drawer/examples/Drawer.md +225 -225
- package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
- package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
- package/docs/components/EmptyState/examples/EmptyState.md +100 -100
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
- package/docs/components/FileUpload/examples/FileUpload.md +94 -94
- package/docs/components/Form/examples/Form.md +226 -226
- package/docs/components/FormControl/examples/FormControl.md +65 -65
- package/docs/components/HelperText/examples/HelperText.md +72 -72
- package/docs/components/Hint/examples/Hint.md +44 -44
- package/docs/components/Icon/examples/Icon.md +85 -85
- package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
- package/docs/components/InputGroup/examples/InputGroup.md +73 -73
- package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
- package/docs/components/Label/examples/Label.md +1717 -1717
- package/docs/components/List/examples/List.md +30 -30
- package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
- package/docs/components/Login/examples/Login.md +287 -287
- package/docs/components/Masthead/examples/masthead.md +39 -39
- package/docs/components/Menu/examples/Menu.md +2377 -2377
- package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
- package/docs/components/ModalBox/examples/ModalBox.md +119 -119
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
- package/docs/components/Nav/examples/Navigation.md +856 -856
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
- package/docs/components/NumberInput/examples/NumberInput.md +127 -127
- package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
- package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
- package/docs/components/Page/deprecated/PageHeader.md +85 -85
- package/docs/components/Page/examples/Page.md +90 -90
- package/docs/components/Pagination/examples/Pagination.md +285 -285
- package/docs/components/Panel/examples/Panel.md +38 -38
- package/docs/components/Popover/examples/Popover.md +169 -169
- package/docs/components/Progress/examples/Progress.md +145 -145
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
- package/docs/components/Radio/examples/Radio.md +33 -33
- package/docs/components/Select/deprecated/Select.md +736 -736
- package/docs/components/Sidebar/examples/Sidebar.md +65 -65
- package/docs/components/SimpleList/examples/SimpleList.md +39 -39
- package/docs/components/Skeleton/examples/Skeleton.md +29 -29
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
- package/docs/components/Slider/examples/Slider.md +213 -213
- package/docs/components/Spinner/examples/Spinner.md +14 -14
- package/docs/components/Switch/examples/Switch.md +58 -58
- package/docs/components/TabContent/examples/TabContent.md +24 -24
- package/docs/components/Table/examples/Table.md +6982 -6982
- package/docs/components/Tabs/examples/Tabs.md +2114 -2114
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
- package/docs/components/Tile/examples/Tile.md +131 -131
- package/docs/components/Timestamp/examples/Timestamp.md +10 -10
- package/docs/components/Title/examples/Title.md +12 -12
- package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
- package/docs/components/Toolbar/examples/Toolbar.md +611 -611
- package/docs/components/Tooltip/examples/Tooltip.md +27 -27
- package/docs/components/TreeView/examples/TreeView.md +1166 -1166
- package/docs/components/Truncate/examples/Truncate.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +522 -522
- package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
- package/docs/demos/Alert/examples/Alert.md +391 -391
- package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
- package/docs/demos/Banner/examples/Banner.md +364 -364
- package/docs/demos/Button/examples/Button.md +50 -50
- package/docs/demos/Card/examples/Card.md +1054 -1054
- package/docs/demos/CardView/examples/CardView.md +378 -378
- package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
- package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
- package/docs/demos/DataList/examples/DataList.md +1148 -1148
- package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
- package/docs/demos/Drawer/examples/Drawer.md +531 -531
- package/docs/demos/Form/examples/BasicForms.md +444 -444
- package/docs/demos/HelperText/examples/HelperText.md +51 -51
- package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
- package/docs/demos/Masthead/examples/Masthead.md +763 -763
- package/docs/demos/Modal/examples/Modal.md +645 -645
- package/docs/demos/Nav/examples/Nav.md +649 -649
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
- package/docs/demos/Page/examples/Page.md +1330 -1330
- package/docs/demos/Page/examples/Penta.md +217 -217
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
- package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
- package/docs/demos/Table/examples/Table.md +4580 -4580
- package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
- package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
- package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
- package/docs/layouts/Flex/examples/Flex.md +290 -290
- package/docs/layouts/Gallery/examples/Gallery.md +48 -48
- package/docs/layouts/Grid/examples/Grid.md +121 -121
- package/docs/layouts/Level/examples/Level.md +11 -11
- package/docs/layouts/Split/examples/Split.md +23 -23
- package/docs/layouts/Stack/examples/Stack.md +8 -8
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
- package/docs/utilities/Alignment/examples/Alignment.md +4 -4
- package/docs/utilities/Display/examples/Display.md +16 -16
- package/docs/utilities/Flex/examples/Flex.md +53 -53
- package/docs/utilities/Float/examples/Float.md +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +16 -16
- package/layouts/Bullseye/bullseye.css +3 -3
- package/layouts/Flex/flex.css +1276 -1276
- package/layouts/Gallery/gallery.css +34 -34
- package/layouts/Grid/grid.css +531 -531
- package/layouts/Level/level.css +4 -4
- package/layouts/Split/split.css +6 -6
- package/layouts/Stack/stack.css +5 -5
- package/package.json +1 -1
- package/patternfly-addons.css +2989 -2989
- package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
- package/patternfly-base-no-globals.css +284 -293
- package/patternfly-base-theme-dark-unversioned.css +271 -280
- package/patternfly-base.css +286 -295
- package/patternfly-charts-theme-dark-unversioned.css +66 -66
- package/patternfly-charts-theme-dark.css +66 -66
- package/patternfly-charts.css +320 -320
- package/patternfly-no-globals.css +20217 -20226
- package/patternfly-theme-dark-unversioned.css +20209 -20218
- package/patternfly.css +20219 -20228
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/_init.scss +1 -1
- package/utilities/Accessibility/accessibility.css +18 -18
- package/utilities/Alignment/alignment.css +24 -24
- package/utilities/BackgroundColor/BackgroundColor.css +252 -252
- package/utilities/BoxShadow/box-shadow.css +42 -42
- package/utilities/Display/display.css +54 -54
- package/utilities/Flex/flex.css +228 -228
- package/utilities/Float/float.css +12 -12
- package/utilities/Sizing/sizing.css +216 -216
- package/utilities/Spacing/spacing.css +1512 -1512
- package/utilities/Text/text.css +631 -631
|
@@ -9,11 +9,11 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
9
9
|
### Basic
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<div class="pf-
|
|
13
|
-
<div class="pf-
|
|
14
|
-
<div class="pf-
|
|
15
|
-
<div class="pf-
|
|
16
|
-
<div class="pf-
|
|
12
|
+
<div class="pf-v6-c-sidebar">
|
|
13
|
+
<div class="pf-v6-c-sidebar__main">
|
|
14
|
+
<div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
|
|
15
|
+
<div class="pf-v6-c-sidebar__content">
|
|
16
|
+
<div class="pf-v6-c-content">
|
|
17
17
|
<p>Default layout.</p>
|
|
18
18
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
19
19
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -27,11 +27,11 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
27
27
|
### With secondary background
|
|
28
28
|
|
|
29
29
|
```html
|
|
30
|
-
<div class="pf-
|
|
31
|
-
<div class="pf-
|
|
32
|
-
<div class="pf-
|
|
33
|
-
<div class="pf-
|
|
34
|
-
<div class="pf-
|
|
30
|
+
<div class="pf-v6-c-sidebar">
|
|
31
|
+
<div class="pf-v6-c-sidebar__main">
|
|
32
|
+
<div class="pf-v6-c-sidebar__panel pf-m-secondary">Sidebar panel</div>
|
|
33
|
+
<div class="pf-v6-c-sidebar__content pf-m-secondary">
|
|
34
|
+
<div class="pf-v6-c-content">
|
|
35
35
|
<p>Default layout.</p>
|
|
36
36
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
37
37
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -45,13 +45,13 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
45
45
|
### Gutter
|
|
46
46
|
|
|
47
47
|
```html
|
|
48
|
-
<div class="pf-
|
|
49
|
-
<div class="pf-
|
|
48
|
+
<div class="pf-v6-c-sidebar pf-m-gutter">
|
|
49
|
+
<div class="pf-v6-c-sidebar__main">
|
|
50
50
|
<div
|
|
51
|
-
class="pf-
|
|
51
|
+
class="pf-v6-c-sidebar__panel"
|
|
52
52
|
>Sidebar panel. Adding some extra content so that the gap between the panel and content area is better illustrated in this example.</div>
|
|
53
|
-
<div class="pf-
|
|
54
|
-
<div class="pf-
|
|
53
|
+
<div class="pf-v6-c-sidebar__content">
|
|
54
|
+
<div class="pf-v6-c-content">
|
|
55
55
|
<p>Adds a gutter between the panel and content when in the split layout.</p>
|
|
56
56
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
57
57
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -65,11 +65,11 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
65
65
|
### Stack
|
|
66
66
|
|
|
67
67
|
```html
|
|
68
|
-
<div class="pf-
|
|
69
|
-
<div class="pf-
|
|
70
|
-
<div class="pf-
|
|
71
|
-
<div class="pf-
|
|
72
|
-
<div class="pf-
|
|
68
|
+
<div class="pf-v6-c-sidebar pf-m-stack">
|
|
69
|
+
<div class="pf-v6-c-sidebar__main">
|
|
70
|
+
<div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
|
|
71
|
+
<div class="pf-v6-c-sidebar__content">
|
|
72
|
+
<div class="pf-v6-c-content">
|
|
73
73
|
<p>Forces a stacked layout.</p>
|
|
74
74
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
75
75
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -83,11 +83,11 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
83
83
|
### Split
|
|
84
84
|
|
|
85
85
|
```html
|
|
86
|
-
<div class="pf-
|
|
87
|
-
<div class="pf-
|
|
88
|
-
<div class="pf-
|
|
89
|
-
<div class="pf-
|
|
90
|
-
<div class="pf-
|
|
86
|
+
<div class="pf-v6-c-sidebar pf-m-split">
|
|
87
|
+
<div class="pf-v6-c-sidebar__main">
|
|
88
|
+
<div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
|
|
89
|
+
<div class="pf-v6-c-sidebar__content">
|
|
90
|
+
<div class="pf-v6-c-content">
|
|
91
91
|
<p>Forces a split layout.</p>
|
|
92
92
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
93
93
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -101,16 +101,16 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
101
101
|
### Panel right (HTML)
|
|
102
102
|
|
|
103
103
|
```html
|
|
104
|
-
<div class="pf-
|
|
105
|
-
<div class="pf-
|
|
106
|
-
<div class="pf-
|
|
107
|
-
<div class="pf-
|
|
104
|
+
<div class="pf-v6-c-sidebar">
|
|
105
|
+
<div class="pf-v6-c-sidebar__main">
|
|
106
|
+
<div class="pf-v6-c-sidebar__content">
|
|
107
|
+
<div class="pf-v6-c-content">
|
|
108
108
|
<p>Moves the panel to the right by placing the panel after the content in the HTML.</p>
|
|
109
109
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
110
110
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
111
111
|
</div>
|
|
112
112
|
</div>
|
|
113
|
-
<div class="pf-
|
|
113
|
+
<div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
|
|
114
114
|
</div>
|
|
115
115
|
</div>
|
|
116
116
|
|
|
@@ -119,11 +119,11 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
119
119
|
### Panel right (modifier)
|
|
120
120
|
|
|
121
121
|
```html
|
|
122
|
-
<div class="pf-
|
|
123
|
-
<div class="pf-
|
|
124
|
-
<div class="pf-
|
|
125
|
-
<div class="pf-
|
|
126
|
-
<div class="pf-
|
|
122
|
+
<div class="pf-v6-c-sidebar pf-m-panel-right">
|
|
123
|
+
<div class="pf-v6-c-sidebar__main">
|
|
124
|
+
<div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
|
|
125
|
+
<div class="pf-v6-c-sidebar__content">
|
|
126
|
+
<div class="pf-v6-c-content">
|
|
127
127
|
<p>
|
|
128
128
|
Moves the panel to the right via the modifier class
|
|
129
129
|
<b>.pf-m-panel-right</b> on the sidebar component.
|
|
@@ -140,11 +140,11 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
140
140
|
### Sticky panel
|
|
141
141
|
|
|
142
142
|
```html
|
|
143
|
-
<div class="pf-
|
|
144
|
-
<div class="pf-
|
|
145
|
-
<div class="pf-
|
|
146
|
-
<div class="pf-
|
|
147
|
-
<div class="pf-
|
|
143
|
+
<div class="pf-v6-c-sidebar">
|
|
144
|
+
<div class="pf-v6-c-sidebar__main">
|
|
145
|
+
<div class="pf-v6-c-sidebar__panel pf-m-sticky">Sidebar panel</div>
|
|
146
|
+
<div class="pf-v6-c-sidebar__content">
|
|
147
|
+
<div class="pf-v6-c-content">
|
|
148
148
|
<p>Forces the panel to be sticky to the top of the layout.</p>
|
|
149
149
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
150
150
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -158,11 +158,11 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
158
158
|
### Static panel
|
|
159
159
|
|
|
160
160
|
```html
|
|
161
|
-
<div class="pf-
|
|
162
|
-
<div class="pf-
|
|
163
|
-
<div class="pf-
|
|
164
|
-
<div class="pf-
|
|
165
|
-
<div class="pf-
|
|
161
|
+
<div class="pf-v6-c-sidebar">
|
|
162
|
+
<div class="pf-v6-c-sidebar__main">
|
|
163
|
+
<div class="pf-v6-c-sidebar__panel pf-m-static">Sidebar panel</div>
|
|
164
|
+
<div class="pf-v6-c-sidebar__content">
|
|
165
|
+
<div class="pf-v6-c-content">
|
|
166
166
|
<p>Forces the panel to be statically positioned (not sticky).</p>
|
|
167
167
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
168
168
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -176,13 +176,13 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
176
176
|
### Responsive panel width
|
|
177
177
|
|
|
178
178
|
```html
|
|
179
|
-
<div class="pf-
|
|
180
|
-
<div class="pf-
|
|
179
|
+
<div class="pf-v6-c-sidebar">
|
|
180
|
+
<div class="pf-v6-c-sidebar__main">
|
|
181
181
|
<div
|
|
182
|
-
class="pf-
|
|
182
|
+
class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-width-50 pf-m-width-33-on-lg pf-m-width-75-on-xl"
|
|
183
183
|
>Sidebar panel</div>
|
|
184
|
-
<div class="pf-
|
|
185
|
-
<div class="pf-
|
|
184
|
+
<div class="pf-v6-c-sidebar__content">
|
|
185
|
+
<div class="pf-v6-c-content">
|
|
186
186
|
<p>Changes the panel with and can change responsively at different breakpoints.</p>
|
|
187
187
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
188
188
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -196,11 +196,11 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
196
196
|
### Border
|
|
197
197
|
|
|
198
198
|
```html
|
|
199
|
-
<div class="pf-
|
|
200
|
-
<div class="pf-
|
|
201
|
-
<div class="pf-
|
|
202
|
-
<div class="pf-
|
|
203
|
-
<div class="pf-
|
|
199
|
+
<div class="pf-v6-c-sidebar pf-m-gutter">
|
|
200
|
+
<div class="pf-v6-c-sidebar__main pf-m-border">
|
|
201
|
+
<div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
|
|
202
|
+
<div class="pf-v6-c-sidebar__content">
|
|
203
|
+
<div class="pf-v6-c-content">
|
|
204
204
|
<p>Default layout.</p>
|
|
205
205
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
206
206
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -214,11 +214,11 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
214
214
|
### Padding on panel
|
|
215
215
|
|
|
216
216
|
```html
|
|
217
|
-
<div class="pf-
|
|
218
|
-
<div class="pf-
|
|
219
|
-
<div class="pf-
|
|
220
|
-
<div class="pf-
|
|
221
|
-
<div class="pf-
|
|
217
|
+
<div class="pf-v6-c-sidebar">
|
|
218
|
+
<div class="pf-v6-c-sidebar__main">
|
|
219
|
+
<div class="pf-v6-c-sidebar__panel pf-m-padding">Sidebar panel, with padding</div>
|
|
220
|
+
<div class="pf-v6-c-sidebar__content">
|
|
221
|
+
<div class="pf-v6-c-content">
|
|
222
222
|
<p>Default layout.</p>
|
|
223
223
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
224
224
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -232,11 +232,11 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
232
232
|
### Padding on content
|
|
233
233
|
|
|
234
234
|
```html
|
|
235
|
-
<div class="pf-
|
|
236
|
-
<div class="pf-
|
|
237
|
-
<div class="pf-
|
|
238
|
-
<div class="pf-
|
|
239
|
-
<div class="pf-
|
|
235
|
+
<div class="pf-v6-c-sidebar">
|
|
236
|
+
<div class="pf-v6-c-sidebar__main">
|
|
237
|
+
<div class="pf-v6-c-sidebar__panel">Sidebar panel</div>
|
|
238
|
+
<div class="pf-v6-c-sidebar__content pf-m-padding">
|
|
239
|
+
<div class="pf-v6-c-content">
|
|
240
240
|
<p>Sidebar content, with padding</p>
|
|
241
241
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
242
242
|
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
@@ -7,19 +7,19 @@ cssPrefix: pf-v5-c-simple-list
|
|
|
7
7
|
### Simple list
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<div class="pf-
|
|
11
|
-
<ul class="pf-
|
|
12
|
-
<li class="pf-
|
|
10
|
+
<div class="pf-v6-c-simple-list">
|
|
11
|
+
<ul class="pf-v6-c-simple-list__list" role="list">
|
|
12
|
+
<li class="pf-v6-c-simple-list__item">
|
|
13
13
|
<button
|
|
14
|
-
class="pf-
|
|
14
|
+
class="pf-v6-c-simple-list__item-link pf-m-current"
|
|
15
15
|
type="button"
|
|
16
16
|
>List item 1</button>
|
|
17
17
|
</li>
|
|
18
|
-
<li class="pf-
|
|
19
|
-
<button class="pf-
|
|
18
|
+
<li class="pf-v6-c-simple-list__item">
|
|
19
|
+
<button class="pf-v6-c-simple-list__item-link" type="button">List item 2</button>
|
|
20
20
|
</li>
|
|
21
|
-
<li class="pf-
|
|
22
|
-
<button class="pf-
|
|
21
|
+
<li class="pf-v6-c-simple-list__item">
|
|
22
|
+
<button class="pf-v6-c-simple-list__item-link" type="button">List item 3</button>
|
|
23
23
|
</li>
|
|
24
24
|
</ul>
|
|
25
25
|
</div>
|
|
@@ -29,25 +29,25 @@ cssPrefix: pf-v5-c-simple-list
|
|
|
29
29
|
### Simple list with links
|
|
30
30
|
|
|
31
31
|
```html
|
|
32
|
-
<div class="pf-
|
|
33
|
-
<ul class="pf-
|
|
34
|
-
<li class="pf-
|
|
32
|
+
<div class="pf-v6-c-simple-list">
|
|
33
|
+
<ul class="pf-v6-c-simple-list__list" role="list">
|
|
34
|
+
<li class="pf-v6-c-simple-list__item">
|
|
35
35
|
<a
|
|
36
|
-
class="pf-
|
|
36
|
+
class="pf-v6-c-simple-list__item-link pf-m-link pf-m-current"
|
|
37
37
|
href="#"
|
|
38
38
|
tabindex="0"
|
|
39
39
|
>List item 1</a>
|
|
40
40
|
</li>
|
|
41
|
-
<li class="pf-
|
|
41
|
+
<li class="pf-v6-c-simple-list__item">
|
|
42
42
|
<a
|
|
43
|
-
class="pf-
|
|
43
|
+
class="pf-v6-c-simple-list__item-link pf-m-link"
|
|
44
44
|
href="#"
|
|
45
45
|
tabindex="0"
|
|
46
46
|
>List item 2</a>
|
|
47
47
|
</li>
|
|
48
|
-
<li class="pf-
|
|
48
|
+
<li class="pf-v6-c-simple-list__item">
|
|
49
49
|
<a
|
|
50
|
-
class="pf-
|
|
50
|
+
class="pf-v6-c-simple-list__item-link pf-m-link"
|
|
51
51
|
href="#"
|
|
52
52
|
tabindex="0"
|
|
53
53
|
>List item 3</a>
|
|
@@ -60,41 +60,41 @@ cssPrefix: pf-v5-c-simple-list
|
|
|
60
60
|
### Grouped list
|
|
61
61
|
|
|
62
62
|
```html
|
|
63
|
-
<div class="pf-
|
|
64
|
-
<section class="pf-
|
|
65
|
-
<h2 class="pf-
|
|
66
|
-
<ul class="pf-
|
|
67
|
-
<li class="pf-
|
|
63
|
+
<div class="pf-v6-c-simple-list">
|
|
64
|
+
<section class="pf-v6-c-simple-list__section">
|
|
65
|
+
<h2 class="pf-v6-c-simple-list__title">Title</h2>
|
|
66
|
+
<ul class="pf-v6-c-simple-list__list" role="list">
|
|
67
|
+
<li class="pf-v6-c-simple-list__item">
|
|
68
68
|
<button
|
|
69
|
-
class="pf-
|
|
69
|
+
class="pf-v6-c-simple-list__item-link pf-m-current"
|
|
70
70
|
type="button"
|
|
71
71
|
>List item 1</button>
|
|
72
72
|
</li>
|
|
73
|
-
<li class="pf-
|
|
74
|
-
<button class="pf-
|
|
73
|
+
<li class="pf-v6-c-simple-list__item">
|
|
74
|
+
<button class="pf-v6-c-simple-list__item-link" type="button">List item 2</button>
|
|
75
75
|
</li>
|
|
76
|
-
<li class="pf-
|
|
77
|
-
<button class="pf-
|
|
76
|
+
<li class="pf-v6-c-simple-list__item">
|
|
77
|
+
<button class="pf-v6-c-simple-list__item-link" type="button">List item 3</button>
|
|
78
78
|
</li>
|
|
79
|
-
<li class="pf-
|
|
80
|
-
<button class="pf-
|
|
79
|
+
<li class="pf-v6-c-simple-list__item">
|
|
80
|
+
<button class="pf-v6-c-simple-list__item-link" type="button">List item 4</button>
|
|
81
81
|
</li>
|
|
82
82
|
</ul>
|
|
83
83
|
</section>
|
|
84
|
-
<section class="pf-
|
|
85
|
-
<h2 class="pf-
|
|
86
|
-
<ul class="pf-
|
|
87
|
-
<li class="pf-
|
|
88
|
-
<button class="pf-
|
|
84
|
+
<section class="pf-v6-c-simple-list__section">
|
|
85
|
+
<h2 class="pf-v6-c-simple-list__title">Title</h2>
|
|
86
|
+
<ul class="pf-v6-c-simple-list__list" role="list">
|
|
87
|
+
<li class="pf-v6-c-simple-list__item">
|
|
88
|
+
<button class="pf-v6-c-simple-list__item-link" type="button">List item 1</button>
|
|
89
89
|
</li>
|
|
90
|
-
<li class="pf-
|
|
91
|
-
<button class="pf-
|
|
90
|
+
<li class="pf-v6-c-simple-list__item">
|
|
91
|
+
<button class="pf-v6-c-simple-list__item-link" type="button">List item 2</button>
|
|
92
92
|
</li>
|
|
93
|
-
<li class="pf-
|
|
94
|
-
<button class="pf-
|
|
93
|
+
<li class="pf-v6-c-simple-list__item">
|
|
94
|
+
<button class="pf-v6-c-simple-list__item-link" type="button">List item 3</button>
|
|
95
95
|
</li>
|
|
96
|
-
<li class="pf-
|
|
97
|
-
<button class="pf-
|
|
96
|
+
<li class="pf-v6-c-simple-list__item">
|
|
97
|
+
<button class="pf-v6-c-simple-list__item-link" type="button">List item 4</button>
|
|
98
98
|
</li>
|
|
99
99
|
</ul>
|
|
100
100
|
</section>
|
|
@@ -9,36 +9,36 @@ cssPrefix: pf-v5-c-skeleton
|
|
|
9
9
|
### Default
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<div class="pf-
|
|
12
|
+
<div class="pf-v6-c-skeleton"></div>
|
|
13
13
|
|
|
14
14
|
```
|
|
15
15
|
|
|
16
16
|
### Percentage width modifiers
|
|
17
17
|
|
|
18
18
|
```html
|
|
19
|
-
<div class="pf-
|
|
19
|
+
<div class="pf-v6-c-skeleton pf-m-width-25"></div>
|
|
20
20
|
<br />
|
|
21
|
-
<div class="pf-
|
|
21
|
+
<div class="pf-v6-c-skeleton pf-m-width-33"></div>
|
|
22
22
|
<br />
|
|
23
|
-
<div class="pf-
|
|
23
|
+
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
|
|
24
24
|
<br />
|
|
25
|
-
<div class="pf-
|
|
25
|
+
<div class="pf-v6-c-skeleton pf-m-width-66"></div>
|
|
26
26
|
<br />
|
|
27
|
-
<div class="pf-
|
|
27
|
+
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
|
|
28
28
|
<br />
|
|
29
|
-
<div class="pf-
|
|
29
|
+
<div class="pf-v6-c-skeleton"></div>
|
|
30
30
|
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
### Percentage height modifiers
|
|
34
34
|
|
|
35
35
|
```html
|
|
36
|
-
<div class="pf-
|
|
37
|
-
<div class="pf-
|
|
38
|
-
<div class="pf-
|
|
39
|
-
<div class="pf-
|
|
40
|
-
<div class="pf-
|
|
41
|
-
<div class="pf-
|
|
36
|
+
<div class="pf-v6-c-skeleton pf-m-height-25"></div>
|
|
37
|
+
<div class="pf-v6-c-skeleton pf-m-height-33"></div>
|
|
38
|
+
<div class="pf-v6-c-skeleton pf-m-height-50"></div>
|
|
39
|
+
<div class="pf-v6-c-skeleton pf-m-height-66"></div>
|
|
40
|
+
<div class="pf-v6-c-skeleton pf-m-height-75"></div>
|
|
41
|
+
<div class="pf-v6-c-skeleton pf-m-height-100"></div>
|
|
42
42
|
|
|
43
43
|
```
|
|
44
44
|
|
|
@@ -46,19 +46,19 @@ cssPrefix: pf-v5-c-skeleton
|
|
|
46
46
|
|
|
47
47
|
```html
|
|
48
48
|
--pf-v5-global--FontSize--4xl
|
|
49
|
-
<div class="pf-
|
|
49
|
+
<div class="pf-v6-c-skeleton pf-m-text-4xl"></div>
|
|
50
50
|
<br />--pf-v5-global--FontSize--3xl
|
|
51
|
-
<div class="pf-
|
|
51
|
+
<div class="pf-v6-c-skeleton pf-m-text-3xl"></div>
|
|
52
52
|
<br />--pf-v5-global--FontSize--2xl
|
|
53
|
-
<div class="pf-
|
|
53
|
+
<div class="pf-v6-c-skeleton pf-m-text-2xl"></div>
|
|
54
54
|
<br />--pf-v5-global--FontSize--xl
|
|
55
|
-
<div class="pf-
|
|
55
|
+
<div class="pf-v6-c-skeleton pf-m-text-xl"></div>
|
|
56
56
|
<br />--pf-v5-global--FontSize--lg
|
|
57
|
-
<div class="pf-
|
|
57
|
+
<div class="pf-v6-c-skeleton pf-m-text-lg"></div>
|
|
58
58
|
<br />--pf-v5-global--FontSize--md
|
|
59
|
-
<div class="pf-
|
|
59
|
+
<div class="pf-v6-c-skeleton pf-m-text-md"></div>
|
|
60
60
|
<br />--pf-v5-global--FontSize--sm
|
|
61
|
-
<div class="pf-
|
|
61
|
+
<div class="pf-v6-c-skeleton pf-m-text-sm"></div>
|
|
62
62
|
|
|
63
63
|
```
|
|
64
64
|
|
|
@@ -66,23 +66,23 @@ cssPrefix: pf-v5-c-skeleton
|
|
|
66
66
|
|
|
67
67
|
```html
|
|
68
68
|
Small circle
|
|
69
|
-
<div class="pf-
|
|
69
|
+
<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-sm"></div>
|
|
70
70
|
<br />Medium circle
|
|
71
|
-
<div class="pf-
|
|
71
|
+
<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-md"></div>
|
|
72
72
|
<br />Large circle
|
|
73
|
-
<div class="pf-
|
|
73
|
+
<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-lg"></div>
|
|
74
74
|
<br />Small square
|
|
75
|
-
<div class="pf-
|
|
75
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-sm"></div>
|
|
76
76
|
<br />Medium square
|
|
77
|
-
<div class="pf-
|
|
77
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
78
78
|
<br />Large square
|
|
79
|
-
<div class="pf-
|
|
79
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-lg"></div>
|
|
80
80
|
<br />Small rectangle
|
|
81
|
-
<div class="pf-
|
|
81
|
+
<div class="pf-v6-c-skeleton pf-m-height-sm pf-m-width-md"></div>
|
|
82
82
|
<br />Medium rectangle
|
|
83
|
-
<div class="pf-
|
|
83
|
+
<div class="pf-v6-c-skeleton pf-m-height-md pf-m-width-lg"></div>
|
|
84
84
|
<br />Large rectangle
|
|
85
|
-
<div class="pf-
|
|
85
|
+
<div class="pf-v6-c-skeleton pf-m-height-lg"></div>
|
|
86
86
|
|
|
87
87
|
```
|
|
88
88
|
|
|
@@ -7,11 +7,11 @@ cssPrefix: pf-v5-c-skip-to-content
|
|
|
7
7
|
### Basic
|
|
8
8
|
|
|
9
9
|
```html isFullscreen
|
|
10
|
-
<div class="pf-
|
|
11
|
-
<a class="pf-
|
|
10
|
+
<div class="pf-v6-c-skip-to-content">
|
|
11
|
+
<a class="pf-v6-c-button pf-m-primary" href="#main-content">Skip to content</a>
|
|
12
12
|
</div>Press tab to skip to content at the bottom of the page.
|
|
13
13
|
<div style="height:2000px"></div>
|
|
14
|
-
<div class="pf-
|
|
14
|
+
<div class="pf-v6-c-content">
|
|
15
15
|
<h1 id="main-content">Main content</h1>
|
|
16
16
|
<p>
|
|
17
17
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius
|