@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81
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/README.md +2 -2
- package/assets/fontawesome/_variables.scss +2 -1
- package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
- package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
- package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
- package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
- package/assets/images/RHAiExperienceIcon.svg +27 -0
- package/assets/images/RHAutomationsLogo.svg +96 -0
- package/assets/images/RHServerStackIcon.svg +16 -0
- package/assets/images/compass--hero-bg.png +0 -0
- package/assets/images/compass--rh-wallpaper-dark.png +0 -0
- package/assets/images/compass--rh-wallpaper-light.png +0 -0
- package/assets/images/compass--wallpaper-dark.jpg +0 -0
- package/assets/images/compass--wallpaper-dark.png +0 -0
- package/assets/images/compass--wallpaper-light.jpg +0 -0
- package/assets/images/compass--wallpaper-light.png +0 -0
- package/assets/images/glass-brand-dark.jpg +0 -0
- package/assets/images/glass-brand-dark.png +0 -0
- package/assets/images/glass-brand-light.jpg +0 -0
- package/assets/images/glass-brand-light.png +0 -0
- package/base/normalize.scss +7 -0
- package/base/patternfly-common.css +50 -0
- package/base/patternfly-common.scss +59 -0
- package/base/patternfly-svg-icons.css +17 -0
- package/base/patternfly-svg-icons.scss +20 -0
- package/base/patternfly-variables.css +926 -513
- package/base/patternfly-variables.scss +46 -4
- package/base/tokens/tokens-dark.scss +56 -8
- package/base/tokens/tokens-default.scss +69 -14
- package/base/tokens/tokens-glass-dark.scss +26 -0
- package/base/tokens/tokens-glass.scss +22 -0
- package/base/tokens/tokens-local.scss +17 -0
- package/base/tokens/tokens-palette.scss +3 -1
- package/base/tokens/tokens-redhat-dark.scss +21 -0
- package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
- package/base/tokens/tokens-redhat-glass.scss +30 -0
- package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
- package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
- package/base/tokens/tokens-redhat.scss +15 -0
- package/components/AboutModalBox/about-modal-box.css +36 -26
- package/components/Accordion/accordion.css +26 -14
- package/components/Accordion/accordion.scss +12 -2
- package/components/ActionList/action-list.css +2 -0
- package/components/ActionList/action-list.scss +2 -0
- package/components/Alert/alert.css +7 -5
- package/components/Alert/alert.scss +2 -1
- package/components/Avatar/avatar.css +12 -4
- package/components/BackgroundImage/background-image.css +6 -3
- package/components/Banner/banner.css +12 -6
- package/components/Banner/banner.scss +7 -0
- package/components/Brand/brand.css +3 -1
- package/components/Breadcrumb/breadcrumb.css +10 -5
- package/components/Breadcrumb/breadcrumb.scss +6 -2
- package/components/Button/button.css +173 -71
- package/components/Button/button.scss +188 -72
- package/components/CalendarMonth/calendar-month.css +4 -3
- package/components/Card/card.css +51 -15
- package/components/Card/card.scss +65 -9
- package/components/ClipboardCopy/clipboard-copy.css +14 -7
- package/components/ClipboardCopy/clipboard-copy.scss +13 -4
- package/components/CodeEditor/code-editor.css +2 -2
- package/components/CodeEditor/code-editor.scss +2 -2
- package/components/Compass/compass.css +399 -0
- package/components/Compass/compass.scss +413 -0
- package/components/DataList/data-list.css +30 -23
- package/components/DataList/data-list.scss +3 -2
- package/components/DescriptionList/description-list-order.scss +5 -1
- package/components/DescriptionList/description-list.css +7 -5
- package/components/DescriptionList/description-list.scss +5 -1
- package/components/Divider/divider.css +7 -5
- package/components/Drawer/drawer.css +224 -75
- package/components/Drawer/drawer.scss +194 -27
- package/components/DualListSelector/dual-list-selector.css +18 -12
- package/components/DualListSelector/dual-list-selector.scss +1 -1
- package/components/ExpandableSection/expandable-section.css +21 -16
- package/components/ExpandableSection/expandable-section.scss +6 -3
- package/components/Form/form.css +2 -2
- package/components/Form/form.scss +2 -2
- package/components/FormControl/form-control.css +3 -3
- package/components/FormControl/form-control.scss +3 -3
- package/components/Hero/hero.css +74 -0
- package/components/Hero/hero.scss +86 -0
- package/components/JumpLinks/jump-links.css +16 -5
- package/components/JumpLinks/jump-links.scss +17 -3
- package/components/Label/label-group.css +2 -2
- package/components/Label/label-group.scss +2 -2
- package/components/Label/label.css +4 -3
- package/components/Login/login.css +58 -40
- package/components/Login/login.scss +7 -3
- package/components/Masthead/masthead.css +111 -16
- package/components/Masthead/masthead.scss +111 -1
- package/components/Menu/menu.css +49 -33
- package/components/Menu/menu.scss +26 -19
- package/components/MenuToggle/menu-toggle.css +35 -8
- package/components/MenuToggle/menu-toggle.scss +42 -8
- package/components/ModalBox/modal-box.css +9 -7
- package/components/ModalBox/modal-box.scss +2 -2
- package/components/Nav/nav.css +82 -11
- package/components/Nav/nav.scss +85 -5
- package/components/NotificationDrawer/notification-drawer.css +19 -9
- package/components/NotificationDrawer/notification-drawer.scss +14 -5
- package/components/OverflowMenu/overflow-menu.css +16 -0
- package/components/OverflowMenu/overflow-menu.scss +20 -1
- package/components/Page/page.css +421 -32
- package/components/Page/page.scss +397 -15
- package/components/Pagination/pagination.css +56 -4
- package/components/Pagination/pagination.scss +71 -6
- package/components/Panel/panel.css +41 -3
- package/components/Panel/panel.scss +56 -3
- package/components/Progress/progress.css +3 -1
- package/components/Progress/progress.scss +3 -1
- package/components/ProgressStepper/progress-stepper.scss +5 -1
- package/components/Sidebar/sidebar.css +1 -1
- package/components/Sidebar/sidebar.scss +7 -3
- package/components/Skeleton/skeleton.css +16 -15
- package/components/Slider/slider.css +32 -18
- package/components/Switch/switch.css +4 -2
- package/components/Switch/switch.scss +1 -1
- package/components/Table/table-grid.css +28 -36
- package/components/Table/table-grid.scss +4 -4
- package/components/Table/table-scrollable.css +1 -1
- package/components/Table/table-scrollable.scss +1 -1
- package/components/Table/table-tree-view.css +4 -2
- package/components/Table/table.css +104 -57
- package/components/Table/table.scss +92 -37
- package/components/Tabs/tabs.css +39 -33
- package/components/Tabs/tabs.scss +38 -26
- package/components/TextInputGroup/text-input-group.css +2 -2
- package/components/TextInputGroup/text-input-group.scss +2 -2
- package/components/ToggleGroup/toggle-group.css +44 -19
- package/components/ToggleGroup/toggle-group.scss +51 -22
- package/components/Toolbar/toolbar.css +195 -16
- package/components/Toolbar/toolbar.scss +89 -9
- package/components/TreeView/tree-view.css +45 -14
- package/components/TreeView/tree-view.scss +32 -1
- package/components/Wizard/wizard.css +41 -19
- package/components/Wizard/wizard.scss +26 -6
- package/components/_index.css +2740 -829
- package/components/_index.scss +3 -1
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
- package/docs/components/Accordion/examples/Accordion.md +392 -30
- package/docs/components/ActionList/examples/ActionList.md +143 -11
- package/docs/components/Alert/examples/Alert.md +678 -54
- package/docs/components/Avatar/examples/Avatar.md +4 -4
- package/docs/components/BackToTop/examples/BackToTop.md +13 -1
- package/docs/components/Banner/examples/Banner.md +196 -5
- package/docs/components/Brand/examples/Brand.md +2 -2
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
- package/docs/components/Button/examples/Button.md +2829 -333
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
- package/docs/components/Card/examples/Card.md +335 -12
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
- package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
- package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
- package/docs/components/Compass/examples/Compass.css +8 -0
- package/docs/components/Compass/examples/Compass.md +109 -0
- package/docs/components/DataList/examples/DataList.md +468 -78
- package/docs/components/DatePicker/examples/DatePicker.md +78 -6
- package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/DragDrop/examples/DragDrop.css +1 -1
- package/docs/components/Drawer/examples/Drawer.md +415 -35
- package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
- package/docs/components/EmptyState/examples/EmptyState.md +78 -6
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
- package/docs/components/Form/examples/Form.md +78 -6
- package/docs/components/Hero/examples/Hero.md +25 -0
- package/docs/components/Hint/examples/Hint.md +39 -3
- package/docs/components/Icon/examples/Icon.md +105 -9
- package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
- package/docs/components/InputGroup/examples/InputGroup.md +40 -4
- package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
- package/docs/components/Label/examples/Label.md +2834 -218
- package/docs/components/Login/examples/Login.md +39 -3
- package/docs/components/Masthead/examples/masthead.md +80 -1
- package/docs/components/Menu/examples/Menu.md +1679 -133
- package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
- package/docs/components/ModalBox/examples/ModalBox.md +289 -25
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
- package/docs/components/Nav/examples/Navigation.md +898 -62
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
- package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
- package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
- package/docs/components/Page/examples/Page.md +211 -25
- package/docs/components/Pagination/examples/Pagination.md +1291 -80
- package/docs/components/Panel/examples/Panel.css +3 -0
- package/docs/components/Panel/examples/Panel.md +71 -4
- package/docs/components/Popover/examples/Popover.md +286 -22
- package/docs/components/Progress/examples/Progress.md +91 -7
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
- package/docs/components/Sidebar/examples/Sidebar.md +1 -1
- package/docs/components/Slider/examples/Slider.md +52 -4
- package/docs/components/Table/examples/Table.css +2 -1
- package/docs/components/Table/examples/Table.md +7543 -653
- package/docs/components/Tabs/examples/Tabs.md +5734 -471
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
- package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
- package/docs/components/Toolbar/examples/Toolbar.css +1 -1
- package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
- package/docs/components/TreeView/examples/TreeView.md +1390 -130
- package/docs/components/Wizard/examples/Wizard.md +828 -73
- package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
- package/docs/demos/Alert/examples/Alert.md +539 -164
- package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
- package/docs/demos/Banner/examples/Banner.md +290 -104
- package/docs/demos/Button/examples/Button.md +13 -1
- package/docs/demos/Card/examples/Card.md +1041 -134
- package/docs/demos/CardView/examples/CardView.md +570 -171
- package/docs/demos/Compass/examples/Compass.md +10005 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
- package/docs/demos/DataList/examples/DataList.md +1301 -292
- package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
- package/docs/demos/Drawer/examples/Drawer.md +718 -262
- package/docs/demos/Form/examples/BasicForms.md +273 -21
- package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
- package/docs/demos/Masthead/examples/Masthead.md +1119 -489
- package/docs/demos/Modal/examples/Modal.md +948 -321
- package/docs/demos/Nav/examples/Nav.md +3449 -499
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
- package/docs/demos/Page/examples/Page.md +2137 -773
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
- package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
- package/docs/demos/Table/examples/Table.md +11807 -2275
- package/docs/demos/Tabs/examples/Tabs.md +1117 -337
- package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
- package/docs/demos/Wizard/examples/Wizard.md +1705 -526
- package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
- package/docs/layouts/Flex/examples/Flex.css +3 -3
- package/docs/layouts/Flex/examples/Flex.md +3 -2
- package/docs/layouts/Gallery/examples/Gallery.css +2 -2
- package/docs/layouts/Gallery/examples/Gallery.md +4 -3
- package/docs/layouts/Grid/examples/Grid.css +1 -1
- package/docs/layouts/Grid/examples/Grid.md +6 -5
- package/docs/layouts/Level/examples/Level.css +3 -3
- package/docs/layouts/Level/examples/Level.md +2 -1
- package/docs/layouts/Split/examples/Split.css +1 -1
- package/docs/layouts/Split/examples/Split.md +2 -1
- package/docs/layouts/Stack/examples/Stack.css +3 -3
- package/docs/layouts/Stack/examples/Stack.md +2 -1
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
- package/docs/utilities/Alignment/examples/Alignment.css +4 -4
- package/docs/utilities/Alignment/examples/Alignment.md +3 -2
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
- package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
- package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
- package/docs/utilities/Display/examples/Display.css +1 -1
- package/docs/utilities/Display/examples/Display.md +3 -2
- package/docs/utilities/Flex/examples/Flex.css +7 -7
- package/docs/utilities/Flex/examples/Flex.md +3 -2
- package/docs/utilities/Float/examples/Float.css +2 -2
- package/docs/utilities/Float/examples/Float.md +3 -2
- package/docs/utilities/Sizing/examples/Sizing.md +8 -7
- package/docs/utilities/Spacing/examples/Spacing.css +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +3 -2
- package/docs/utilities/Text/examples/Text.md +5 -4
- package/icons/PfIcons/add-circle-o.svg +4 -0
- package/icons/PfIcons/ansible-tower.svg +4 -0
- package/icons/PfIcons/applications.svg +4 -0
- package/icons/PfIcons/arrow.svg +4 -0
- package/icons/PfIcons/asleep.svg +4 -0
- package/icons/PfIcons/attention-bell.svg +4 -0
- package/icons/PfIcons/automation.svg +4 -0
- package/icons/PfIcons/bell.svg +4 -0
- package/icons/PfIcons/blueprint.svg +4 -0
- package/icons/PfIcons/build.svg +4 -0
- package/icons/PfIcons/builder-image.svg +4 -0
- package/icons/PfIcons/bundle.svg +4 -0
- package/icons/PfIcons/catalog.svg +4 -0
- package/icons/PfIcons/chat.svg +4 -0
- package/icons/PfIcons/close.svg +4 -0
- package/icons/PfIcons/cloud-security.svg +4 -0
- package/icons/PfIcons/cloud-tenant.svg +4 -0
- package/icons/PfIcons/cluster.svg +4 -0
- package/icons/PfIcons/connected.svg +4 -0
- package/icons/PfIcons/container-node.svg +4 -0
- package/icons/PfIcons/cpu.svg +4 -0
- package/icons/PfIcons/critical-risk.svg +4 -0
- package/icons/PfIcons/data-processor.svg +4 -0
- package/icons/PfIcons/data-sink.svg +4 -0
- package/icons/PfIcons/data-source.svg +4 -0
- package/icons/PfIcons/degraded.svg +4 -0
- package/icons/PfIcons/disconnected.svg +4 -0
- package/icons/PfIcons/domain.svg +4 -0
- package/icons/PfIcons/edit.svg +4 -0
- package/icons/PfIcons/enhancement.svg +4 -0
- package/icons/PfIcons/enterprise.svg +4 -0
- package/icons/PfIcons/equalizer.svg +4 -0
- package/icons/PfIcons/error-circle-o.svg +4 -0
- package/icons/PfIcons/export.svg +4 -0
- package/icons/PfIcons/filter.svg +4 -0
- package/icons/PfIcons/flavor.svg +4 -0
- package/icons/PfIcons/folder-close.svg +4 -0
- package/icons/PfIcons/folder-open.svg +4 -0
- package/icons/PfIcons/globe-route.svg +4 -0
- package/icons/PfIcons/help.svg +4 -0
- package/icons/PfIcons/history.svg +4 -0
- package/icons/PfIcons/home.svg +4 -0
- package/icons/PfIcons/import.svg +4 -0
- package/icons/PfIcons/in-progress.svg +4 -0
- package/icons/PfIcons/info.svg +4 -0
- package/icons/PfIcons/infrastructure.svg +4 -0
- package/icons/PfIcons/integration.svg +4 -0
- package/icons/PfIcons/key.svg +4 -0
- package/icons/PfIcons/locked.svg +4 -0
- package/icons/PfIcons/maintenance.svg +4 -0
- package/icons/PfIcons/memory.svg +4 -0
- package/icons/PfIcons/messages.svg +4 -0
- package/icons/PfIcons/middleware.svg +4 -0
- package/icons/PfIcons/migration.svg +4 -0
- package/icons/PfIcons/module.svg +4 -0
- package/icons/PfIcons/monitoring.svg +4 -0
- package/icons/PfIcons/multicluster.svg +4 -0
- package/icons/PfIcons/namespaces.svg +4 -0
- package/icons/PfIcons/network.svg +4 -0
- package/icons/PfIcons/new-process.svg +4 -0
- package/icons/PfIcons/not-started.svg +4 -0
- package/icons/PfIcons/off.svg +4 -0
- package/icons/PfIcons/ok.svg +4 -0
- package/icons/PfIcons/on-running.svg +4 -0
- package/icons/PfIcons/on.svg +4 -0
- package/icons/PfIcons/open-drawer-right.svg +4 -0
- package/icons/PfIcons/openshift.svg +4 -0
- package/icons/PfIcons/openstack.svg +4 -0
- package/icons/PfIcons/optimize.svg +4 -0
- package/icons/PfIcons/orders.svg +4 -0
- package/icons/PfIcons/os-image.svg +4 -0
- package/icons/PfIcons/package.svg +4 -0
- package/icons/PfIcons/panel-close.svg +4 -0
- package/icons/PfIcons/panel-open.svg +4 -0
- package/icons/PfIcons/paused.svg +4 -0
- package/icons/PfIcons/pending.svg +4 -0
- package/icons/PfIcons/pficon-dragdrop.svg +4 -0
- package/icons/PfIcons/pficon-history.svg +4 -0
- package/icons/PfIcons/pficon-network-range.svg +4 -0
- package/icons/PfIcons/pficon-satellite.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
- package/icons/PfIcons/pficon-template.svg +4 -0
- package/icons/PfIcons/pficon-vcenter.svg +4 -0
- package/icons/PfIcons/plugged.svg +4 -0
- package/icons/PfIcons/port.svg +4 -0
- package/icons/PfIcons/print.svg +4 -0
- package/icons/PfIcons/private.svg +4 -0
- package/icons/PfIcons/process-automation.svg +4 -0
- package/icons/PfIcons/project.svg +4 -0
- package/icons/PfIcons/rebalance.svg +4 -0
- package/icons/PfIcons/rebooting.svg +4 -0
- package/icons/PfIcons/regions.svg +4 -0
- package/icons/PfIcons/registry.svg +4 -0
- package/icons/PfIcons/remove2.svg +4 -0
- package/icons/PfIcons/replicator.svg +4 -0
- package/icons/PfIcons/repository.svg +4 -0
- package/icons/PfIcons/resource-pool.svg +4 -0
- package/icons/PfIcons/resources-almost-empty.svg +4 -0
- package/icons/PfIcons/resources-almost-full.svg +4 -0
- package/icons/PfIcons/resources-empty.svg +4 -0
- package/icons/PfIcons/resources-full.svg +4 -0
- package/icons/PfIcons/running.svg +4 -0
- package/icons/PfIcons/save.svg +4 -0
- package/icons/PfIcons/screen.svg +4 -0
- package/icons/PfIcons/security.svg +4 -0
- package/icons/PfIcons/server-group.svg +4 -0
- package/icons/PfIcons/server.svg +4 -0
- package/icons/PfIcons/service-catalog.svg +4 -0
- package/icons/PfIcons/service.svg +4 -0
- package/icons/PfIcons/services.svg +4 -0
- package/icons/PfIcons/severity-critical.svg +4 -0
- package/icons/PfIcons/severity-important.svg +4 -0
- package/icons/PfIcons/severity-minor.svg +4 -0
- package/icons/PfIcons/severity-moderate.svg +4 -0
- package/icons/PfIcons/severity-none.svg +4 -0
- package/icons/PfIcons/severity-undefined.svg +4 -0
- package/icons/PfIcons/spinner.svg +4 -0
- package/icons/PfIcons/spinner2.svg +4 -0
- package/icons/PfIcons/storage-domain.svg +4 -0
- package/icons/PfIcons/task.svg +4 -0
- package/icons/PfIcons/tenant.svg +4 -0
- package/icons/PfIcons/thumb-tack.svg +4 -0
- package/icons/PfIcons/topology.svg +4 -0
- package/icons/PfIcons/treeview.svg +4 -0
- package/icons/PfIcons/trend-down.svg +4 -0
- package/icons/PfIcons/trend-up.svg +4 -0
- package/icons/PfIcons/unknown.svg +4 -0
- package/icons/PfIcons/unlocked.svg +4 -0
- package/icons/PfIcons/unplugged.svg +4 -0
- package/icons/PfIcons/user.svg +4 -0
- package/icons/PfIcons/users.svg +4 -0
- package/icons/PfIcons/virtual-machine.svg +4 -0
- package/icons/PfIcons/volume.svg +4 -0
- package/icons/PfIcons/warning-triangle.svg +4 -0
- package/icons/PfIcons/zone.svg +4 -0
- package/layouts/Flex/flex.scss +83 -19
- package/layouts/Gallery/gallery.css +6 -2
- package/layouts/_index.css +6 -2
- package/package.json +55 -17
- package/patternfly-base-no-globals.css +969 -489
- package/patternfly-base.css +976 -489
- package/patternfly-charts.css +3 -3
- package/patternfly-no-globals.css +3623 -1194
- package/patternfly.css +3630 -1194
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/patternfly.scss +48 -0
- package/sass-utilities/functions.scss +32 -25
- package/sass-utilities/mixins.scss +54 -23
- package/sass-utilities/namespaces-components.scss +6 -0
- package/sass-utilities/scss-variables.scss +3 -0
|
@@ -17,7 +17,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
17
17
|
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
18
18
|
type="button"
|
|
19
19
|
aria-expanded="false"
|
|
20
|
-
aria-label="Menu toggle"
|
|
21
20
|
id="pagination-menu-toggle-top-example"
|
|
22
21
|
>
|
|
23
22
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -26,7 +25,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
26
25
|
</span>
|
|
27
26
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
28
27
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
29
|
-
<
|
|
28
|
+
<svg
|
|
29
|
+
class="pf-v6-svg"
|
|
30
|
+
viewBox="0 0 20 20"
|
|
31
|
+
fill="currentColor"
|
|
32
|
+
aria-hidden="true"
|
|
33
|
+
role="img"
|
|
34
|
+
width="1em"
|
|
35
|
+
height="1em"
|
|
36
|
+
>
|
|
37
|
+
<path
|
|
38
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
39
|
+
/>
|
|
40
|
+
</svg>
|
|
30
41
|
</span>
|
|
31
42
|
</span>
|
|
32
43
|
</button>
|
|
@@ -43,7 +54,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
43
54
|
aria-label="Go to first page"
|
|
44
55
|
>
|
|
45
56
|
<span class="pf-v6-c-button__icon">
|
|
46
|
-
<
|
|
57
|
+
<svg
|
|
58
|
+
class="pf-v6-svg"
|
|
59
|
+
viewBox="0 0 448 512"
|
|
60
|
+
fill="currentColor"
|
|
61
|
+
aria-hidden="true"
|
|
62
|
+
role="img"
|
|
63
|
+
width="1em"
|
|
64
|
+
height="1em"
|
|
65
|
+
>
|
|
66
|
+
<path
|
|
67
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
68
|
+
/>
|
|
69
|
+
</svg>
|
|
47
70
|
</span>
|
|
48
71
|
</button>
|
|
49
72
|
</div>
|
|
@@ -55,7 +78,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
55
78
|
aria-label="Go to previous page"
|
|
56
79
|
>
|
|
57
80
|
<span class="pf-v6-c-button__icon">
|
|
58
|
-
<
|
|
81
|
+
<svg
|
|
82
|
+
class="pf-v6-svg"
|
|
83
|
+
viewBox="0 0 256 512"
|
|
84
|
+
fill="currentColor"
|
|
85
|
+
aria-hidden="true"
|
|
86
|
+
role="img"
|
|
87
|
+
width="1em"
|
|
88
|
+
height="1em"
|
|
89
|
+
>
|
|
90
|
+
<path
|
|
91
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
92
|
+
/>
|
|
93
|
+
</svg>
|
|
59
94
|
</span>
|
|
60
95
|
</button>
|
|
61
96
|
</div>
|
|
@@ -78,7 +113,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
78
113
|
aria-label="Go to next page"
|
|
79
114
|
>
|
|
80
115
|
<span class="pf-v6-c-button__icon">
|
|
81
|
-
<
|
|
116
|
+
<svg
|
|
117
|
+
class="pf-v6-svg"
|
|
118
|
+
viewBox="0 0 256 512"
|
|
119
|
+
fill="currentColor"
|
|
120
|
+
aria-hidden="true"
|
|
121
|
+
role="img"
|
|
122
|
+
width="1em"
|
|
123
|
+
height="1em"
|
|
124
|
+
>
|
|
125
|
+
<path
|
|
126
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
127
|
+
/>
|
|
128
|
+
</svg>
|
|
82
129
|
</span>
|
|
83
130
|
</button>
|
|
84
131
|
</div>
|
|
@@ -90,7 +137,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
90
137
|
aria-label="Go to last page"
|
|
91
138
|
>
|
|
92
139
|
<span class="pf-v6-c-button__icon">
|
|
93
|
-
<
|
|
140
|
+
<svg
|
|
141
|
+
class="pf-v6-svg"
|
|
142
|
+
viewBox="0 0 448 512"
|
|
143
|
+
fill="currentColor"
|
|
144
|
+
aria-hidden="true"
|
|
145
|
+
role="img"
|
|
146
|
+
width="1em"
|
|
147
|
+
height="1em"
|
|
148
|
+
>
|
|
149
|
+
<path
|
|
150
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
151
|
+
/>
|
|
152
|
+
</svg>
|
|
94
153
|
</span>
|
|
95
154
|
</button>
|
|
96
155
|
</div>
|
|
@@ -112,7 +171,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
112
171
|
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
113
172
|
type="button"
|
|
114
173
|
aria-expanded="false"
|
|
115
|
-
aria-label="Menu toggle"
|
|
116
174
|
id="pagination-menu-toggle-top-sticky-example"
|
|
117
175
|
>
|
|
118
176
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -121,7 +179,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
121
179
|
</span>
|
|
122
180
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
123
181
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
124
|
-
<
|
|
182
|
+
<svg
|
|
183
|
+
class="pf-v6-svg"
|
|
184
|
+
viewBox="0 0 20 20"
|
|
185
|
+
fill="currentColor"
|
|
186
|
+
aria-hidden="true"
|
|
187
|
+
role="img"
|
|
188
|
+
width="1em"
|
|
189
|
+
height="1em"
|
|
190
|
+
>
|
|
191
|
+
<path
|
|
192
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
193
|
+
/>
|
|
194
|
+
</svg>
|
|
125
195
|
</span>
|
|
126
196
|
</span>
|
|
127
197
|
</button>
|
|
@@ -138,7 +208,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
138
208
|
aria-label="Go to first page"
|
|
139
209
|
>
|
|
140
210
|
<span class="pf-v6-c-button__icon">
|
|
141
|
-
<
|
|
211
|
+
<svg
|
|
212
|
+
class="pf-v6-svg"
|
|
213
|
+
viewBox="0 0 448 512"
|
|
214
|
+
fill="currentColor"
|
|
215
|
+
aria-hidden="true"
|
|
216
|
+
role="img"
|
|
217
|
+
width="1em"
|
|
218
|
+
height="1em"
|
|
219
|
+
>
|
|
220
|
+
<path
|
|
221
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
222
|
+
/>
|
|
223
|
+
</svg>
|
|
142
224
|
</span>
|
|
143
225
|
</button>
|
|
144
226
|
</div>
|
|
@@ -150,7 +232,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
150
232
|
aria-label="Go to previous page"
|
|
151
233
|
>
|
|
152
234
|
<span class="pf-v6-c-button__icon">
|
|
153
|
-
<
|
|
235
|
+
<svg
|
|
236
|
+
class="pf-v6-svg"
|
|
237
|
+
viewBox="0 0 256 512"
|
|
238
|
+
fill="currentColor"
|
|
239
|
+
aria-hidden="true"
|
|
240
|
+
role="img"
|
|
241
|
+
width="1em"
|
|
242
|
+
height="1em"
|
|
243
|
+
>
|
|
244
|
+
<path
|
|
245
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
246
|
+
/>
|
|
247
|
+
</svg>
|
|
154
248
|
</span>
|
|
155
249
|
</button>
|
|
156
250
|
</div>
|
|
@@ -173,7 +267,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
173
267
|
aria-label="Go to next page"
|
|
174
268
|
>
|
|
175
269
|
<span class="pf-v6-c-button__icon">
|
|
176
|
-
<
|
|
270
|
+
<svg
|
|
271
|
+
class="pf-v6-svg"
|
|
272
|
+
viewBox="0 0 256 512"
|
|
273
|
+
fill="currentColor"
|
|
274
|
+
aria-hidden="true"
|
|
275
|
+
role="img"
|
|
276
|
+
width="1em"
|
|
277
|
+
height="1em"
|
|
278
|
+
>
|
|
279
|
+
<path
|
|
280
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
281
|
+
/>
|
|
282
|
+
</svg>
|
|
177
283
|
</span>
|
|
178
284
|
</button>
|
|
179
285
|
</div>
|
|
@@ -185,7 +291,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
185
291
|
aria-label="Go to last page"
|
|
186
292
|
>
|
|
187
293
|
<span class="pf-v6-c-button__icon">
|
|
188
|
-
<
|
|
294
|
+
<svg
|
|
295
|
+
class="pf-v6-svg"
|
|
296
|
+
viewBox="0 0 448 512"
|
|
297
|
+
fill="currentColor"
|
|
298
|
+
aria-hidden="true"
|
|
299
|
+
role="img"
|
|
300
|
+
width="1em"
|
|
301
|
+
height="1em"
|
|
302
|
+
>
|
|
303
|
+
<path
|
|
304
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
305
|
+
/>
|
|
306
|
+
</svg>
|
|
189
307
|
</span>
|
|
190
308
|
</button>
|
|
191
309
|
</div>
|
|
@@ -217,7 +335,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
217
335
|
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
218
336
|
type="button"
|
|
219
337
|
aria-expanded="false"
|
|
220
|
-
aria-label="Menu toggle"
|
|
221
338
|
id="pagination-menu-toggle-top-indeterminate-example"
|
|
222
339
|
>
|
|
223
340
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -226,7 +343,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
226
343
|
</span>
|
|
227
344
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
228
345
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
229
|
-
<
|
|
346
|
+
<svg
|
|
347
|
+
class="pf-v6-svg"
|
|
348
|
+
viewBox="0 0 20 20"
|
|
349
|
+
fill="currentColor"
|
|
350
|
+
aria-hidden="true"
|
|
351
|
+
role="img"
|
|
352
|
+
width="1em"
|
|
353
|
+
height="1em"
|
|
354
|
+
>
|
|
355
|
+
<path
|
|
356
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
357
|
+
/>
|
|
358
|
+
</svg>
|
|
230
359
|
</span>
|
|
231
360
|
</span>
|
|
232
361
|
</button>
|
|
@@ -243,7 +372,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
243
372
|
aria-label="Go to first page"
|
|
244
373
|
>
|
|
245
374
|
<span class="pf-v6-c-button__icon">
|
|
246
|
-
<
|
|
375
|
+
<svg
|
|
376
|
+
class="pf-v6-svg"
|
|
377
|
+
viewBox="0 0 448 512"
|
|
378
|
+
fill="currentColor"
|
|
379
|
+
aria-hidden="true"
|
|
380
|
+
role="img"
|
|
381
|
+
width="1em"
|
|
382
|
+
height="1em"
|
|
383
|
+
>
|
|
384
|
+
<path
|
|
385
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
386
|
+
/>
|
|
387
|
+
</svg>
|
|
247
388
|
</span>
|
|
248
389
|
</button>
|
|
249
390
|
</div>
|
|
@@ -255,7 +396,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
255
396
|
aria-label="Go to previous page"
|
|
256
397
|
>
|
|
257
398
|
<span class="pf-v6-c-button__icon">
|
|
258
|
-
<
|
|
399
|
+
<svg
|
|
400
|
+
class="pf-v6-svg"
|
|
401
|
+
viewBox="0 0 256 512"
|
|
402
|
+
fill="currentColor"
|
|
403
|
+
aria-hidden="true"
|
|
404
|
+
role="img"
|
|
405
|
+
width="1em"
|
|
406
|
+
height="1em"
|
|
407
|
+
>
|
|
408
|
+
<path
|
|
409
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
410
|
+
/>
|
|
411
|
+
</svg>
|
|
259
412
|
</span>
|
|
260
413
|
</button>
|
|
261
414
|
</div>
|
|
@@ -277,7 +430,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
277
430
|
aria-label="Go to next page"
|
|
278
431
|
>
|
|
279
432
|
<span class="pf-v6-c-button__icon">
|
|
280
|
-
<
|
|
433
|
+
<svg
|
|
434
|
+
class="pf-v6-svg"
|
|
435
|
+
viewBox="0 0 256 512"
|
|
436
|
+
fill="currentColor"
|
|
437
|
+
aria-hidden="true"
|
|
438
|
+
role="img"
|
|
439
|
+
width="1em"
|
|
440
|
+
height="1em"
|
|
441
|
+
>
|
|
442
|
+
<path
|
|
443
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
444
|
+
/>
|
|
445
|
+
</svg>
|
|
281
446
|
</span>
|
|
282
447
|
</button>
|
|
283
448
|
</div>
|
|
@@ -289,7 +454,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
289
454
|
aria-label="Go to last page"
|
|
290
455
|
>
|
|
291
456
|
<span class="pf-v6-c-button__icon">
|
|
292
|
-
<
|
|
457
|
+
<svg
|
|
458
|
+
class="pf-v6-svg"
|
|
459
|
+
viewBox="0 0 448 512"
|
|
460
|
+
fill="currentColor"
|
|
461
|
+
aria-hidden="true"
|
|
462
|
+
role="img"
|
|
463
|
+
width="1em"
|
|
464
|
+
height="1em"
|
|
465
|
+
>
|
|
466
|
+
<path
|
|
467
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
468
|
+
/>
|
|
469
|
+
</svg>
|
|
293
470
|
</span>
|
|
294
471
|
</button>
|
|
295
472
|
</div>
|
|
@@ -317,7 +494,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
317
494
|
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
318
495
|
type="button"
|
|
319
496
|
aria-expanded="false"
|
|
320
|
-
aria-label="Menu toggle"
|
|
321
497
|
id="pagination-menu-toggle-bottom-example"
|
|
322
498
|
>
|
|
323
499
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -326,7 +502,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
326
502
|
</span>
|
|
327
503
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
328
504
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
329
|
-
<
|
|
505
|
+
<svg
|
|
506
|
+
class="pf-v6-svg"
|
|
507
|
+
viewBox="0 0 20 20"
|
|
508
|
+
fill="currentColor"
|
|
509
|
+
aria-hidden="true"
|
|
510
|
+
role="img"
|
|
511
|
+
width="1em"
|
|
512
|
+
height="1em"
|
|
513
|
+
>
|
|
514
|
+
<path
|
|
515
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
516
|
+
/>
|
|
517
|
+
</svg>
|
|
330
518
|
</span>
|
|
331
519
|
</span>
|
|
332
520
|
</button>
|
|
@@ -343,7 +531,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
343
531
|
aria-label="Go to first page"
|
|
344
532
|
>
|
|
345
533
|
<span class="pf-v6-c-button__icon">
|
|
346
|
-
<
|
|
534
|
+
<svg
|
|
535
|
+
class="pf-v6-svg"
|
|
536
|
+
viewBox="0 0 448 512"
|
|
537
|
+
fill="currentColor"
|
|
538
|
+
aria-hidden="true"
|
|
539
|
+
role="img"
|
|
540
|
+
width="1em"
|
|
541
|
+
height="1em"
|
|
542
|
+
>
|
|
543
|
+
<path
|
|
544
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
545
|
+
/>
|
|
546
|
+
</svg>
|
|
347
547
|
</span>
|
|
348
548
|
</button>
|
|
349
549
|
</div>
|
|
@@ -355,7 +555,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
355
555
|
aria-label="Go to previous page"
|
|
356
556
|
>
|
|
357
557
|
<span class="pf-v6-c-button__icon">
|
|
358
|
-
<
|
|
558
|
+
<svg
|
|
559
|
+
class="pf-v6-svg"
|
|
560
|
+
viewBox="0 0 256 512"
|
|
561
|
+
fill="currentColor"
|
|
562
|
+
aria-hidden="true"
|
|
563
|
+
role="img"
|
|
564
|
+
width="1em"
|
|
565
|
+
height="1em"
|
|
566
|
+
>
|
|
567
|
+
<path
|
|
568
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
569
|
+
/>
|
|
570
|
+
</svg>
|
|
359
571
|
</span>
|
|
360
572
|
</button>
|
|
361
573
|
</div>
|
|
@@ -378,7 +590,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
378
590
|
aria-label="Go to next page"
|
|
379
591
|
>
|
|
380
592
|
<span class="pf-v6-c-button__icon">
|
|
381
|
-
<
|
|
593
|
+
<svg
|
|
594
|
+
class="pf-v6-svg"
|
|
595
|
+
viewBox="0 0 256 512"
|
|
596
|
+
fill="currentColor"
|
|
597
|
+
aria-hidden="true"
|
|
598
|
+
role="img"
|
|
599
|
+
width="1em"
|
|
600
|
+
height="1em"
|
|
601
|
+
>
|
|
602
|
+
<path
|
|
603
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
604
|
+
/>
|
|
605
|
+
</svg>
|
|
382
606
|
</span>
|
|
383
607
|
</button>
|
|
384
608
|
</div>
|
|
@@ -390,7 +614,179 @@ cssPrefix: pf-v6-c-pagination
|
|
|
390
614
|
aria-label="Go to last page"
|
|
391
615
|
>
|
|
392
616
|
<span class="pf-v6-c-button__icon">
|
|
393
|
-
<
|
|
617
|
+
<svg
|
|
618
|
+
class="pf-v6-svg"
|
|
619
|
+
viewBox="0 0 448 512"
|
|
620
|
+
fill="currentColor"
|
|
621
|
+
aria-hidden="true"
|
|
622
|
+
role="img"
|
|
623
|
+
width="1em"
|
|
624
|
+
height="1em"
|
|
625
|
+
>
|
|
626
|
+
<path
|
|
627
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
628
|
+
/>
|
|
629
|
+
</svg>
|
|
630
|
+
</span>
|
|
631
|
+
</button>
|
|
632
|
+
</div>
|
|
633
|
+
</nav>
|
|
634
|
+
</div>
|
|
635
|
+
|
|
636
|
+
```
|
|
637
|
+
|
|
638
|
+
### Bottom plain
|
|
639
|
+
|
|
640
|
+
```html
|
|
641
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
642
|
+
<br />
|
|
643
|
+
<br />
|
|
644
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
645
|
+
<br />
|
|
646
|
+
<br />
|
|
647
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
648
|
+
<br />
|
|
649
|
+
<br />
|
|
650
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
651
|
+
<div class="pf-v6-c-pagination pf-m-plain pf-m-bottom">
|
|
652
|
+
<div class="pf-v6-c-pagination__page-menu">
|
|
653
|
+
<button
|
|
654
|
+
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
655
|
+
type="button"
|
|
656
|
+
aria-expanded="false"
|
|
657
|
+
id="pagination-plain-bottom-menu-toggle"
|
|
658
|
+
>
|
|
659
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
660
|
+
<b>1 - 10</b> of
|
|
661
|
+
<b>36</b>
|
|
662
|
+
</span>
|
|
663
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
664
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
665
|
+
<svg
|
|
666
|
+
class="pf-v6-svg"
|
|
667
|
+
viewBox="0 0 20 20"
|
|
668
|
+
fill="currentColor"
|
|
669
|
+
aria-hidden="true"
|
|
670
|
+
role="img"
|
|
671
|
+
width="1em"
|
|
672
|
+
height="1em"
|
|
673
|
+
>
|
|
674
|
+
<path
|
|
675
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
676
|
+
/>
|
|
677
|
+
</svg>
|
|
678
|
+
</span>
|
|
679
|
+
</span>
|
|
680
|
+
</button>
|
|
681
|
+
</div>
|
|
682
|
+
<nav
|
|
683
|
+
class="pf-v6-c-pagination__nav"
|
|
684
|
+
aria-label="Pagination nav - plain bottom example"
|
|
685
|
+
>
|
|
686
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
687
|
+
<button
|
|
688
|
+
class="pf-v6-c-button pf-m-plain"
|
|
689
|
+
type="button"
|
|
690
|
+
disabled
|
|
691
|
+
aria-label="Go to first page"
|
|
692
|
+
>
|
|
693
|
+
<span class="pf-v6-c-button__icon">
|
|
694
|
+
<svg
|
|
695
|
+
class="pf-v6-svg"
|
|
696
|
+
viewBox="0 0 448 512"
|
|
697
|
+
fill="currentColor"
|
|
698
|
+
aria-hidden="true"
|
|
699
|
+
role="img"
|
|
700
|
+
width="1em"
|
|
701
|
+
height="1em"
|
|
702
|
+
>
|
|
703
|
+
<path
|
|
704
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
705
|
+
/>
|
|
706
|
+
</svg>
|
|
707
|
+
</span>
|
|
708
|
+
</button>
|
|
709
|
+
</div>
|
|
710
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
711
|
+
<button
|
|
712
|
+
class="pf-v6-c-button pf-m-plain"
|
|
713
|
+
type="button"
|
|
714
|
+
disabled
|
|
715
|
+
aria-label="Go to previous page"
|
|
716
|
+
>
|
|
717
|
+
<span class="pf-v6-c-button__icon">
|
|
718
|
+
<svg
|
|
719
|
+
class="pf-v6-svg"
|
|
720
|
+
viewBox="0 0 256 512"
|
|
721
|
+
fill="currentColor"
|
|
722
|
+
aria-hidden="true"
|
|
723
|
+
role="img"
|
|
724
|
+
width="1em"
|
|
725
|
+
height="1em"
|
|
726
|
+
>
|
|
727
|
+
<path
|
|
728
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
729
|
+
/>
|
|
730
|
+
</svg>
|
|
731
|
+
</span>
|
|
732
|
+
</button>
|
|
733
|
+
</div>
|
|
734
|
+
<div class="pf-v6-c-pagination__nav-page-select">
|
|
735
|
+
<span class="pf-v6-c-form-control">
|
|
736
|
+
<input
|
|
737
|
+
aria-label="Current page"
|
|
738
|
+
type="number"
|
|
739
|
+
min="1"
|
|
740
|
+
max="4"
|
|
741
|
+
value="1"
|
|
742
|
+
/>
|
|
743
|
+
</span>
|
|
744
|
+
<span aria-hidden="true">of 4</span>
|
|
745
|
+
</div>
|
|
746
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
747
|
+
<button
|
|
748
|
+
class="pf-v6-c-button pf-m-plain"
|
|
749
|
+
type="button"
|
|
750
|
+
aria-label="Go to next page"
|
|
751
|
+
>
|
|
752
|
+
<span class="pf-v6-c-button__icon">
|
|
753
|
+
<svg
|
|
754
|
+
class="pf-v6-svg"
|
|
755
|
+
viewBox="0 0 256 512"
|
|
756
|
+
fill="currentColor"
|
|
757
|
+
aria-hidden="true"
|
|
758
|
+
role="img"
|
|
759
|
+
width="1em"
|
|
760
|
+
height="1em"
|
|
761
|
+
>
|
|
762
|
+
<path
|
|
763
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
764
|
+
/>
|
|
765
|
+
</svg>
|
|
766
|
+
</span>
|
|
767
|
+
</button>
|
|
768
|
+
</div>
|
|
769
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
770
|
+
<button
|
|
771
|
+
class="pf-v6-c-button pf-m-plain"
|
|
772
|
+
type="button"
|
|
773
|
+
disabled
|
|
774
|
+
aria-label="Go to last page"
|
|
775
|
+
>
|
|
776
|
+
<span class="pf-v6-c-button__icon">
|
|
777
|
+
<svg
|
|
778
|
+
class="pf-v6-svg"
|
|
779
|
+
viewBox="0 0 448 512"
|
|
780
|
+
fill="currentColor"
|
|
781
|
+
aria-hidden="true"
|
|
782
|
+
role="img"
|
|
783
|
+
width="1em"
|
|
784
|
+
height="1em"
|
|
785
|
+
>
|
|
786
|
+
<path
|
|
787
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
788
|
+
/>
|
|
789
|
+
</svg>
|
|
394
790
|
</span>
|
|
395
791
|
</button>
|
|
396
792
|
</div>
|
|
@@ -412,13 +808,12 @@ cssPrefix: pf-v6-c-pagination
|
|
|
412
808
|
<br />
|
|
413
809
|
<br />
|
|
414
810
|
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
415
|
-
<div class="pf-v6-c-pagination pf-m-
|
|
811
|
+
<div class="pf-v6-c-pagination pf-m-sticky pf-m-bottom">
|
|
416
812
|
<div class="pf-v6-c-pagination__page-menu">
|
|
417
813
|
<button
|
|
418
814
|
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
419
815
|
type="button"
|
|
420
816
|
aria-expanded="false"
|
|
421
|
-
aria-label="Menu toggle"
|
|
422
817
|
id="pagination-menu-toggle-bottom-sticky-example"
|
|
423
818
|
>
|
|
424
819
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -427,7 +822,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
427
822
|
</span>
|
|
428
823
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
429
824
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
430
|
-
<
|
|
825
|
+
<svg
|
|
826
|
+
class="pf-v6-svg"
|
|
827
|
+
viewBox="0 0 20 20"
|
|
828
|
+
fill="currentColor"
|
|
829
|
+
aria-hidden="true"
|
|
830
|
+
role="img"
|
|
831
|
+
width="1em"
|
|
832
|
+
height="1em"
|
|
833
|
+
>
|
|
834
|
+
<path
|
|
835
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
836
|
+
/>
|
|
837
|
+
</svg>
|
|
431
838
|
</span>
|
|
432
839
|
</span>
|
|
433
840
|
</button>
|
|
@@ -444,7 +851,347 @@ cssPrefix: pf-v6-c-pagination
|
|
|
444
851
|
aria-label="Go to first page"
|
|
445
852
|
>
|
|
446
853
|
<span class="pf-v6-c-button__icon">
|
|
447
|
-
<
|
|
854
|
+
<svg
|
|
855
|
+
class="pf-v6-svg"
|
|
856
|
+
viewBox="0 0 448 512"
|
|
857
|
+
fill="currentColor"
|
|
858
|
+
aria-hidden="true"
|
|
859
|
+
role="img"
|
|
860
|
+
width="1em"
|
|
861
|
+
height="1em"
|
|
862
|
+
>
|
|
863
|
+
<path
|
|
864
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
865
|
+
/>
|
|
866
|
+
</svg>
|
|
867
|
+
</span>
|
|
868
|
+
</button>
|
|
869
|
+
</div>
|
|
870
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
871
|
+
<button
|
|
872
|
+
class="pf-v6-c-button pf-m-plain"
|
|
873
|
+
type="button"
|
|
874
|
+
disabled
|
|
875
|
+
aria-label="Go to previous page"
|
|
876
|
+
>
|
|
877
|
+
<span class="pf-v6-c-button__icon">
|
|
878
|
+
<svg
|
|
879
|
+
class="pf-v6-svg"
|
|
880
|
+
viewBox="0 0 256 512"
|
|
881
|
+
fill="currentColor"
|
|
882
|
+
aria-hidden="true"
|
|
883
|
+
role="img"
|
|
884
|
+
width="1em"
|
|
885
|
+
height="1em"
|
|
886
|
+
>
|
|
887
|
+
<path
|
|
888
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
889
|
+
/>
|
|
890
|
+
</svg>
|
|
891
|
+
</span>
|
|
892
|
+
</button>
|
|
893
|
+
</div>
|
|
894
|
+
<div class="pf-v6-c-pagination__nav-page-select">
|
|
895
|
+
<span class="pf-v6-c-form-control">
|
|
896
|
+
<input
|
|
897
|
+
aria-label="Current page"
|
|
898
|
+
type="number"
|
|
899
|
+
min="1"
|
|
900
|
+
max="4"
|
|
901
|
+
value="1"
|
|
902
|
+
/>
|
|
903
|
+
</span>
|
|
904
|
+
<span aria-hidden="true">of 4</span>
|
|
905
|
+
</div>
|
|
906
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
907
|
+
<button
|
|
908
|
+
class="pf-v6-c-button pf-m-plain"
|
|
909
|
+
type="button"
|
|
910
|
+
aria-label="Go to next page"
|
|
911
|
+
>
|
|
912
|
+
<span class="pf-v6-c-button__icon">
|
|
913
|
+
<svg
|
|
914
|
+
class="pf-v6-svg"
|
|
915
|
+
viewBox="0 0 256 512"
|
|
916
|
+
fill="currentColor"
|
|
917
|
+
aria-hidden="true"
|
|
918
|
+
role="img"
|
|
919
|
+
width="1em"
|
|
920
|
+
height="1em"
|
|
921
|
+
>
|
|
922
|
+
<path
|
|
923
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
924
|
+
/>
|
|
925
|
+
</svg>
|
|
926
|
+
</span>
|
|
927
|
+
</button>
|
|
928
|
+
</div>
|
|
929
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
930
|
+
<button
|
|
931
|
+
class="pf-v6-c-button pf-m-plain"
|
|
932
|
+
type="button"
|
|
933
|
+
disabled
|
|
934
|
+
aria-label="Go to last page"
|
|
935
|
+
>
|
|
936
|
+
<span class="pf-v6-c-button__icon">
|
|
937
|
+
<svg
|
|
938
|
+
class="pf-v6-svg"
|
|
939
|
+
viewBox="0 0 448 512"
|
|
940
|
+
fill="currentColor"
|
|
941
|
+
aria-hidden="true"
|
|
942
|
+
role="img"
|
|
943
|
+
width="1em"
|
|
944
|
+
height="1em"
|
|
945
|
+
>
|
|
946
|
+
<path
|
|
947
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
948
|
+
/>
|
|
949
|
+
</svg>
|
|
950
|
+
</span>
|
|
951
|
+
</button>
|
|
952
|
+
</div>
|
|
953
|
+
</nav>
|
|
954
|
+
</div>
|
|
955
|
+
|
|
956
|
+
```
|
|
957
|
+
|
|
958
|
+
### Top sticky with base and stuck
|
|
959
|
+
|
|
960
|
+
This example shows the use of `.pf-m-sticky-base` and `.pf-m-sticky-stuck`. `.pf-m-sticky-stuck` can be applied dynamically as the page has scrolled to only show sticky styles when the pagination is "stuck" and floating above the content.
|
|
961
|
+
|
|
962
|
+
```html
|
|
963
|
+
<div class="pf-v6-c-pagination pf-m-sticky-stuck pf-m-sticky-base">
|
|
964
|
+
<div class="pf-v6-c-pagination__total-items">
|
|
965
|
+
<b>1 - 10</b> of
|
|
966
|
+
<b>36</b>
|
|
967
|
+
</div>
|
|
968
|
+
<div class="pf-v6-c-pagination__page-menu">
|
|
969
|
+
<button
|
|
970
|
+
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
971
|
+
type="button"
|
|
972
|
+
aria-expanded="false"
|
|
973
|
+
id="pagination-top-sticky-base-stuck-menu-toggle"
|
|
974
|
+
>
|
|
975
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
976
|
+
<b>1 - 10</b> of
|
|
977
|
+
<b>36</b>
|
|
978
|
+
</span>
|
|
979
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
980
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
981
|
+
<svg
|
|
982
|
+
class="pf-v6-svg"
|
|
983
|
+
viewBox="0 0 20 20"
|
|
984
|
+
fill="currentColor"
|
|
985
|
+
aria-hidden="true"
|
|
986
|
+
role="img"
|
|
987
|
+
width="1em"
|
|
988
|
+
height="1em"
|
|
989
|
+
>
|
|
990
|
+
<path
|
|
991
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
992
|
+
/>
|
|
993
|
+
</svg>
|
|
994
|
+
</span>
|
|
995
|
+
</span>
|
|
996
|
+
</button>
|
|
997
|
+
</div>
|
|
998
|
+
<nav
|
|
999
|
+
class="pf-v6-c-pagination__nav"
|
|
1000
|
+
aria-label="Pagination nav - top sticky with base and stuck example"
|
|
1001
|
+
>
|
|
1002
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
1003
|
+
<button
|
|
1004
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1005
|
+
type="button"
|
|
1006
|
+
disabled
|
|
1007
|
+
aria-label="Go to first page"
|
|
1008
|
+
>
|
|
1009
|
+
<span class="pf-v6-c-button__icon">
|
|
1010
|
+
<svg
|
|
1011
|
+
class="pf-v6-svg"
|
|
1012
|
+
viewBox="0 0 448 512"
|
|
1013
|
+
fill="currentColor"
|
|
1014
|
+
aria-hidden="true"
|
|
1015
|
+
role="img"
|
|
1016
|
+
width="1em"
|
|
1017
|
+
height="1em"
|
|
1018
|
+
>
|
|
1019
|
+
<path
|
|
1020
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
1021
|
+
/>
|
|
1022
|
+
</svg>
|
|
1023
|
+
</span>
|
|
1024
|
+
</button>
|
|
1025
|
+
</div>
|
|
1026
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
1027
|
+
<button
|
|
1028
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1029
|
+
type="button"
|
|
1030
|
+
disabled
|
|
1031
|
+
aria-label="Go to previous page"
|
|
1032
|
+
>
|
|
1033
|
+
<span class="pf-v6-c-button__icon">
|
|
1034
|
+
<svg
|
|
1035
|
+
class="pf-v6-svg"
|
|
1036
|
+
viewBox="0 0 256 512"
|
|
1037
|
+
fill="currentColor"
|
|
1038
|
+
aria-hidden="true"
|
|
1039
|
+
role="img"
|
|
1040
|
+
width="1em"
|
|
1041
|
+
height="1em"
|
|
1042
|
+
>
|
|
1043
|
+
<path
|
|
1044
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
1045
|
+
/>
|
|
1046
|
+
</svg>
|
|
1047
|
+
</span>
|
|
1048
|
+
</button>
|
|
1049
|
+
</div>
|
|
1050
|
+
<div class="pf-v6-c-pagination__nav-page-select">
|
|
1051
|
+
<span class="pf-v6-c-form-control">
|
|
1052
|
+
<input
|
|
1053
|
+
aria-label="Current page"
|
|
1054
|
+
type="number"
|
|
1055
|
+
min="1"
|
|
1056
|
+
max="4"
|
|
1057
|
+
value="1"
|
|
1058
|
+
/>
|
|
1059
|
+
</span>
|
|
1060
|
+
<span aria-hidden="true">of 4</span>
|
|
1061
|
+
</div>
|
|
1062
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
1063
|
+
<button
|
|
1064
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1065
|
+
type="button"
|
|
1066
|
+
aria-label="Go to next page"
|
|
1067
|
+
>
|
|
1068
|
+
<span class="pf-v6-c-button__icon">
|
|
1069
|
+
<svg
|
|
1070
|
+
class="pf-v6-svg"
|
|
1071
|
+
viewBox="0 0 256 512"
|
|
1072
|
+
fill="currentColor"
|
|
1073
|
+
aria-hidden="true"
|
|
1074
|
+
role="img"
|
|
1075
|
+
width="1em"
|
|
1076
|
+
height="1em"
|
|
1077
|
+
>
|
|
1078
|
+
<path
|
|
1079
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
1080
|
+
/>
|
|
1081
|
+
</svg>
|
|
1082
|
+
</span>
|
|
1083
|
+
</button>
|
|
1084
|
+
</div>
|
|
1085
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
1086
|
+
<button
|
|
1087
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1088
|
+
type="button"
|
|
1089
|
+
disabled
|
|
1090
|
+
aria-label="Go to last page"
|
|
1091
|
+
>
|
|
1092
|
+
<span class="pf-v6-c-button__icon">
|
|
1093
|
+
<svg
|
|
1094
|
+
class="pf-v6-svg"
|
|
1095
|
+
viewBox="0 0 448 512"
|
|
1096
|
+
fill="currentColor"
|
|
1097
|
+
aria-hidden="true"
|
|
1098
|
+
role="img"
|
|
1099
|
+
width="1em"
|
|
1100
|
+
height="1em"
|
|
1101
|
+
>
|
|
1102
|
+
<path
|
|
1103
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
1104
|
+
/>
|
|
1105
|
+
</svg>
|
|
1106
|
+
</span>
|
|
1107
|
+
</button>
|
|
1108
|
+
</div>
|
|
1109
|
+
</nav>
|
|
1110
|
+
</div>
|
|
1111
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1112
|
+
<br />
|
|
1113
|
+
<br />
|
|
1114
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1115
|
+
<br />
|
|
1116
|
+
<br />
|
|
1117
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1118
|
+
<br />
|
|
1119
|
+
<br />
|
|
1120
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1121
|
+
|
|
1122
|
+
```
|
|
1123
|
+
|
|
1124
|
+
### Bottom sticky with base and stuck
|
|
1125
|
+
|
|
1126
|
+
This example shows the use of `.pf-m-sticky-base` and `.pf-m-sticky-stuck` on bottom pagination. Like top pagination,`.pf-m-sticky-stuck` can be applied dynamically as the page has scrolled to only show sticky styles when the bottom pagination is "stuck" and floating above the content.
|
|
1127
|
+
|
|
1128
|
+
```html
|
|
1129
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1130
|
+
<br />
|
|
1131
|
+
<br />
|
|
1132
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1133
|
+
<br />
|
|
1134
|
+
<br />
|
|
1135
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1136
|
+
<br />
|
|
1137
|
+
<br />
|
|
1138
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1139
|
+
<div class="pf-v6-c-pagination pf-m-sticky-stuck pf-m-sticky-base pf-m-bottom">
|
|
1140
|
+
<div class="pf-v6-c-pagination__page-menu">
|
|
1141
|
+
<button
|
|
1142
|
+
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
1143
|
+
type="button"
|
|
1144
|
+
aria-expanded="false"
|
|
1145
|
+
id="pagination-bottom-sticky-base-stuck-menu-toggle"
|
|
1146
|
+
>
|
|
1147
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
1148
|
+
<b>1 - 10</b> of
|
|
1149
|
+
<b>36</b>
|
|
1150
|
+
</span>
|
|
1151
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1152
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1153
|
+
<svg
|
|
1154
|
+
class="pf-v6-svg"
|
|
1155
|
+
viewBox="0 0 20 20"
|
|
1156
|
+
fill="currentColor"
|
|
1157
|
+
aria-hidden="true"
|
|
1158
|
+
role="img"
|
|
1159
|
+
width="1em"
|
|
1160
|
+
height="1em"
|
|
1161
|
+
>
|
|
1162
|
+
<path
|
|
1163
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
1164
|
+
/>
|
|
1165
|
+
</svg>
|
|
1166
|
+
</span>
|
|
1167
|
+
</span>
|
|
1168
|
+
</button>
|
|
1169
|
+
</div>
|
|
1170
|
+
<nav
|
|
1171
|
+
class="pf-v6-c-pagination__nav"
|
|
1172
|
+
aria-label="Pagination nav - bottom sticky with base and stuck example"
|
|
1173
|
+
>
|
|
1174
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
1175
|
+
<button
|
|
1176
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1177
|
+
type="button"
|
|
1178
|
+
disabled
|
|
1179
|
+
aria-label="Go to first page"
|
|
1180
|
+
>
|
|
1181
|
+
<span class="pf-v6-c-button__icon">
|
|
1182
|
+
<svg
|
|
1183
|
+
class="pf-v6-svg"
|
|
1184
|
+
viewBox="0 0 448 512"
|
|
1185
|
+
fill="currentColor"
|
|
1186
|
+
aria-hidden="true"
|
|
1187
|
+
role="img"
|
|
1188
|
+
width="1em"
|
|
1189
|
+
height="1em"
|
|
1190
|
+
>
|
|
1191
|
+
<path
|
|
1192
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
1193
|
+
/>
|
|
1194
|
+
</svg>
|
|
448
1195
|
</span>
|
|
449
1196
|
</button>
|
|
450
1197
|
</div>
|
|
@@ -456,7 +1203,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
456
1203
|
aria-label="Go to previous page"
|
|
457
1204
|
>
|
|
458
1205
|
<span class="pf-v6-c-button__icon">
|
|
459
|
-
<
|
|
1206
|
+
<svg
|
|
1207
|
+
class="pf-v6-svg"
|
|
1208
|
+
viewBox="0 0 256 512"
|
|
1209
|
+
fill="currentColor"
|
|
1210
|
+
aria-hidden="true"
|
|
1211
|
+
role="img"
|
|
1212
|
+
width="1em"
|
|
1213
|
+
height="1em"
|
|
1214
|
+
>
|
|
1215
|
+
<path
|
|
1216
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
1217
|
+
/>
|
|
1218
|
+
</svg>
|
|
460
1219
|
</span>
|
|
461
1220
|
</button>
|
|
462
1221
|
</div>
|
|
@@ -479,7 +1238,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
479
1238
|
aria-label="Go to next page"
|
|
480
1239
|
>
|
|
481
1240
|
<span class="pf-v6-c-button__icon">
|
|
482
|
-
<
|
|
1241
|
+
<svg
|
|
1242
|
+
class="pf-v6-svg"
|
|
1243
|
+
viewBox="0 0 256 512"
|
|
1244
|
+
fill="currentColor"
|
|
1245
|
+
aria-hidden="true"
|
|
1246
|
+
role="img"
|
|
1247
|
+
width="1em"
|
|
1248
|
+
height="1em"
|
|
1249
|
+
>
|
|
1250
|
+
<path
|
|
1251
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
1252
|
+
/>
|
|
1253
|
+
</svg>
|
|
483
1254
|
</span>
|
|
484
1255
|
</button>
|
|
485
1256
|
</div>
|
|
@@ -491,7 +1262,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
491
1262
|
aria-label="Go to last page"
|
|
492
1263
|
>
|
|
493
1264
|
<span class="pf-v6-c-button__icon">
|
|
494
|
-
<
|
|
1265
|
+
<svg
|
|
1266
|
+
class="pf-v6-svg"
|
|
1267
|
+
viewBox="0 0 448 512"
|
|
1268
|
+
fill="currentColor"
|
|
1269
|
+
aria-hidden="true"
|
|
1270
|
+
role="img"
|
|
1271
|
+
width="1em"
|
|
1272
|
+
height="1em"
|
|
1273
|
+
>
|
|
1274
|
+
<path
|
|
1275
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
1276
|
+
/>
|
|
1277
|
+
</svg>
|
|
495
1278
|
</span>
|
|
496
1279
|
</button>
|
|
497
1280
|
</div>
|
|
@@ -513,13 +1296,12 @@ cssPrefix: pf-v6-c-pagination
|
|
|
513
1296
|
<br />
|
|
514
1297
|
<br />
|
|
515
1298
|
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
516
|
-
<div class="pf-v6-c-pagination pf-m-
|
|
1299
|
+
<div class="pf-v6-c-pagination pf-m-static pf-m-bottom">
|
|
517
1300
|
<div class="pf-v6-c-pagination__page-menu">
|
|
518
1301
|
<button
|
|
519
1302
|
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
520
1303
|
type="button"
|
|
521
1304
|
aria-expanded="false"
|
|
522
|
-
aria-label="Menu toggle"
|
|
523
1305
|
id="pagination-menu-toggle-bottom-sticky-example"
|
|
524
1306
|
>
|
|
525
1307
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -528,7 +1310,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
528
1310
|
</span>
|
|
529
1311
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
530
1312
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
531
|
-
<
|
|
1313
|
+
<svg
|
|
1314
|
+
class="pf-v6-svg"
|
|
1315
|
+
viewBox="0 0 20 20"
|
|
1316
|
+
fill="currentColor"
|
|
1317
|
+
aria-hidden="true"
|
|
1318
|
+
role="img"
|
|
1319
|
+
width="1em"
|
|
1320
|
+
height="1em"
|
|
1321
|
+
>
|
|
1322
|
+
<path
|
|
1323
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
1324
|
+
/>
|
|
1325
|
+
</svg>
|
|
532
1326
|
</span>
|
|
533
1327
|
</span>
|
|
534
1328
|
</button>
|
|
@@ -545,7 +1339,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
545
1339
|
aria-label="Go to first page"
|
|
546
1340
|
>
|
|
547
1341
|
<span class="pf-v6-c-button__icon">
|
|
548
|
-
<
|
|
1342
|
+
<svg
|
|
1343
|
+
class="pf-v6-svg"
|
|
1344
|
+
viewBox="0 0 448 512"
|
|
1345
|
+
fill="currentColor"
|
|
1346
|
+
aria-hidden="true"
|
|
1347
|
+
role="img"
|
|
1348
|
+
width="1em"
|
|
1349
|
+
height="1em"
|
|
1350
|
+
>
|
|
1351
|
+
<path
|
|
1352
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
1353
|
+
/>
|
|
1354
|
+
</svg>
|
|
549
1355
|
</span>
|
|
550
1356
|
</button>
|
|
551
1357
|
</div>
|
|
@@ -557,7 +1363,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
557
1363
|
aria-label="Go to previous page"
|
|
558
1364
|
>
|
|
559
1365
|
<span class="pf-v6-c-button__icon">
|
|
560
|
-
<
|
|
1366
|
+
<svg
|
|
1367
|
+
class="pf-v6-svg"
|
|
1368
|
+
viewBox="0 0 256 512"
|
|
1369
|
+
fill="currentColor"
|
|
1370
|
+
aria-hidden="true"
|
|
1371
|
+
role="img"
|
|
1372
|
+
width="1em"
|
|
1373
|
+
height="1em"
|
|
1374
|
+
>
|
|
1375
|
+
<path
|
|
1376
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
1377
|
+
/>
|
|
1378
|
+
</svg>
|
|
561
1379
|
</span>
|
|
562
1380
|
</button>
|
|
563
1381
|
</div>
|
|
@@ -580,7 +1398,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
580
1398
|
aria-label="Go to next page"
|
|
581
1399
|
>
|
|
582
1400
|
<span class="pf-v6-c-button__icon">
|
|
583
|
-
<
|
|
1401
|
+
<svg
|
|
1402
|
+
class="pf-v6-svg"
|
|
1403
|
+
viewBox="0 0 256 512"
|
|
1404
|
+
fill="currentColor"
|
|
1405
|
+
aria-hidden="true"
|
|
1406
|
+
role="img"
|
|
1407
|
+
width="1em"
|
|
1408
|
+
height="1em"
|
|
1409
|
+
>
|
|
1410
|
+
<path
|
|
1411
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
1412
|
+
/>
|
|
1413
|
+
</svg>
|
|
584
1414
|
</span>
|
|
585
1415
|
</button>
|
|
586
1416
|
</div>
|
|
@@ -592,7 +1422,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
592
1422
|
aria-label="Go to last page"
|
|
593
1423
|
>
|
|
594
1424
|
<span class="pf-v6-c-button__icon">
|
|
595
|
-
<
|
|
1425
|
+
<svg
|
|
1426
|
+
class="pf-v6-svg"
|
|
1427
|
+
viewBox="0 0 448 512"
|
|
1428
|
+
fill="currentColor"
|
|
1429
|
+
aria-hidden="true"
|
|
1430
|
+
role="img"
|
|
1431
|
+
width="1em"
|
|
1432
|
+
height="1em"
|
|
1433
|
+
>
|
|
1434
|
+
<path
|
|
1435
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
1436
|
+
/>
|
|
1437
|
+
</svg>
|
|
596
1438
|
</span>
|
|
597
1439
|
</button>
|
|
598
1440
|
</div>
|
|
@@ -615,7 +1457,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
615
1457
|
type="button"
|
|
616
1458
|
aria-expanded="false"
|
|
617
1459
|
disabled
|
|
618
|
-
aria-label="Menu toggle"
|
|
619
1460
|
id="pagination-menu-toggle-top-disabled-example"
|
|
620
1461
|
>
|
|
621
1462
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -624,7 +1465,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
624
1465
|
</span>
|
|
625
1466
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
626
1467
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
627
|
-
<
|
|
1468
|
+
<svg
|
|
1469
|
+
class="pf-v6-svg"
|
|
1470
|
+
viewBox="0 0 20 20"
|
|
1471
|
+
fill="currentColor"
|
|
1472
|
+
aria-hidden="true"
|
|
1473
|
+
role="img"
|
|
1474
|
+
width="1em"
|
|
1475
|
+
height="1em"
|
|
1476
|
+
>
|
|
1477
|
+
<path
|
|
1478
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
1479
|
+
/>
|
|
1480
|
+
</svg>
|
|
628
1481
|
</span>
|
|
629
1482
|
</span>
|
|
630
1483
|
</button>
|
|
@@ -641,7 +1494,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
641
1494
|
aria-label="Go to first page"
|
|
642
1495
|
>
|
|
643
1496
|
<span class="pf-v6-c-button__icon">
|
|
644
|
-
<
|
|
1497
|
+
<svg
|
|
1498
|
+
class="pf-v6-svg"
|
|
1499
|
+
viewBox="0 0 448 512"
|
|
1500
|
+
fill="currentColor"
|
|
1501
|
+
aria-hidden="true"
|
|
1502
|
+
role="img"
|
|
1503
|
+
width="1em"
|
|
1504
|
+
height="1em"
|
|
1505
|
+
>
|
|
1506
|
+
<path
|
|
1507
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
1508
|
+
/>
|
|
1509
|
+
</svg>
|
|
645
1510
|
</span>
|
|
646
1511
|
</button>
|
|
647
1512
|
</div>
|
|
@@ -653,7 +1518,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
653
1518
|
aria-label="Go to previous page"
|
|
654
1519
|
>
|
|
655
1520
|
<span class="pf-v6-c-button__icon">
|
|
656
|
-
<
|
|
1521
|
+
<svg
|
|
1522
|
+
class="pf-v6-svg"
|
|
1523
|
+
viewBox="0 0 256 512"
|
|
1524
|
+
fill="currentColor"
|
|
1525
|
+
aria-hidden="true"
|
|
1526
|
+
role="img"
|
|
1527
|
+
width="1em"
|
|
1528
|
+
height="1em"
|
|
1529
|
+
>
|
|
1530
|
+
<path
|
|
1531
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
1532
|
+
/>
|
|
1533
|
+
</svg>
|
|
657
1534
|
</span>
|
|
658
1535
|
</button>
|
|
659
1536
|
</div>
|
|
@@ -678,7 +1555,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
678
1555
|
aria-label="Go to next page"
|
|
679
1556
|
>
|
|
680
1557
|
<span class="pf-v6-c-button__icon">
|
|
681
|
-
<
|
|
1558
|
+
<svg
|
|
1559
|
+
class="pf-v6-svg"
|
|
1560
|
+
viewBox="0 0 256 512"
|
|
1561
|
+
fill="currentColor"
|
|
1562
|
+
aria-hidden="true"
|
|
1563
|
+
role="img"
|
|
1564
|
+
width="1em"
|
|
1565
|
+
height="1em"
|
|
1566
|
+
>
|
|
1567
|
+
<path
|
|
1568
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
1569
|
+
/>
|
|
1570
|
+
</svg>
|
|
682
1571
|
</span>
|
|
683
1572
|
</button>
|
|
684
1573
|
</div>
|
|
@@ -690,7 +1579,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
690
1579
|
aria-label="Go to last page"
|
|
691
1580
|
>
|
|
692
1581
|
<span class="pf-v6-c-button__icon">
|
|
693
|
-
<
|
|
1582
|
+
<svg
|
|
1583
|
+
class="pf-v6-svg"
|
|
1584
|
+
viewBox="0 0 448 512"
|
|
1585
|
+
fill="currentColor"
|
|
1586
|
+
aria-hidden="true"
|
|
1587
|
+
role="img"
|
|
1588
|
+
width="1em"
|
|
1589
|
+
height="1em"
|
|
1590
|
+
>
|
|
1591
|
+
<path
|
|
1592
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
1593
|
+
/>
|
|
1594
|
+
</svg>
|
|
694
1595
|
</span>
|
|
695
1596
|
</button>
|
|
696
1597
|
</div>
|
|
@@ -712,7 +1613,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
712
1613
|
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
713
1614
|
type="button"
|
|
714
1615
|
aria-expanded="false"
|
|
715
|
-
aria-label="Menu toggle"
|
|
716
1616
|
id="pagination-menu-toggle-compact-example"
|
|
717
1617
|
>
|
|
718
1618
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -721,7 +1621,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
721
1621
|
</span>
|
|
722
1622
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
723
1623
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
724
|
-
<
|
|
1624
|
+
<svg
|
|
1625
|
+
class="pf-v6-svg"
|
|
1626
|
+
viewBox="0 0 20 20"
|
|
1627
|
+
fill="currentColor"
|
|
1628
|
+
aria-hidden="true"
|
|
1629
|
+
role="img"
|
|
1630
|
+
width="1em"
|
|
1631
|
+
height="1em"
|
|
1632
|
+
>
|
|
1633
|
+
<path
|
|
1634
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
1635
|
+
/>
|
|
1636
|
+
</svg>
|
|
725
1637
|
</span>
|
|
726
1638
|
</span>
|
|
727
1639
|
</button>
|
|
@@ -738,7 +1650,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
738
1650
|
aria-label="Go to previous page"
|
|
739
1651
|
>
|
|
740
1652
|
<span class="pf-v6-c-button__icon">
|
|
741
|
-
<
|
|
1653
|
+
<svg
|
|
1654
|
+
class="pf-v6-svg"
|
|
1655
|
+
viewBox="0 0 256 512"
|
|
1656
|
+
fill="currentColor"
|
|
1657
|
+
aria-hidden="true"
|
|
1658
|
+
role="img"
|
|
1659
|
+
width="1em"
|
|
1660
|
+
height="1em"
|
|
1661
|
+
>
|
|
1662
|
+
<path
|
|
1663
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
1664
|
+
/>
|
|
1665
|
+
</svg>
|
|
742
1666
|
</span>
|
|
743
1667
|
</button>
|
|
744
1668
|
</div>
|
|
@@ -749,7 +1673,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
749
1673
|
aria-label="Go to next page"
|
|
750
1674
|
>
|
|
751
1675
|
<span class="pf-v6-c-button__icon">
|
|
752
|
-
<
|
|
1676
|
+
<svg
|
|
1677
|
+
class="pf-v6-svg"
|
|
1678
|
+
viewBox="0 0 256 512"
|
|
1679
|
+
fill="currentColor"
|
|
1680
|
+
aria-hidden="true"
|
|
1681
|
+
role="img"
|
|
1682
|
+
width="1em"
|
|
1683
|
+
height="1em"
|
|
1684
|
+
>
|
|
1685
|
+
<path
|
|
1686
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
1687
|
+
/>
|
|
1688
|
+
</svg>
|
|
753
1689
|
</span>
|
|
754
1690
|
</button>
|
|
755
1691
|
</div>
|
|
@@ -771,7 +1707,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
771
1707
|
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
772
1708
|
type="button"
|
|
773
1709
|
aria-expanded="false"
|
|
774
|
-
aria-label="Menu toggle"
|
|
775
1710
|
id="pagination-top-with-summary-modifier-menu-toggle"
|
|
776
1711
|
>
|
|
777
1712
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -780,7 +1715,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
780
1715
|
</span>
|
|
781
1716
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
782
1717
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
783
|
-
<
|
|
1718
|
+
<svg
|
|
1719
|
+
class="pf-v6-svg"
|
|
1720
|
+
viewBox="0 0 20 20"
|
|
1721
|
+
fill="currentColor"
|
|
1722
|
+
aria-hidden="true"
|
|
1723
|
+
role="img"
|
|
1724
|
+
width="1em"
|
|
1725
|
+
height="1em"
|
|
1726
|
+
>
|
|
1727
|
+
<path
|
|
1728
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
1729
|
+
/>
|
|
1730
|
+
</svg>
|
|
784
1731
|
</span>
|
|
785
1732
|
</span>
|
|
786
1733
|
</button>
|
|
@@ -797,7 +1744,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
797
1744
|
aria-label="Go to first page"
|
|
798
1745
|
>
|
|
799
1746
|
<span class="pf-v6-c-button__icon">
|
|
800
|
-
<
|
|
1747
|
+
<svg
|
|
1748
|
+
class="pf-v6-svg"
|
|
1749
|
+
viewBox="0 0 448 512"
|
|
1750
|
+
fill="currentColor"
|
|
1751
|
+
aria-hidden="true"
|
|
1752
|
+
role="img"
|
|
1753
|
+
width="1em"
|
|
1754
|
+
height="1em"
|
|
1755
|
+
>
|
|
1756
|
+
<path
|
|
1757
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
1758
|
+
/>
|
|
1759
|
+
</svg>
|
|
801
1760
|
</span>
|
|
802
1761
|
</button>
|
|
803
1762
|
</div>
|
|
@@ -809,7 +1768,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
809
1768
|
aria-label="Go to previous page"
|
|
810
1769
|
>
|
|
811
1770
|
<span class="pf-v6-c-button__icon">
|
|
812
|
-
<
|
|
1771
|
+
<svg
|
|
1772
|
+
class="pf-v6-svg"
|
|
1773
|
+
viewBox="0 0 256 512"
|
|
1774
|
+
fill="currentColor"
|
|
1775
|
+
aria-hidden="true"
|
|
1776
|
+
role="img"
|
|
1777
|
+
width="1em"
|
|
1778
|
+
height="1em"
|
|
1779
|
+
>
|
|
1780
|
+
<path
|
|
1781
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
1782
|
+
/>
|
|
1783
|
+
</svg>
|
|
813
1784
|
</span>
|
|
814
1785
|
</button>
|
|
815
1786
|
</div>
|
|
@@ -832,7 +1803,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
832
1803
|
aria-label="Go to next page"
|
|
833
1804
|
>
|
|
834
1805
|
<span class="pf-v6-c-button__icon">
|
|
835
|
-
<
|
|
1806
|
+
<svg
|
|
1807
|
+
class="pf-v6-svg"
|
|
1808
|
+
viewBox="0 0 256 512"
|
|
1809
|
+
fill="currentColor"
|
|
1810
|
+
aria-hidden="true"
|
|
1811
|
+
role="img"
|
|
1812
|
+
width="1em"
|
|
1813
|
+
height="1em"
|
|
1814
|
+
>
|
|
1815
|
+
<path
|
|
1816
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
1817
|
+
/>
|
|
1818
|
+
</svg>
|
|
836
1819
|
</span>
|
|
837
1820
|
</button>
|
|
838
1821
|
</div>
|
|
@@ -844,7 +1827,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
844
1827
|
aria-label="Go to last page"
|
|
845
1828
|
>
|
|
846
1829
|
<span class="pf-v6-c-button__icon">
|
|
847
|
-
<
|
|
1830
|
+
<svg
|
|
1831
|
+
class="pf-v6-svg"
|
|
1832
|
+
viewBox="0 0 448 512"
|
|
1833
|
+
fill="currentColor"
|
|
1834
|
+
aria-hidden="true"
|
|
1835
|
+
role="img"
|
|
1836
|
+
width="1em"
|
|
1837
|
+
height="1em"
|
|
1838
|
+
>
|
|
1839
|
+
<path
|
|
1840
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
1841
|
+
/>
|
|
1842
|
+
</svg>
|
|
848
1843
|
</span>
|
|
849
1844
|
</button>
|
|
850
1845
|
</div>
|
|
@@ -866,7 +1861,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
866
1861
|
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
867
1862
|
type="button"
|
|
868
1863
|
aria-expanded="false"
|
|
869
|
-
aria-label="Menu toggle"
|
|
870
1864
|
id="pagination-top-with-full-modifier-menu-toggle"
|
|
871
1865
|
>
|
|
872
1866
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -875,7 +1869,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
875
1869
|
</span>
|
|
876
1870
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
877
1871
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
878
|
-
<
|
|
1872
|
+
<svg
|
|
1873
|
+
class="pf-v6-svg"
|
|
1874
|
+
viewBox="0 0 20 20"
|
|
1875
|
+
fill="currentColor"
|
|
1876
|
+
aria-hidden="true"
|
|
1877
|
+
role="img"
|
|
1878
|
+
width="1em"
|
|
1879
|
+
height="1em"
|
|
1880
|
+
>
|
|
1881
|
+
<path
|
|
1882
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
1883
|
+
/>
|
|
1884
|
+
</svg>
|
|
879
1885
|
</span>
|
|
880
1886
|
</span>
|
|
881
1887
|
</button>
|
|
@@ -892,7 +1898,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
892
1898
|
aria-label="Go to first page"
|
|
893
1899
|
>
|
|
894
1900
|
<span class="pf-v6-c-button__icon">
|
|
895
|
-
<
|
|
1901
|
+
<svg
|
|
1902
|
+
class="pf-v6-svg"
|
|
1903
|
+
viewBox="0 0 448 512"
|
|
1904
|
+
fill="currentColor"
|
|
1905
|
+
aria-hidden="true"
|
|
1906
|
+
role="img"
|
|
1907
|
+
width="1em"
|
|
1908
|
+
height="1em"
|
|
1909
|
+
>
|
|
1910
|
+
<path
|
|
1911
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
1912
|
+
/>
|
|
1913
|
+
</svg>
|
|
896
1914
|
</span>
|
|
897
1915
|
</button>
|
|
898
1916
|
</div>
|
|
@@ -904,7 +1922,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
904
1922
|
aria-label="Go to previous page"
|
|
905
1923
|
>
|
|
906
1924
|
<span class="pf-v6-c-button__icon">
|
|
907
|
-
<
|
|
1925
|
+
<svg
|
|
1926
|
+
class="pf-v6-svg"
|
|
1927
|
+
viewBox="0 0 256 512"
|
|
1928
|
+
fill="currentColor"
|
|
1929
|
+
aria-hidden="true"
|
|
1930
|
+
role="img"
|
|
1931
|
+
width="1em"
|
|
1932
|
+
height="1em"
|
|
1933
|
+
>
|
|
1934
|
+
<path
|
|
1935
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
1936
|
+
/>
|
|
1937
|
+
</svg>
|
|
908
1938
|
</span>
|
|
909
1939
|
</button>
|
|
910
1940
|
</div>
|
|
@@ -927,7 +1957,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
927
1957
|
aria-label="Go to next page"
|
|
928
1958
|
>
|
|
929
1959
|
<span class="pf-v6-c-button__icon">
|
|
930
|
-
<
|
|
1960
|
+
<svg
|
|
1961
|
+
class="pf-v6-svg"
|
|
1962
|
+
viewBox="0 0 256 512"
|
|
1963
|
+
fill="currentColor"
|
|
1964
|
+
aria-hidden="true"
|
|
1965
|
+
role="img"
|
|
1966
|
+
width="1em"
|
|
1967
|
+
height="1em"
|
|
1968
|
+
>
|
|
1969
|
+
<path
|
|
1970
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
1971
|
+
/>
|
|
1972
|
+
</svg>
|
|
931
1973
|
</span>
|
|
932
1974
|
</button>
|
|
933
1975
|
</div>
|
|
@@ -939,7 +1981,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
939
1981
|
aria-label="Go to last page"
|
|
940
1982
|
>
|
|
941
1983
|
<span class="pf-v6-c-button__icon">
|
|
942
|
-
<
|
|
1984
|
+
<svg
|
|
1985
|
+
class="pf-v6-svg"
|
|
1986
|
+
viewBox="0 0 448 512"
|
|
1987
|
+
fill="currentColor"
|
|
1988
|
+
aria-hidden="true"
|
|
1989
|
+
role="img"
|
|
1990
|
+
width="1em"
|
|
1991
|
+
height="1em"
|
|
1992
|
+
>
|
|
1993
|
+
<path
|
|
1994
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
1995
|
+
/>
|
|
1996
|
+
</svg>
|
|
943
1997
|
</span>
|
|
944
1998
|
</button>
|
|
945
1999
|
</div>
|
|
@@ -963,7 +2017,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
963
2017
|
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
964
2018
|
type="button"
|
|
965
2019
|
aria-expanded="false"
|
|
966
|
-
aria-label="Menu toggle"
|
|
967
2020
|
id="pagination-top-with-responsive-summary-navigation-modifiers-menu-toggle"
|
|
968
2021
|
>
|
|
969
2022
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -972,7 +2025,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
972
2025
|
</span>
|
|
973
2026
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
974
2027
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
975
|
-
<
|
|
2028
|
+
<svg
|
|
2029
|
+
class="pf-v6-svg"
|
|
2030
|
+
viewBox="0 0 20 20"
|
|
2031
|
+
fill="currentColor"
|
|
2032
|
+
aria-hidden="true"
|
|
2033
|
+
role="img"
|
|
2034
|
+
width="1em"
|
|
2035
|
+
height="1em"
|
|
2036
|
+
>
|
|
2037
|
+
<path
|
|
2038
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
2039
|
+
/>
|
|
2040
|
+
</svg>
|
|
976
2041
|
</span>
|
|
977
2042
|
</span>
|
|
978
2043
|
</button>
|
|
@@ -989,7 +2054,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
989
2054
|
aria-label="Go to first page"
|
|
990
2055
|
>
|
|
991
2056
|
<span class="pf-v6-c-button__icon">
|
|
992
|
-
<
|
|
2057
|
+
<svg
|
|
2058
|
+
class="pf-v6-svg"
|
|
2059
|
+
viewBox="0 0 448 512"
|
|
2060
|
+
fill="currentColor"
|
|
2061
|
+
aria-hidden="true"
|
|
2062
|
+
role="img"
|
|
2063
|
+
width="1em"
|
|
2064
|
+
height="1em"
|
|
2065
|
+
>
|
|
2066
|
+
<path
|
|
2067
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
2068
|
+
/>
|
|
2069
|
+
</svg>
|
|
993
2070
|
</span>
|
|
994
2071
|
</button>
|
|
995
2072
|
</div>
|
|
@@ -1001,7 +2078,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1001
2078
|
aria-label="Go to previous page"
|
|
1002
2079
|
>
|
|
1003
2080
|
<span class="pf-v6-c-button__icon">
|
|
1004
|
-
<
|
|
2081
|
+
<svg
|
|
2082
|
+
class="pf-v6-svg"
|
|
2083
|
+
viewBox="0 0 256 512"
|
|
2084
|
+
fill="currentColor"
|
|
2085
|
+
aria-hidden="true"
|
|
2086
|
+
role="img"
|
|
2087
|
+
width="1em"
|
|
2088
|
+
height="1em"
|
|
2089
|
+
>
|
|
2090
|
+
<path
|
|
2091
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
2092
|
+
/>
|
|
2093
|
+
</svg>
|
|
1005
2094
|
</span>
|
|
1006
2095
|
</button>
|
|
1007
2096
|
</div>
|
|
@@ -1024,7 +2113,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1024
2113
|
aria-label="Go to next page"
|
|
1025
2114
|
>
|
|
1026
2115
|
<span class="pf-v6-c-button__icon">
|
|
1027
|
-
<
|
|
2116
|
+
<svg
|
|
2117
|
+
class="pf-v6-svg"
|
|
2118
|
+
viewBox="0 0 256 512"
|
|
2119
|
+
fill="currentColor"
|
|
2120
|
+
aria-hidden="true"
|
|
2121
|
+
role="img"
|
|
2122
|
+
width="1em"
|
|
2123
|
+
height="1em"
|
|
2124
|
+
>
|
|
2125
|
+
<path
|
|
2126
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
2127
|
+
/>
|
|
2128
|
+
</svg>
|
|
1028
2129
|
</span>
|
|
1029
2130
|
</button>
|
|
1030
2131
|
</div>
|
|
@@ -1036,7 +2137,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1036
2137
|
aria-label="Go to last page"
|
|
1037
2138
|
>
|
|
1038
2139
|
<span class="pf-v6-c-button__icon">
|
|
1039
|
-
<
|
|
2140
|
+
<svg
|
|
2141
|
+
class="pf-v6-svg"
|
|
2142
|
+
viewBox="0 0 448 512"
|
|
2143
|
+
fill="currentColor"
|
|
2144
|
+
aria-hidden="true"
|
|
2145
|
+
role="img"
|
|
2146
|
+
width="1em"
|
|
2147
|
+
height="1em"
|
|
2148
|
+
>
|
|
2149
|
+
<path
|
|
2150
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
2151
|
+
/>
|
|
2152
|
+
</svg>
|
|
1040
2153
|
</span>
|
|
1041
2154
|
</button>
|
|
1042
2155
|
</div>
|
|
@@ -1048,7 +2161,7 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1048
2161
|
### Compact display full modifier
|
|
1049
2162
|
|
|
1050
2163
|
```html
|
|
1051
|
-
<div class="pf-v6-c-pagination pf-m-
|
|
2164
|
+
<div class="pf-v6-c-pagination pf-m-display-full pf-m-compact">
|
|
1052
2165
|
<div class="pf-v6-c-pagination__total-items">
|
|
1053
2166
|
<b>1 - 10</b> of
|
|
1054
2167
|
<b>36</b>
|
|
@@ -1058,7 +2171,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1058
2171
|
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
1059
2172
|
type="button"
|
|
1060
2173
|
aria-expanded="false"
|
|
1061
|
-
aria-label="Menu toggle"
|
|
1062
2174
|
id="pagination-compact-with-full-modifier-menu-toggle"
|
|
1063
2175
|
>
|
|
1064
2176
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -1067,7 +2179,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1067
2179
|
</span>
|
|
1068
2180
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
1069
2181
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1070
|
-
<
|
|
2182
|
+
<svg
|
|
2183
|
+
class="pf-v6-svg"
|
|
2184
|
+
viewBox="0 0 20 20"
|
|
2185
|
+
fill="currentColor"
|
|
2186
|
+
aria-hidden="true"
|
|
2187
|
+
role="img"
|
|
2188
|
+
width="1em"
|
|
2189
|
+
height="1em"
|
|
2190
|
+
>
|
|
2191
|
+
<path
|
|
2192
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
2193
|
+
/>
|
|
2194
|
+
</svg>
|
|
1071
2195
|
</span>
|
|
1072
2196
|
</span>
|
|
1073
2197
|
</button>
|
|
@@ -1084,7 +2208,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1084
2208
|
aria-label="Go to previous page"
|
|
1085
2209
|
>
|
|
1086
2210
|
<span class="pf-v6-c-button__icon">
|
|
1087
|
-
<
|
|
2211
|
+
<svg
|
|
2212
|
+
class="pf-v6-svg"
|
|
2213
|
+
viewBox="0 0 256 512"
|
|
2214
|
+
fill="currentColor"
|
|
2215
|
+
aria-hidden="true"
|
|
2216
|
+
role="img"
|
|
2217
|
+
width="1em"
|
|
2218
|
+
height="1em"
|
|
2219
|
+
>
|
|
2220
|
+
<path
|
|
2221
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
2222
|
+
/>
|
|
2223
|
+
</svg>
|
|
1088
2224
|
</span>
|
|
1089
2225
|
</button>
|
|
1090
2226
|
</div>
|
|
@@ -1095,7 +2231,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1095
2231
|
aria-label="Go to next page"
|
|
1096
2232
|
>
|
|
1097
2233
|
<span class="pf-v6-c-button__icon">
|
|
1098
|
-
<
|
|
2234
|
+
<svg
|
|
2235
|
+
class="pf-v6-svg"
|
|
2236
|
+
viewBox="0 0 256 512"
|
|
2237
|
+
fill="currentColor"
|
|
2238
|
+
aria-hidden="true"
|
|
2239
|
+
role="img"
|
|
2240
|
+
width="1em"
|
|
2241
|
+
height="1em"
|
|
2242
|
+
>
|
|
2243
|
+
<path
|
|
2244
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
2245
|
+
/>
|
|
2246
|
+
</svg>
|
|
1099
2247
|
</span>
|
|
1100
2248
|
</button>
|
|
1101
2249
|
</div>
|
|
@@ -1119,7 +2267,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1119
2267
|
class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
|
|
1120
2268
|
type="button"
|
|
1121
2269
|
aria-expanded="false"
|
|
1122
|
-
aria-label="Menu toggle"
|
|
1123
2270
|
id="pagination-inset-menu-toggle"
|
|
1124
2271
|
>
|
|
1125
2272
|
<span class="pf-v6-c-menu-toggle__text">
|
|
@@ -1128,7 +2275,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1128
2275
|
</span>
|
|
1129
2276
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
1130
2277
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1131
|
-
<
|
|
2278
|
+
<svg
|
|
2279
|
+
class="pf-v6-svg"
|
|
2280
|
+
viewBox="0 0 20 20"
|
|
2281
|
+
fill="currentColor"
|
|
2282
|
+
aria-hidden="true"
|
|
2283
|
+
role="img"
|
|
2284
|
+
width="1em"
|
|
2285
|
+
height="1em"
|
|
2286
|
+
>
|
|
2287
|
+
<path
|
|
2288
|
+
d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
|
|
2289
|
+
/>
|
|
2290
|
+
</svg>
|
|
1132
2291
|
</span>
|
|
1133
2292
|
</span>
|
|
1134
2293
|
</button>
|
|
@@ -1145,7 +2304,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1145
2304
|
aria-label="Go to first page"
|
|
1146
2305
|
>
|
|
1147
2306
|
<span class="pf-v6-c-button__icon">
|
|
1148
|
-
<
|
|
2307
|
+
<svg
|
|
2308
|
+
class="pf-v6-svg"
|
|
2309
|
+
viewBox="0 0 448 512"
|
|
2310
|
+
fill="currentColor"
|
|
2311
|
+
aria-hidden="true"
|
|
2312
|
+
role="img"
|
|
2313
|
+
width="1em"
|
|
2314
|
+
height="1em"
|
|
2315
|
+
>
|
|
2316
|
+
<path
|
|
2317
|
+
d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
|
|
2318
|
+
/>
|
|
2319
|
+
</svg>
|
|
1149
2320
|
</span>
|
|
1150
2321
|
</button>
|
|
1151
2322
|
</div>
|
|
@@ -1157,7 +2328,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1157
2328
|
aria-label="Go to previous page"
|
|
1158
2329
|
>
|
|
1159
2330
|
<span class="pf-v6-c-button__icon">
|
|
1160
|
-
<
|
|
2331
|
+
<svg
|
|
2332
|
+
class="pf-v6-svg"
|
|
2333
|
+
viewBox="0 0 256 512"
|
|
2334
|
+
fill="currentColor"
|
|
2335
|
+
aria-hidden="true"
|
|
2336
|
+
role="img"
|
|
2337
|
+
width="1em"
|
|
2338
|
+
height="1em"
|
|
2339
|
+
>
|
|
2340
|
+
<path
|
|
2341
|
+
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
|
|
2342
|
+
/>
|
|
2343
|
+
</svg>
|
|
1161
2344
|
</span>
|
|
1162
2345
|
</button>
|
|
1163
2346
|
</div>
|
|
@@ -1180,7 +2363,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1180
2363
|
aria-label="Go to next page"
|
|
1181
2364
|
>
|
|
1182
2365
|
<span class="pf-v6-c-button__icon">
|
|
1183
|
-
<
|
|
2366
|
+
<svg
|
|
2367
|
+
class="pf-v6-svg"
|
|
2368
|
+
viewBox="0 0 256 512"
|
|
2369
|
+
fill="currentColor"
|
|
2370
|
+
aria-hidden="true"
|
|
2371
|
+
role="img"
|
|
2372
|
+
width="1em"
|
|
2373
|
+
height="1em"
|
|
2374
|
+
>
|
|
2375
|
+
<path
|
|
2376
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
|
|
2377
|
+
/>
|
|
2378
|
+
</svg>
|
|
1184
2379
|
</span>
|
|
1185
2380
|
</button>
|
|
1186
2381
|
</div>
|
|
@@ -1192,7 +2387,19 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1192
2387
|
aria-label="Go to last page"
|
|
1193
2388
|
>
|
|
1194
2389
|
<span class="pf-v6-c-button__icon">
|
|
1195
|
-
<
|
|
2390
|
+
<svg
|
|
2391
|
+
class="pf-v6-svg"
|
|
2392
|
+
viewBox="0 0 448 512"
|
|
2393
|
+
fill="currentColor"
|
|
2394
|
+
aria-hidden="true"
|
|
2395
|
+
role="img"
|
|
2396
|
+
width="1em"
|
|
2397
|
+
height="1em"
|
|
2398
|
+
>
|
|
2399
|
+
<path
|
|
2400
|
+
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
|
|
2401
|
+
/>
|
|
2402
|
+
</svg>
|
|
1196
2403
|
</span>
|
|
1197
2404
|
</button>
|
|
1198
2405
|
</div>
|
|
@@ -1224,13 +2431,17 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1224
2431
|
| `.pf-v6-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
|
|
1225
2432
|
| `.pf-v6-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
|
|
1226
2433
|
| `.pf-v6-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |
|
|
1227
|
-
| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/tokens/all-
|
|
1228
|
-
| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/tokens/all-
|
|
2434
|
+
| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
2435
|
+
| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
1229
2436
|
| `.pf-m-bottom` | `.pf-v6-c-pagination` | Modifies for bottom pagination component styles. |
|
|
1230
2437
|
| `.pf-m-compact` | `.pf-v6-c-pagination` | Modifies for compact pagination component styles. |
|
|
1231
2438
|
| `.pf-m-static` | `.pf-v6-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
|
|
1232
2439
|
| `.pf-m-sticky` | `.pf-v6-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-v6-c-pagination.pf-m-bottom`. |
|
|
1233
|
-
| `.pf-m-
|
|
2440
|
+
| `.pf-m-sticky-base` | `.pf-v6-c-pagination` | Makes the pagination sticky on scroll, but does not apply sticky styling. `.pf-m-sticky-stuck` must be used to apply sticky styling. |
|
|
2441
|
+
| `.pf-m-sticky-stuck` | `.pf-v6-c-pagination.pf-m-sticky-base` | Applies sticky styling to a pagination with `.pf-m-sticky-base`. |
|
|
2442
|
+
| `.pf-m-plain` | `.pf-v6-c-pagination.pf-m-bottom` | Modifies the pagination to have a transparent background. Only applies outside of glass theme. |
|
|
2443
|
+
| `.pf-m-no-plain-on-glass` | `.pf-v6-c-pagination.pf-m-bottom` | Prevents the pagination from being transparent on glass theme. |
|
|
2444
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
1234
2445
|
| `.pf-m-page-insets` | `.pf-v6-c-pagination` | Modifies the pagination component padding/inset to visually match padding of page elements. |
|
|
1235
2446
|
| `.pf-m-first` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the first page button. |
|
|
1236
2447
|
| `.pf-m-prev` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the previous page button. |
|