@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.61
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 +1 -1
- package/assets/fontawesome/_variables.scss +2 -1
- 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 +11 -0
- package/base/patternfly-svg-icons.scss +14 -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 +27 -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 +8 -6
- package/components/Brand/brand.css +3 -1
- package/components/Breadcrumb/breadcrumb.css +4 -3
- package/components/Button/button.css +121 -30
- package/components/Button/button.scss +131 -26
- package/components/CalendarMonth/calendar-month.css +4 -3
- package/components/Card/card.css +51 -13
- package/components/Card/card.scss +61 -8
- package/components/ClipboardCopy/clipboard-copy.css +7 -6
- package/components/ClipboardCopy/clipboard-copy.scss +3 -3
- package/components/CodeEditor/code-editor.css +1 -1
- package/components/CodeEditor/code-editor.scss +1 -1
- package/components/Compass/compass.css +320 -0
- package/components/Compass/compass.scss +350 -0
- package/components/DataList/data-list.css +34 -23
- package/components/DataList/data-list.scss +8 -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 +222 -73
- package/components/Drawer/drawer.scss +191 -26
- 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 +112 -16
- package/components/Masthead/masthead.scss +112 -1
- package/components/Menu/menu.css +23 -14
- package/components/MenuToggle/menu-toggle.css +26 -3
- package/components/MenuToggle/menu-toggle.scss +30 -3
- 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/Page/page.css +214 -29
- package/components/Page/page.scss +228 -13
- package/components/Pagination/pagination.scss +5 -1
- package/components/Panel/panel.css +14 -0
- package/components/Panel/panel.scss +18 -0
- 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-tree-view.css +4 -2
- package/components/Table/table.css +45 -36
- package/components/Table/table.scss +15 -11
- package/components/Tabs/tabs.css +51 -33
- package/components/Tabs/tabs.scss +54 -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 +34 -17
- package/components/ToggleGroup/toggle-group.scss +36 -20
- package/components/Toolbar/toolbar.css +47 -15
- package/components/Toolbar/toolbar.scss +34 -6
- 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 +2047 -721
- 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 +65 -5
- package/docs/components/Brand/examples/Brand.md +2 -2
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
- package/docs/components/Button/examples/Button.md +2362 -163
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
- package/docs/components/Card/examples/Card.md +207 -4
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
- package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
- package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
- package/docs/components/Compass/examples/Compass.css +17 -0
- package/docs/components/Compass/examples/Compass.md +119 -0
- package/docs/components/DataList/examples/DataList.md +406 -205
- 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 +355 -35
- package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
- 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/Icon/examples/Icon.md +92 -8
- package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
- package/docs/components/InputGroup/examples/InputGroup.md +27 -3
- 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 +26 -2
- package/docs/components/Masthead/examples/masthead.md +80 -1
- package/docs/components/Menu/examples/Menu.md +1458 -116
- package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
- 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 +798 -58
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
- package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
- package/docs/components/Page/examples/Page.md +72 -11
- package/docs/components/Pagination/examples/Pagination.md +627 -64
- package/docs/components/Panel/examples/Panel.md +12 -0
- 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.md +876 -70
- package/docs/components/Tabs/examples/Tabs.md +5908 -457
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
- package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
- package/docs/components/Toolbar/examples/Toolbar.md +490 -44
- package/docs/components/TreeView/examples/TreeView.md +1390 -130
- package/docs/components/Wizard/examples/Wizard.md +815 -72
- package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
- package/docs/demos/Alert/examples/Alert.md +359 -146
- package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
- package/docs/demos/Banner/examples/Banner.md +170 -92
- package/docs/demos/Button/examples/Button.md +13 -1
- package/docs/demos/Card/examples/Card.md +963 -128
- package/docs/demos/CardView/examples/CardView.md +435 -252
- package/docs/demos/Compass/examples/Compass.md +5930 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
- package/docs/demos/DataList/examples/DataList.md +730 -225
- package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
- package/docs/demos/Drawer/examples/Drawer.md +421 -235
- package/docs/demos/Form/examples/BasicForms.md +273 -21
- package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
- package/docs/demos/Masthead/examples/Masthead.md +787 -451
- package/docs/demos/Modal/examples/Modal.md +588 -285
- package/docs/demos/Nav/examples/Nav.md +2913 -493
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
- package/docs/demos/Page/examples/Page.md +1236 -689
- 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 +978 -385
- package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
- package/docs/demos/Table/examples/Table.md +4531 -838
- package/docs/demos/Tabs/examples/Tabs.md +653 -293
- package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
- package/docs/demos/Wizard/examples/Wizard.md +1165 -472
- 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 +34 -16
- package/patternfly-base-no-globals.css +965 -491
- package/patternfly-base.css +972 -491
- package/patternfly-charts.css +3 -3
- package/patternfly-no-globals.css +2908 -1087
- package/patternfly.css +2915 -1087
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/patternfly.scss +27 -0
- package/sass-utilities/functions.scss +32 -25
- package/sass-utilities/mixins.scss +36 -20
- package/sass-utilities/namespaces-components.scss +6 -0
- package/sass-utilities/scss-variables.scss +3 -0
|
@@ -67,12 +67,14 @@
|
|
|
67
67
|
|
|
68
68
|
.pf-v6-c-slider {
|
|
69
69
|
--pf-v6-c-slider__rail-track--before--fill--direction: right;
|
|
70
|
-
display: flex;
|
|
71
70
|
}
|
|
72
71
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider {
|
|
73
72
|
--pf-v6-c-slider__rail-track--before--fill--direction: left;
|
|
74
73
|
}
|
|
75
74
|
|
|
75
|
+
.pf-v6-c-slider {
|
|
76
|
+
display: flex;
|
|
77
|
+
}
|
|
76
78
|
.pf-v6-c-slider.pf-m-disabled {
|
|
77
79
|
--pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
|
|
78
80
|
--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
|
|
@@ -135,6 +137,12 @@
|
|
|
135
137
|
|
|
136
138
|
.pf-v6-c-slider__step-tick {
|
|
137
139
|
transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
|
|
140
|
+
}
|
|
141
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
|
|
142
|
+
transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.pf-v6-c-slider__step-tick {
|
|
138
146
|
position: absolute;
|
|
139
147
|
inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
|
|
140
148
|
inset-inline-start: 0;
|
|
@@ -144,22 +152,28 @@
|
|
|
144
152
|
border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
|
|
145
153
|
border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
|
|
146
154
|
}
|
|
147
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
|
|
148
|
-
transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
|
|
149
|
-
}
|
|
150
155
|
|
|
151
156
|
.pf-v6-c-slider__step-label {
|
|
152
157
|
transform: translateX(var(--pf-v6-c-slider__step-label--TranslateX));
|
|
153
|
-
position: absolute;
|
|
154
|
-
inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
|
|
155
|
-
word-break: normal;
|
|
156
158
|
}
|
|
157
159
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
|
|
158
160
|
transform: translateX(calc(var(--pf-v6-c-slider__step-label--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
|
|
159
161
|
}
|
|
160
162
|
|
|
163
|
+
.pf-v6-c-slider__step-label {
|
|
164
|
+
position: absolute;
|
|
165
|
+
inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
|
|
166
|
+
word-break: normal;
|
|
167
|
+
}
|
|
168
|
+
|
|
161
169
|
.pf-v6-c-slider__thumb {
|
|
162
170
|
transform: translate(var(--pf-v6-c-slider__thumb--TranslateX), var(--pf-v6-c-slider__thumb--TranslateY));
|
|
171
|
+
}
|
|
172
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
|
|
173
|
+
transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.pf-v6-c-slider__thumb {
|
|
163
177
|
position: absolute;
|
|
164
178
|
inset-block-start: var(--pf-v6-c-slider__thumb--InsetBlockStart);
|
|
165
179
|
inset-inline-start: var(--pf-v6-c-slider__thumb--InsetInlineStart);
|
|
@@ -171,12 +185,14 @@
|
|
|
171
185
|
border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
|
|
172
186
|
box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
|
|
173
187
|
}
|
|
174
|
-
|
|
175
|
-
transform: translate(
|
|
188
|
+
.pf-v6-c-slider__thumb::before {
|
|
189
|
+
transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
|
|
190
|
+
}
|
|
191
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
|
|
192
|
+
transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
|
|
176
193
|
}
|
|
177
194
|
|
|
178
195
|
.pf-v6-c-slider__thumb::before {
|
|
179
|
-
transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
|
|
180
196
|
position: absolute;
|
|
181
197
|
inset-block-start: 50%;
|
|
182
198
|
inset-inline-start: 50%;
|
|
@@ -185,10 +201,6 @@
|
|
|
185
201
|
content: "";
|
|
186
202
|
border-radius: var(--pf-v6-c-slider__thumb--before--BorderRadius);
|
|
187
203
|
}
|
|
188
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
|
|
189
|
-
transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
|
|
190
|
-
}
|
|
191
|
-
|
|
192
204
|
.pf-v6-c-slider__thumb:hover {
|
|
193
205
|
--pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--hover--BoxShadow);
|
|
194
206
|
}
|
|
@@ -205,16 +217,18 @@
|
|
|
205
217
|
}
|
|
206
218
|
.pf-v6-c-slider__value.pf-m-floating {
|
|
207
219
|
transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
|
|
220
|
+
}
|
|
221
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
|
|
222
|
+
transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.pf-v6-c-slider__value.pf-m-floating {
|
|
208
226
|
--pf-v6-c-slider__value--MarginInlineStart: 0;
|
|
209
227
|
position: absolute;
|
|
210
228
|
inset-block-start: 0;
|
|
211
229
|
inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
|
|
212
230
|
z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
|
|
213
231
|
}
|
|
214
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
|
|
215
|
-
transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
|
|
216
|
-
}
|
|
217
|
-
|
|
218
232
|
.pf-v6-c-slider__value .pf-v6-c-form-control {
|
|
219
233
|
width: var(--pf-v6-c-slider__value--c-form-control--Width);
|
|
220
234
|
}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
--pf-v6-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
|
|
26
26
|
--pf-v6-c-switch__toggle--Height: calc(var(--pf-v6-c-switch--FontSize) * var(--pf-v6-c-switch--LineHeight));
|
|
27
27
|
--pf-v6-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
28
|
-
--pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
|
|
28
|
+
--pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--control--default);
|
|
29
29
|
--pf-v6-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
|
|
30
30
|
--pf-v6-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
31
31
|
--pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
|
|
@@ -78,12 +78,14 @@
|
|
|
78
78
|
}
|
|
79
79
|
.pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
|
|
80
80
|
transform: translate(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX), -50%);
|
|
81
|
-
background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
|
|
82
81
|
}
|
|
83
82
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
|
|
84
83
|
transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
|
|
85
84
|
}
|
|
86
85
|
|
|
86
|
+
.pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
|
|
87
|
+
background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
|
|
88
|
+
}
|
|
87
89
|
.pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
|
|
88
90
|
color: var(--pf-v6-c-switch__input--not-checked__label--Color);
|
|
89
91
|
}
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
// Switch toggle
|
|
37
37
|
--#{$switch}__toggle--Height: calc(var(--#{$switch}--FontSize) * var(--#{$switch}--LineHeight));
|
|
38
38
|
--#{$switch}__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
39
|
-
--#{$switch}__toggle--BorderColor: var(--pf-t--global--border--color--default);
|
|
39
|
+
--#{$switch}__toggle--BorderColor: var(--pf-t--global--border--color--control--default);
|
|
40
40
|
--#{$switch}__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
|
|
41
41
|
--#{$switch}__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
42
42
|
--#{$switch}__toggle--before--Width: calc(var(--#{$switch}--FontSize) - var(--#{$switch}__toggle-icon--Offset));
|
|
@@ -367,7 +367,7 @@
|
|
|
367
367
|
--pf-v6-c-table--cell--Width: auto;
|
|
368
368
|
}
|
|
369
369
|
|
|
370
|
-
@
|
|
370
|
+
@container pf-v6-contain-table (max-width: calc(48rem - 1px)) {
|
|
371
371
|
.pf-m-grid-md.pf-v6-c-table {
|
|
372
372
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
373
373
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -645,15 +645,13 @@
|
|
|
645
645
|
.pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
|
|
646
646
|
text-align: end;
|
|
647
647
|
}
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
648
|
+
@media screen and (max-width: 36rem) {
|
|
649
|
+
.pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
|
|
650
|
+
grid-row-start: 1;
|
|
651
|
+
grid-column-start: 2;
|
|
652
|
+
margin-inline-start: 0;
|
|
653
|
+
}
|
|
654
654
|
}
|
|
655
|
-
}
|
|
656
|
-
@media screen and (max-width: calc(48rem - 1px)) {
|
|
657
655
|
.pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
|
|
658
656
|
grid-column: 2;
|
|
659
657
|
grid-row: 2;
|
|
@@ -679,7 +677,7 @@
|
|
|
679
677
|
}
|
|
680
678
|
}
|
|
681
679
|
|
|
682
|
-
@
|
|
680
|
+
@container pf-v6-contain-table (max-width: calc(62rem - 1px)) {
|
|
683
681
|
.pf-m-grid-lg.pf-v6-c-table {
|
|
684
682
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
685
683
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -957,15 +955,13 @@
|
|
|
957
955
|
.pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
|
|
958
956
|
text-align: end;
|
|
959
957
|
}
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
958
|
+
@media screen and (max-width: 36rem) {
|
|
959
|
+
.pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
|
|
960
|
+
grid-row-start: 1;
|
|
961
|
+
grid-column-start: 2;
|
|
962
|
+
margin-inline-start: 0;
|
|
963
|
+
}
|
|
966
964
|
}
|
|
967
|
-
}
|
|
968
|
-
@media screen and (max-width: calc(62rem - 1px)) {
|
|
969
965
|
.pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
|
|
970
966
|
grid-column: 2;
|
|
971
967
|
grid-row: 2;
|
|
@@ -991,7 +987,7 @@
|
|
|
991
987
|
}
|
|
992
988
|
}
|
|
993
989
|
|
|
994
|
-
@
|
|
990
|
+
@container pf-v6-contain-table (max-width: calc(75rem - 1px)) {
|
|
995
991
|
.pf-m-grid-xl.pf-v6-c-table {
|
|
996
992
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
997
993
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -1269,15 +1265,13 @@
|
|
|
1269
1265
|
.pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
|
|
1270
1266
|
text-align: end;
|
|
1271
1267
|
}
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1268
|
+
@media screen and (max-width: 36rem) {
|
|
1269
|
+
.pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
|
|
1270
|
+
grid-row-start: 1;
|
|
1271
|
+
grid-column-start: 2;
|
|
1272
|
+
margin-inline-start: 0;
|
|
1273
|
+
}
|
|
1278
1274
|
}
|
|
1279
|
-
}
|
|
1280
|
-
@media screen and (max-width: calc(75rem - 1px)) {
|
|
1281
1275
|
.pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
|
|
1282
1276
|
grid-column: 2;
|
|
1283
1277
|
grid-row: 2;
|
|
@@ -1303,7 +1297,7 @@
|
|
|
1303
1297
|
}
|
|
1304
1298
|
}
|
|
1305
1299
|
|
|
1306
|
-
@
|
|
1300
|
+
@container pf-v6-contain-table (max-width: calc(90.625rem - 1px)) {
|
|
1307
1301
|
.pf-m-grid-2xl.pf-v6-c-table {
|
|
1308
1302
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
|
|
1309
1303
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
|
|
@@ -1581,15 +1575,13 @@
|
|
|
1581
1575
|
.pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
|
|
1582
1576
|
text-align: end;
|
|
1583
1577
|
}
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1578
|
+
@media screen and (max-width: 36rem) {
|
|
1579
|
+
.pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
|
|
1580
|
+
grid-row-start: 1;
|
|
1581
|
+
grid-column-start: 2;
|
|
1582
|
+
margin-inline-start: 0;
|
|
1583
|
+
}
|
|
1590
1584
|
}
|
|
1591
|
-
}
|
|
1592
|
-
@media screen and (max-width: calc(90.625rem - 1px)) {
|
|
1593
1585
|
.pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
|
|
1594
1586
|
grid-column: 2;
|
|
1595
1587
|
grid-row: 2;
|
|
@@ -7,25 +7,25 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.pf-m-grid-md.#{$table} {
|
|
10
|
-
@
|
|
10
|
+
@container #{$pf-prefix}contain-table (max-width: #{pf-v6-max-width-bp($pf-v6-global--breakpoint--md)}) {
|
|
11
11
|
@content;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.pf-m-grid-lg.#{$table} {
|
|
16
|
-
@
|
|
16
|
+
@container #{$pf-prefix}contain-table (max-width: #{pf-v6-max-width-bp($pf-v6-global--breakpoint--lg)}) {
|
|
17
17
|
@content;
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.pf-m-grid-xl.#{$table} {
|
|
22
|
-
@
|
|
22
|
+
@container #{$pf-prefix}contain-table (max-width: #{pf-v6-max-width-bp($pf-v6-global--breakpoint--xl)}) {
|
|
23
23
|
@content;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.pf-m-grid-2xl.#{$table} {
|
|
28
|
-
@
|
|
28
|
+
@container #{$pf-prefix}contain-table (max-width: #{pf-v6-max-width-bp($pf-v6-global--breakpoint--2xl)}) {
|
|
29
29
|
@content;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -67,13 +67,15 @@
|
|
|
67
67
|
}
|
|
68
68
|
.pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
|
|
69
69
|
transform: translateX(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX));
|
|
70
|
-
position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
|
|
71
|
-
inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
|
|
72
70
|
}
|
|
73
71
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
|
|
74
72
|
transform: translateX(calc(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
|
|
75
73
|
}
|
|
76
74
|
|
|
75
|
+
.pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
|
|
76
|
+
position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
|
|
77
|
+
inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
|
|
78
|
+
}
|
|
77
79
|
.pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
|
|
78
80
|
min-width: var(--pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
|
|
79
81
|
}
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
--pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
51
51
|
--pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
52
52
|
--pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
53
|
-
--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate:
|
|
53
|
+
--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 0;
|
|
54
54
|
--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
55
55
|
--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
56
|
-
--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate:
|
|
56
|
+
--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
|
|
57
57
|
--pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
58
58
|
--pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
59
59
|
--pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
@@ -87,6 +87,15 @@
|
|
|
87
87
|
--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
|
|
88
88
|
--pf-v6-c-table__expandable-row--TranslateY: 0;
|
|
89
89
|
--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
|
|
90
|
+
}
|
|
91
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
92
|
+
.pf-v6-c-table {
|
|
93
|
+
--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
94
|
+
--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
95
|
+
--pf-v6-c-table__expandable-row--TranslateY: -.5rem;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
.pf-v6-c-table {
|
|
90
99
|
--pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
91
100
|
--pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
92
101
|
--pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
@@ -111,14 +120,14 @@
|
|
|
111
120
|
--pf-v6-c-table__th--m-help--MinWidth: 11ch;
|
|
112
121
|
--pf-v6-c-table__column-help--MarginInlineStart: var(--pf-t--global--spacer--sm);
|
|
113
122
|
--pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
|
|
114
|
-
--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor:
|
|
123
|
+
--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: transparent;
|
|
115
124
|
--pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
|
|
116
|
-
--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--
|
|
117
|
-
--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--
|
|
125
|
+
--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
126
|
+
--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
118
127
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
119
128
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
|
|
120
129
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
|
|
121
|
-
--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth:
|
|
130
|
+
--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
|
|
122
131
|
--pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
|
|
123
132
|
--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
124
133
|
--pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
@@ -155,18 +164,19 @@
|
|
|
155
164
|
--pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
156
165
|
--pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
157
166
|
}
|
|
158
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
|
159
|
-
.pf-v6-c-table {
|
|
160
|
-
--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
161
|
-
--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
162
|
-
--pf-v6-c-table__expandable-row--TranslateY: -.5rem;
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
167
|
|
|
166
168
|
.pf-v6-c-table {
|
|
167
169
|
width: 100%;
|
|
168
170
|
background-color: var(--pf-v6-c-table--BackgroundColor);
|
|
169
171
|
}
|
|
172
|
+
:where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass), .pf-v6-c-table.pf-m-plain {
|
|
173
|
+
--pf-v6-c-table--BackgroundColor: transparent;
|
|
174
|
+
--pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
|
|
175
|
+
--pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
|
|
176
|
+
--pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0;
|
|
177
|
+
--pf-v6-c-table__control-row--BackgroundColor: transparent;
|
|
178
|
+
}
|
|
179
|
+
|
|
170
180
|
.pf-v6-c-table.pf-m-fixed {
|
|
171
181
|
table-layout: fixed;
|
|
172
182
|
}
|
|
@@ -207,9 +217,6 @@
|
|
|
207
217
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
208
218
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
|
|
209
219
|
}
|
|
210
|
-
.pf-v6-c-table.pf-m-plain {
|
|
211
|
-
--pf-v6-c-table--BackgroundColor: transparent;
|
|
212
|
-
}
|
|
213
220
|
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
214
221
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
215
222
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
@@ -226,22 +233,6 @@
|
|
|
226
233
|
--pf-v6-hidden-visible--hidden--Display: none;
|
|
227
234
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
228
235
|
display: var(--pf-v6-hidden-visible--Display);
|
|
229
|
-
position: relative;
|
|
230
|
-
width: var(--pf-v6-c-table--cell--Width);
|
|
231
|
-
min-width: var(--pf-v6-c-table--cell--MinWidth);
|
|
232
|
-
max-width: var(--pf-v6-c-table--cell--MaxWidth);
|
|
233
|
-
padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
|
|
234
|
-
padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
|
|
235
|
-
padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
|
|
236
|
-
padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
|
|
237
|
-
overflow: var(--pf-v6-c-table--cell--Overflow);
|
|
238
|
-
font-size: var(--pf-v6-c-table--cell--FontSize);
|
|
239
|
-
font-weight: var(--pf-v6-c-table--cell--FontWeight);
|
|
240
|
-
line-height: var(--pf-v6-c-table--cell--LineHeight);
|
|
241
|
-
color: var(--pf-v6-c-table--cell--Color);
|
|
242
|
-
text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
|
|
243
|
-
word-break: var(--pf-v6-c-table--cell--WordBreak);
|
|
244
|
-
white-space: var(--pf-v6-c-table--cell--WhiteSpace);
|
|
245
236
|
}
|
|
246
237
|
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden {
|
|
247
238
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
@@ -286,6 +277,24 @@
|
|
|
286
277
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
287
278
|
}
|
|
288
279
|
}
|
|
280
|
+
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
|
|
281
|
+
position: relative;
|
|
282
|
+
width: var(--pf-v6-c-table--cell--Width);
|
|
283
|
+
min-width: var(--pf-v6-c-table--cell--MinWidth);
|
|
284
|
+
max-width: var(--pf-v6-c-table--cell--MaxWidth);
|
|
285
|
+
padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
|
|
286
|
+
padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
|
|
287
|
+
padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
|
|
288
|
+
padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
|
|
289
|
+
overflow: var(--pf-v6-c-table--cell--Overflow);
|
|
290
|
+
font-size: var(--pf-v6-c-table--cell--FontSize);
|
|
291
|
+
font-weight: var(--pf-v6-c-table--cell--FontWeight);
|
|
292
|
+
line-height: var(--pf-v6-c-table--cell--LineHeight);
|
|
293
|
+
color: var(--pf-v6-c-table--cell--Color);
|
|
294
|
+
text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
|
|
295
|
+
word-break: var(--pf-v6-c-table--cell--WordBreak);
|
|
296
|
+
white-space: var(--pf-v6-c-table--cell--WhiteSpace);
|
|
297
|
+
}
|
|
289
298
|
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
|
|
290
299
|
padding-inline-start: var(--pf-v6-c-table--cell--first-last-child--PaddingInline);
|
|
291
300
|
}
|
|
@@ -642,16 +651,16 @@
|
|
|
642
651
|
.pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
|
|
643
652
|
transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
|
|
644
653
|
}
|
|
654
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
|
|
655
|
+
scale: -1 1;
|
|
656
|
+
}
|
|
657
|
+
|
|
645
658
|
.pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
|
|
646
659
|
transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
|
|
647
660
|
transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
|
|
648
661
|
transition-property: transform;
|
|
649
662
|
transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
|
|
650
663
|
}
|
|
651
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
|
|
652
|
-
scale: -1 1;
|
|
653
|
-
}
|
|
654
|
-
|
|
655
664
|
.pf-v6-c-table__toggle svg {
|
|
656
665
|
pointer-events: none;
|
|
657
666
|
}
|
|
@@ -83,10 +83,10 @@
|
|
|
83
83
|
--#{$table}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
84
84
|
--#{$table}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
85
85
|
--#{$table}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
86
|
-
--#{$table}__toggle--c-button__toggle-icon--Rotate:
|
|
86
|
+
--#{$table}__toggle--c-button__toggle-icon--Rotate: 0;
|
|
87
87
|
--#{$table}__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
88
88
|
--#{$table}__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
89
|
-
--#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate:
|
|
89
|
+
--#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
|
|
90
90
|
|
|
91
91
|
// * Table button
|
|
92
92
|
--#{$table}__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
@@ -180,16 +180,16 @@
|
|
|
180
180
|
|
|
181
181
|
// * Table compound expansion toggle button
|
|
182
182
|
--#{$table}__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
|
|
183
|
-
--#{$table}__compound-expansion-toggle__button--BackgroundColor:
|
|
183
|
+
--#{$table}__compound-expansion-toggle__button--BackgroundColor: transparent;
|
|
184
184
|
--#{$table}__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
|
|
185
|
-
--#{$table}__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--
|
|
186
|
-
--#{$table}__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--
|
|
185
|
+
--#{$table}__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
186
|
+
--#{$table}__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
187
187
|
|
|
188
188
|
// * Table compound expansion toggle button after
|
|
189
189
|
--#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
190
190
|
--#{$table}__compound-expansion-toggle__button--after--BorderRadius: inherit;
|
|
191
191
|
--#{$table}__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
|
|
192
|
-
--#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth:
|
|
192
|
+
--#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
|
|
193
193
|
--#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
|
|
194
194
|
|
|
195
195
|
// * Compound expandable
|
|
@@ -266,6 +266,15 @@
|
|
|
266
266
|
width: 100%;
|
|
267
267
|
background-color: var(--#{$table}--BackgroundColor);
|
|
268
268
|
|
|
269
|
+
@at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
|
|
270
|
+
&.pf-m-plain {
|
|
271
|
+
--#{$table}--BackgroundColor: transparent;
|
|
272
|
+
--#{$table}__expandable-row-content--BackgroundColor: transparent;
|
|
273
|
+
--#{$table}__expandable-row-content--PaddingInlineStart: 0;
|
|
274
|
+
--#{$table}__expandable-row-content--PaddingInlineEnd: 0;
|
|
275
|
+
--#{$table}__control-row--BackgroundColor: transparent;
|
|
276
|
+
}
|
|
277
|
+
|
|
269
278
|
&.pf-m-fixed {
|
|
270
279
|
table-layout: fixed;
|
|
271
280
|
}
|
|
@@ -324,11 +333,6 @@
|
|
|
324
333
|
}
|
|
325
334
|
}
|
|
326
335
|
|
|
327
|
-
// - Table plain
|
|
328
|
-
&.pf-m-plain {
|
|
329
|
-
--#{$table}--BackgroundColor: transparent;
|
|
330
|
-
}
|
|
331
|
-
|
|
332
336
|
// - Table striped
|
|
333
337
|
// stylelint-disable
|
|
334
338
|
&.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
|