@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
|
@@ -105,7 +105,19 @@ cssPrefix: pf-v6-c-card
|
|
|
105
105
|
id="card-action-example-1-menu-toggle-kebab"
|
|
106
106
|
>
|
|
107
107
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
108
|
-
<
|
|
108
|
+
<svg
|
|
109
|
+
class="pf-v6-svg"
|
|
110
|
+
viewBox="0 0 32 32"
|
|
111
|
+
fill="currentColor"
|
|
112
|
+
aria-hidden="true"
|
|
113
|
+
role="img"
|
|
114
|
+
width="1em"
|
|
115
|
+
height="1em"
|
|
116
|
+
>
|
|
117
|
+
<path
|
|
118
|
+
d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
|
|
119
|
+
/>
|
|
120
|
+
</svg>
|
|
109
121
|
</span>
|
|
110
122
|
</button>
|
|
111
123
|
<div class="pf-v6-c-check pf-m-standalone">
|
|
@@ -146,7 +158,19 @@ cssPrefix: pf-v6-c-card
|
|
|
146
158
|
id="card-action-example-2-menu-toggle-kebab"
|
|
147
159
|
>
|
|
148
160
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
149
|
-
<
|
|
161
|
+
<svg
|
|
162
|
+
class="pf-v6-svg"
|
|
163
|
+
viewBox="0 0 32 32"
|
|
164
|
+
fill="currentColor"
|
|
165
|
+
aria-hidden="true"
|
|
166
|
+
role="img"
|
|
167
|
+
width="1em"
|
|
168
|
+
height="1em"
|
|
169
|
+
>
|
|
170
|
+
<path
|
|
171
|
+
d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
|
|
172
|
+
/>
|
|
173
|
+
</svg>
|
|
150
174
|
</span>
|
|
151
175
|
</button>
|
|
152
176
|
<div class="pf-v6-c-check pf-m-standalone">
|
|
@@ -175,6 +199,183 @@ cssPrefix: pf-v6-c-card
|
|
|
175
199
|
|
|
176
200
|
```
|
|
177
201
|
|
|
202
|
+
### With subtitle
|
|
203
|
+
|
|
204
|
+
```html isBeta
|
|
205
|
+
<div class="pf-v6-c-card" id="card-subtitle">
|
|
206
|
+
<div class="pf-v6-c-card__header">
|
|
207
|
+
<div class="pf-v6-c-card__actions">
|
|
208
|
+
<button
|
|
209
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
210
|
+
type="button"
|
|
211
|
+
aria-expanded="false"
|
|
212
|
+
aria-label="Card menu toggle"
|
|
213
|
+
id="card-subtitle-menu-toggle-kebab"
|
|
214
|
+
>
|
|
215
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
216
|
+
<svg
|
|
217
|
+
class="pf-v6-svg"
|
|
218
|
+
viewBox="0 0 32 32"
|
|
219
|
+
fill="currentColor"
|
|
220
|
+
aria-hidden="true"
|
|
221
|
+
role="img"
|
|
222
|
+
width="1em"
|
|
223
|
+
height="1em"
|
|
224
|
+
>
|
|
225
|
+
<path
|
|
226
|
+
d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
|
|
227
|
+
/>
|
|
228
|
+
</svg>
|
|
229
|
+
</span>
|
|
230
|
+
</button>
|
|
231
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
232
|
+
<input
|
|
233
|
+
class="pf-v6-c-check__input"
|
|
234
|
+
type="checkbox"
|
|
235
|
+
aria-label="Standalone check"
|
|
236
|
+
id="card-subtitle-check"
|
|
237
|
+
name="card-subtitle-check"
|
|
238
|
+
aria-labelledby="card-subtitle"
|
|
239
|
+
/>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="pf-v6-c-card__header-main">
|
|
243
|
+
<div class="pf-v6-c-card__title">
|
|
244
|
+
<h2
|
|
245
|
+
class="pf-v6-c-card__title-text"
|
|
246
|
+
id="card-subtitle-check-label"
|
|
247
|
+
>This is a really really really really really really really really really really long title</h2>
|
|
248
|
+
<div class="pf-v6-c-card__subtitle">This is a card subtitle.</div>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="pf-v6-c-card__body">Body</div>
|
|
253
|
+
<div class="pf-v6-c-card__footer">Footer</div>
|
|
254
|
+
</div>
|
|
255
|
+
<br />
|
|
256
|
+
<div class="pf-v6-c-card" id="card-image-action-subtitle">
|
|
257
|
+
<div class="pf-v6-c-card__header">
|
|
258
|
+
<div class="pf-v6-c-card__header-main">
|
|
259
|
+
<svg height="70px" viewBox="0 0 679 158">
|
|
260
|
+
<title>PF-HorizontalLogo-Color</title>
|
|
261
|
+
<defs>
|
|
262
|
+
<linearGradient
|
|
263
|
+
x1="68%"
|
|
264
|
+
y1="2.25860997e-13%"
|
|
265
|
+
x2="32%"
|
|
266
|
+
y2="100%"
|
|
267
|
+
id="linearGradient-card-image-action-subtitle"
|
|
268
|
+
>
|
|
269
|
+
<stop stop-color="#2B9AF3" offset="0%" />
|
|
270
|
+
<stop
|
|
271
|
+
stop-color="#73BCF7"
|
|
272
|
+
stop-opacity="0.502212631"
|
|
273
|
+
offset="100%"
|
|
274
|
+
/>
|
|
275
|
+
</linearGradient>
|
|
276
|
+
</defs>
|
|
277
|
+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
278
|
+
<g
|
|
279
|
+
transform="translate(206.000000, 45.750000)"
|
|
280
|
+
fill="var(--pf-t--global--text--color--regular)"
|
|
281
|
+
fill-rule="nonzero"
|
|
282
|
+
>
|
|
283
|
+
<path
|
|
284
|
+
d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
|
|
285
|
+
/>
|
|
286
|
+
<path
|
|
287
|
+
d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
|
|
288
|
+
/>
|
|
289
|
+
<path
|
|
290
|
+
d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
|
|
291
|
+
/>
|
|
292
|
+
<path
|
|
293
|
+
d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
|
|
294
|
+
/>
|
|
295
|
+
<path
|
|
296
|
+
d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
|
|
297
|
+
/>
|
|
298
|
+
<path
|
|
299
|
+
d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
|
|
300
|
+
/>
|
|
301
|
+
<path
|
|
302
|
+
d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
|
|
303
|
+
/>
|
|
304
|
+
<polygon
|
|
305
|
+
points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
|
|
306
|
+
/>
|
|
307
|
+
<polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
|
|
308
|
+
<path
|
|
309
|
+
d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
|
|
310
|
+
/>
|
|
311
|
+
</g>
|
|
312
|
+
<g transform="translate(0.000000, 0.000000)">
|
|
313
|
+
<path
|
|
314
|
+
d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
|
|
315
|
+
fill="#0066CC"
|
|
316
|
+
/>
|
|
317
|
+
<path
|
|
318
|
+
d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
|
|
319
|
+
fill="url(#linearGradient-card-image-action-subtitle)"
|
|
320
|
+
/>
|
|
321
|
+
<path
|
|
322
|
+
d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
|
|
323
|
+
fill="url(#linearGradient-card-image-action-subtitle)"
|
|
324
|
+
transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
|
|
325
|
+
/>
|
|
326
|
+
</g>
|
|
327
|
+
</g>
|
|
328
|
+
</svg>
|
|
329
|
+
</div>
|
|
330
|
+
<div class="pf-v6-c-card__actions">
|
|
331
|
+
<button
|
|
332
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
333
|
+
type="button"
|
|
334
|
+
aria-expanded="false"
|
|
335
|
+
aria-label="Card menu toggle"
|
|
336
|
+
id="card-image-action-subtitle-menu-toggle-kebab"
|
|
337
|
+
>
|
|
338
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
339
|
+
<svg
|
|
340
|
+
class="pf-v6-svg"
|
|
341
|
+
viewBox="0 0 32 32"
|
|
342
|
+
fill="currentColor"
|
|
343
|
+
aria-hidden="true"
|
|
344
|
+
role="img"
|
|
345
|
+
width="1em"
|
|
346
|
+
height="1em"
|
|
347
|
+
>
|
|
348
|
+
<path
|
|
349
|
+
d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
|
|
350
|
+
/>
|
|
351
|
+
</svg>
|
|
352
|
+
</span>
|
|
353
|
+
</button>
|
|
354
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
355
|
+
<input
|
|
356
|
+
class="pf-v6-c-check__input"
|
|
357
|
+
type="checkbox"
|
|
358
|
+
aria-label="Standalone check"
|
|
359
|
+
id="card-image-action-subtitle-check"
|
|
360
|
+
name="card-image-action-subtitle-check"
|
|
361
|
+
aria-labelledby="card-image-action-subtitle"
|
|
362
|
+
/>
|
|
363
|
+
</div>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
<div class="pf-v6-c-card__title">
|
|
367
|
+
<h2
|
|
368
|
+
class="pf-v6-c-card__title-text"
|
|
369
|
+
id="card-image-action-subtitle-check-label"
|
|
370
|
+
>Title</h2>
|
|
371
|
+
<div class="pf-v6-c-card__subtitle">Subtitle</div>
|
|
372
|
+
</div>
|
|
373
|
+
<div class="pf-v6-c-card__body">Body</div>
|
|
374
|
+
<div class="pf-v6-c-card__footer">Footer</div>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
```
|
|
378
|
+
|
|
178
379
|
### With only actions in head (no title/footer)
|
|
179
380
|
|
|
180
381
|
```html
|
|
@@ -189,7 +390,19 @@ cssPrefix: pf-v6-c-card
|
|
|
189
390
|
id="card-action-example-3-menu-toggle-kebab"
|
|
190
391
|
>
|
|
191
392
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
192
|
-
<
|
|
393
|
+
<svg
|
|
394
|
+
class="pf-v6-svg"
|
|
395
|
+
viewBox="0 0 32 32"
|
|
396
|
+
fill="currentColor"
|
|
397
|
+
aria-hidden="true"
|
|
398
|
+
role="img"
|
|
399
|
+
width="1em"
|
|
400
|
+
height="1em"
|
|
401
|
+
>
|
|
402
|
+
<path
|
|
403
|
+
d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
|
|
404
|
+
/>
|
|
405
|
+
</svg>
|
|
193
406
|
</span>
|
|
194
407
|
</button>
|
|
195
408
|
<div class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1426,7 +1639,19 @@ cssPrefix: pf-v6-c-card
|
|
|
1426
1639
|
>
|
|
1427
1640
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1428
1641
|
<span class="pf-v6-c-card__header-toggle-icon">
|
|
1429
|
-
<
|
|
1642
|
+
<svg
|
|
1643
|
+
class="pf-v6-svg"
|
|
1644
|
+
viewBox="0 0 20 20"
|
|
1645
|
+
fill="currentColor"
|
|
1646
|
+
aria-hidden="true"
|
|
1647
|
+
role="img"
|
|
1648
|
+
width="1em"
|
|
1649
|
+
height="1em"
|
|
1650
|
+
>
|
|
1651
|
+
<path
|
|
1652
|
+
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
|
|
1653
|
+
/>
|
|
1654
|
+
</svg>
|
|
1430
1655
|
</span>
|
|
1431
1656
|
</span>
|
|
1432
1657
|
</button>
|
|
@@ -1440,7 +1665,19 @@ cssPrefix: pf-v6-c-card
|
|
|
1440
1665
|
id="card-expandable-example-menu-toggle-kebab"
|
|
1441
1666
|
>
|
|
1442
1667
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
1443
|
-
<
|
|
1668
|
+
<svg
|
|
1669
|
+
class="pf-v6-svg"
|
|
1670
|
+
viewBox="0 0 32 32"
|
|
1671
|
+
fill="currentColor"
|
|
1672
|
+
aria-hidden="true"
|
|
1673
|
+
role="img"
|
|
1674
|
+
width="1em"
|
|
1675
|
+
height="1em"
|
|
1676
|
+
>
|
|
1677
|
+
<path
|
|
1678
|
+
d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
|
|
1679
|
+
/>
|
|
1680
|
+
</svg>
|
|
1444
1681
|
</span>
|
|
1445
1682
|
</button>
|
|
1446
1683
|
<div class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1482,7 +1719,19 @@ cssPrefix: pf-v6-c-card
|
|
|
1482
1719
|
>
|
|
1483
1720
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1484
1721
|
<span class="pf-v6-c-card__header-toggle-icon">
|
|
1485
|
-
<
|
|
1722
|
+
<svg
|
|
1723
|
+
class="pf-v6-svg"
|
|
1724
|
+
viewBox="0 0 20 20"
|
|
1725
|
+
fill="currentColor"
|
|
1726
|
+
aria-hidden="true"
|
|
1727
|
+
role="img"
|
|
1728
|
+
width="1em"
|
|
1729
|
+
height="1em"
|
|
1730
|
+
>
|
|
1731
|
+
<path
|
|
1732
|
+
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
|
|
1733
|
+
/>
|
|
1734
|
+
</svg>
|
|
1486
1735
|
</span>
|
|
1487
1736
|
</span>
|
|
1488
1737
|
</button>
|
|
@@ -1503,7 +1752,19 @@ cssPrefix: pf-v6-c-card
|
|
|
1503
1752
|
id="card-expandable-image-example-menu-toggle-kebab"
|
|
1504
1753
|
>
|
|
1505
1754
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
1506
|
-
<
|
|
1755
|
+
<svg
|
|
1756
|
+
class="pf-v6-svg"
|
|
1757
|
+
viewBox="0 0 32 32"
|
|
1758
|
+
fill="currentColor"
|
|
1759
|
+
aria-hidden="true"
|
|
1760
|
+
role="img"
|
|
1761
|
+
width="1em"
|
|
1762
|
+
height="1em"
|
|
1763
|
+
>
|
|
1764
|
+
<path
|
|
1765
|
+
d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
|
|
1766
|
+
/>
|
|
1767
|
+
</svg>
|
|
1507
1768
|
</span>
|
|
1508
1769
|
</button>
|
|
1509
1770
|
<div class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1537,7 +1798,19 @@ cssPrefix: pf-v6-c-card
|
|
|
1537
1798
|
>
|
|
1538
1799
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1539
1800
|
<span class="pf-v6-c-card__header-toggle-icon">
|
|
1540
|
-
<
|
|
1801
|
+
<svg
|
|
1802
|
+
class="pf-v6-svg"
|
|
1803
|
+
viewBox="0 0 20 20"
|
|
1804
|
+
fill="currentColor"
|
|
1805
|
+
aria-hidden="true"
|
|
1806
|
+
role="img"
|
|
1807
|
+
width="1em"
|
|
1808
|
+
height="1em"
|
|
1809
|
+
>
|
|
1810
|
+
<path
|
|
1811
|
+
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
|
|
1812
|
+
/>
|
|
1813
|
+
</svg>
|
|
1541
1814
|
</span>
|
|
1542
1815
|
</span>
|
|
1543
1816
|
</button>
|
|
@@ -1551,7 +1824,19 @@ cssPrefix: pf-v6-c-card
|
|
|
1551
1824
|
id="card-expanded-example-menu-toggle-kebab"
|
|
1552
1825
|
>
|
|
1553
1826
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
1554
|
-
<
|
|
1827
|
+
<svg
|
|
1828
|
+
class="pf-v6-svg"
|
|
1829
|
+
viewBox="0 0 32 32"
|
|
1830
|
+
fill="currentColor"
|
|
1831
|
+
aria-hidden="true"
|
|
1832
|
+
role="img"
|
|
1833
|
+
width="1em"
|
|
1834
|
+
height="1em"
|
|
1835
|
+
>
|
|
1836
|
+
<path
|
|
1837
|
+
d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
|
|
1838
|
+
/>
|
|
1839
|
+
</svg>
|
|
1555
1840
|
</span>
|
|
1556
1841
|
</button>
|
|
1557
1842
|
<div class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1594,7 +1879,19 @@ cssPrefix: pf-v6-c-card
|
|
|
1594
1879
|
id="card-full-height-example-menu-toggle-kebab"
|
|
1595
1880
|
>
|
|
1596
1881
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
1597
|
-
<
|
|
1882
|
+
<svg
|
|
1883
|
+
class="pf-v6-svg"
|
|
1884
|
+
viewBox="0 0 32 32"
|
|
1885
|
+
fill="currentColor"
|
|
1886
|
+
aria-hidden="true"
|
|
1887
|
+
role="img"
|
|
1888
|
+
width="1em"
|
|
1889
|
+
height="1em"
|
|
1890
|
+
>
|
|
1891
|
+
<path
|
|
1892
|
+
d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
|
|
1893
|
+
/>
|
|
1894
|
+
</svg>
|
|
1598
1895
|
</span>
|
|
1599
1896
|
</button>
|
|
1600
1897
|
<div class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1637,7 +1934,19 @@ cssPrefix: pf-v6-c-card
|
|
|
1637
1934
|
id="card-toggle-on-right-example-menu-toggle-kebab"
|
|
1638
1935
|
>
|
|
1639
1936
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
1640
|
-
<
|
|
1937
|
+
<svg
|
|
1938
|
+
class="pf-v6-svg"
|
|
1939
|
+
viewBox="0 0 32 32"
|
|
1940
|
+
fill="currentColor"
|
|
1941
|
+
aria-hidden="true"
|
|
1942
|
+
role="img"
|
|
1943
|
+
width="1em"
|
|
1944
|
+
height="1em"
|
|
1945
|
+
>
|
|
1946
|
+
<path
|
|
1947
|
+
d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
|
|
1948
|
+
/>
|
|
1949
|
+
</svg>
|
|
1641
1950
|
</span>
|
|
1642
1951
|
</button>
|
|
1643
1952
|
<div class="pf-v6-c-check pf-m-standalone">
|
|
@@ -1669,7 +1978,19 @@ cssPrefix: pf-v6-c-card
|
|
|
1669
1978
|
>
|
|
1670
1979
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1671
1980
|
<span class="pf-v6-c-card__header-toggle-icon">
|
|
1672
|
-
<
|
|
1981
|
+
<svg
|
|
1982
|
+
class="pf-v6-svg"
|
|
1983
|
+
viewBox="0 0 20 20"
|
|
1984
|
+
fill="currentColor"
|
|
1985
|
+
aria-hidden="true"
|
|
1986
|
+
role="img"
|
|
1987
|
+
width="1em"
|
|
1988
|
+
height="1em"
|
|
1989
|
+
>
|
|
1990
|
+
<path
|
|
1991
|
+
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
|
|
1992
|
+
/>
|
|
1993
|
+
</svg>
|
|
1673
1994
|
</span>
|
|
1674
1995
|
</span>
|
|
1675
1996
|
</button>
|
|
@@ -1709,6 +2030,7 @@ A card is a generic rectangular container that can be used to build other compon
|
|
|
1709
2030
|
| `.pf-v6-c-card` | `<div>` | Creates a card component. **Required** |
|
|
1710
2031
|
| `.pf-v6-c-card__title` | `<div>` | Creates a card title container. |
|
|
1711
2032
|
| `.pf-v6-c-card__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates a card title text element. |
|
|
2033
|
+
| `.pf-v6-c-card__subtitle` | Creates a card subtitle element. |
|
|
1712
2034
|
| `.pf-v6-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-v6-c-card__body` elements. |
|
|
1713
2035
|
| `.pf-v6-c-card__footer` | `<div>` | Creates the footer of a card. |
|
|
1714
2036
|
| `.pf-v6-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
|
|
@@ -1735,4 +2057,5 @@ A card is a generic rectangular container that can be used to build other compon
|
|
|
1735
2057
|
| `.pf-m-expanded` | `.pf-v6-c-card` | Modifies the card for the expanded state. |
|
|
1736
2058
|
| `.pf-m-toggle-right` | `.pf-v6-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
|
|
1737
2059
|
| `.pf-m-full-height` | `.pf-v6-c-card` | Modifies the card to full height of its parent. |
|
|
2060
|
+
| `.pf-m-glass` | `.pf-v6-c-card` | Applies glass styles when glass theme is enabled. |
|
|
1738
2061
|
| `.pf-m-no-offset` | `.pf-v6-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
|