@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71
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/CODE_OF_CONDUCT.md +1 -2
- package/README.md +13 -3
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/images/PF-Backdrop.svg +1 -0
- package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
- package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
- package/assets/images/PF-IconLogo-Reverse.svg +14 -0
- package/assets/images/PF-IconLogo-color.svg +17 -0
- package/assets/images/PF-IconLogo.svg +17 -0
- package/assets/images/logo__pf--reverse-on-md.svg +1 -1
- package/assets/images/pf-background.svg +22 -0
- package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
- package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
- package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
- package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
- package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
- package/assets/images/pf_logo_white.hbs +35 -0
- package/assets/images/pf_logo_white.svg +38 -0
- package/assets/pficon/pf-v5-pficon.woff2 +0 -0
- package/assets/pficon/pficon.scss +6 -129
- package/base/_common.scss +29 -4
- package/base/_globals.scss +5 -7
- package/base/_variables.scss +8 -6
- package/base/patternfly-common.css +24 -6
- package/base/patternfly-globals.css +5 -4
- package/base/patternfly-icons.css +5 -1
- package/base/patternfly-pf-icons.css +5 -1
- package/base/patternfly-variables.css +859 -833
- package/base/tokens/_tokens-dark.scss +306 -284
- package/base/tokens/_tokens-default.scss +415 -329
- package/base/tokens/_tokens-font.scss +41 -46
- package/base/tokens/_tokens-palette.scss +68 -68
- package/base/tokens/_workspace-overrides.scss +7 -0
- package/components/AboutModalBox/about-modal-box.css +78 -104
- package/components/AboutModalBox/about-modal-box.scss +62 -74
- package/components/Accordion/accordion.css +96 -175
- package/components/Accordion/accordion.scss +106 -193
- package/components/ActionList/action-list.css +18 -17
- package/components/ActionList/action-list.scss +26 -16
- package/components/Alert/alert-group.css +27 -20
- package/components/Alert/alert-group.scss +27 -20
- package/components/Alert/alert.css +74 -95
- package/components/Alert/alert.scss +76 -89
- package/components/AppLauncher/app-launcher.css +32 -23
- package/components/AppLauncher/app-launcher.scss +32 -23
- package/components/Avatar/avatar.css +10 -13
- package/components/Avatar/avatar.scss +10 -17
- package/components/BackToTop/back-to-top.css +17 -16
- package/components/BackToTop/back-to-top.scss +14 -14
- package/components/Backdrop/backdrop.css +8 -4
- package/components/Backdrop/backdrop.scss +7 -4
- package/components/BackgroundImage/background-image.css +11 -4
- package/components/BackgroundImage/background-image.scss +13 -4
- package/components/Badge/badge.css +25 -17
- package/components/Badge/badge.scss +27 -19
- package/components/Banner/banner.css +95 -69
- package/components/Banner/banner.scss +100 -34
- package/components/Breadcrumb/breadcrumb.css +28 -19
- package/components/Breadcrumb/breadcrumb.scss +26 -19
- package/components/Button/button.css +437 -359
- package/components/Button/button.scss +495 -483
- package/components/CalendarMonth/calendar-month.css +25 -15
- package/components/CalendarMonth/calendar-month.scss +23 -15
- package/components/Card/card.css +117 -203
- package/components/Card/card.scss +137 -246
- package/components/Check/check.css +25 -22
- package/components/Check/check.scss +26 -24
- package/components/Chip/chip-group.css +6 -6
- package/components/Chip/chip-group.scss +6 -6
- package/components/Chip/chip.css +16 -9
- package/components/Chip/chip.scss +17 -9
- package/components/ClipboardCopy/clipboard-copy.css +47 -41
- package/components/ClipboardCopy/clipboard-copy.scss +50 -34
- package/components/CodeBlock/code-block.css +24 -12
- package/components/CodeBlock/code-block.scss +24 -13
- package/components/CodeEditor/code-editor.css +31 -22
- package/components/CodeEditor/code-editor.scss +30 -21
- package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
- package/components/Content/content.css +40 -37
- package/components/Content/content.scss +40 -37
- package/components/ContextSelector/context-selector.css +41 -26
- package/components/ContextSelector/context-selector.scss +40 -25
- package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
- package/components/DataList/data-list-grid.css +21 -21
- package/components/DataList/data-list-grid.scss +3 -3
- package/components/DataList/data-list.css +165 -209
- package/components/DataList/data-list.scss +138 -185
- package/components/DatePicker/date-picker.css +8 -8
- package/components/DatePicker/date-picker.scss +8 -8
- package/components/DescriptionList/description-list.css +47 -39
- package/components/DescriptionList/description-list.scss +33 -30
- package/components/Divider/divider.css +97 -177
- package/components/Divider/divider.scss +60 -79
- package/components/DragDrop/drag-drop.css +26 -22
- package/components/DragDrop/drag-drop.scss +26 -25
- package/components/Drawer/drawer.css +216 -158
- package/components/Drawer/drawer.scss +199 -150
- package/components/Dropdown/dropdown.css +76 -69
- package/components/Dropdown/dropdown.scss +67 -62
- package/components/DualListSelector/dual-list-selector.css +29 -15
- package/components/DualListSelector/dual-list-selector.scss +30 -15
- package/components/EmptyState/empty-state.css +64 -38
- package/components/EmptyState/empty-state.scss +70 -38
- package/components/ExpandableSection/expandable-section.css +75 -66
- package/components/ExpandableSection/expandable-section.scss +82 -80
- package/components/FileUpload/file-upload.css +31 -43
- package/components/FileUpload/file-upload.scss +31 -49
- package/components/Form/form.css +111 -154
- package/components/Form/form.scss +101 -160
- package/components/FormControl/form-control.css +95 -111
- package/components/FormControl/form-control.scss +97 -92
- package/components/HelperText/helper-text.css +29 -35
- package/components/HelperText/helper-text.scss +31 -41
- package/components/Hint/hint.css +37 -27
- package/components/Hint/hint.scss +37 -30
- package/components/Icon/icon.css +155 -19
- package/components/Icon/icon.scss +188 -21
- package/components/InlineEdit/inline-edit.css +12 -11
- package/components/InlineEdit/inline-edit.scss +12 -11
- package/components/InputGroup/input-group.css +32 -42
- package/components/InputGroup/input-group.scss +31 -33
- package/components/JumpLinks/jump-links.css +61 -58
- package/components/JumpLinks/jump-links.scss +61 -60
- package/components/Label/label-group.css +48 -50
- package/components/Label/label-group.scss +48 -51
- package/components/Label/label.css +382 -363
- package/components/Label/label.scss +441 -356
- package/components/List/list.css +25 -25
- package/components/List/list.scss +26 -26
- package/components/LogViewer/log-viewer.css +14 -14
- package/components/LogViewer/log-viewer.scss +14 -14
- package/components/Login/login.css +104 -122
- package/components/Login/login.scss +92 -91
- package/components/Masthead/masthead.css +262 -506
- package/components/Masthead/masthead.scss +123 -289
- package/components/Menu/menu.css +82 -65
- package/components/Menu/menu.scss +85 -69
- package/components/MenuToggle/menu-toggle.css +37 -31
- package/components/MenuToggle/menu-toggle.scss +37 -33
- package/components/ModalBox/modal-box.css +76 -69
- package/components/ModalBox/modal-box.scss +74 -70
- package/components/MultipleFileUpload/multiple-file-upload.css +87 -57
- package/components/MultipleFileUpload/multiple-file-upload.scss +92 -60
- package/components/Nav/nav.css +248 -899
- package/components/Nav/nav.scss +304 -1059
- package/components/Nav/themes/dark/nav.scss +2 -2
- package/components/NotificationBadge/notification-badge.css +66 -85
- package/components/NotificationBadge/notification-badge.scss +72 -103
- package/components/NotificationDrawer/notification-drawer.css +130 -128
- package/components/NotificationDrawer/notification-drawer.scss +130 -129
- package/components/NumberInput/number-input.css +10 -10
- package/components/NumberInput/number-input.scss +9 -14
- package/components/OptionsMenu/options-menu.css +43 -31
- package/components/OptionsMenu/options-menu.scss +43 -31
- package/components/OverflowMenu/overflow-menu.css +17 -47
- package/components/OverflowMenu/overflow-menu.scss +27 -65
- package/components/Page/page.css +182 -232
- package/components/Page/page.scss +130 -195
- package/components/Pagination/pagination.css +74 -121
- package/components/Pagination/pagination.scss +55 -125
- package/components/Panel/panel.css +40 -30
- package/components/Panel/panel.scss +42 -33
- package/components/Popover/popover.css +108 -87
- package/components/Popover/popover.scss +120 -109
- package/components/Progress/progress.css +40 -52
- package/components/Progress/progress.scss +48 -62
- package/components/ProgressStepper/progress-stepper.css +98 -89
- package/components/ProgressStepper/progress-stepper.scss +90 -84
- package/components/Radio/radio.css +30 -23
- package/components/Radio/radio.scss +31 -25
- package/components/Select/select.css +56 -47
- package/components/Select/select.scss +56 -47
- package/components/Sidebar/sidebar.css +31 -14
- package/components/Sidebar/sidebar.scss +34 -16
- package/components/SimpleList/simple-list.css +45 -56
- package/components/SimpleList/simple-list.scss +51 -55
- package/components/Skeleton/skeleton.css +24 -25
- package/components/Skeleton/skeleton.scss +21 -26
- package/components/SkipToContent/skip-to-content.css +9 -6
- package/components/SkipToContent/skip-to-content.scss +8 -6
- package/components/Slider/slider.css +80 -55
- package/components/Slider/slider.scss +96 -65
- package/components/Spinner/spinner.css +17 -34
- package/components/Spinner/spinner.scss +19 -47
- package/components/Switch/switch.css +49 -41
- package/components/Switch/switch.scss +51 -42
- package/components/TabContent/tab-content.css +21 -12
- package/components/TabContent/tab-content.scss +22 -15
- package/components/Table/table-grid.css +256 -195
- package/components/Table/table-grid.scss +53 -39
- package/components/Table/table-scrollable.css +4 -4
- package/components/Table/table-scrollable.scss +6 -4
- package/components/Table/table-tree-view.css +112 -105
- package/components/Table/table-tree-view.scss +38 -33
- package/components/Table/table.css +105 -89
- package/components/Table/table.scss +105 -89
- package/components/Tabs/tabs.css +210 -214
- package/components/Tabs/tabs.scss +222 -254
- package/components/TextInputGroup/text-input-group.css +15 -15
- package/components/TextInputGroup/text-input-group.scss +15 -15
- package/components/Tile/tile.css +47 -88
- package/components/Tile/tile.scss +45 -91
- package/components/Timestamp/timestamp.css +12 -9
- package/components/Timestamp/timestamp.scss +11 -10
- package/components/Title/title.css +70 -19
- package/components/Title/title.scss +90 -20
- package/components/ToggleGroup/toggle-group.css +68 -59
- package/components/ToggleGroup/toggle-group.scss +72 -57
- package/components/Toolbar/toolbar.css +2553 -1054
- package/components/Toolbar/toolbar.scss +234 -516
- package/components/Tooltip/tooltip.css +74 -44
- package/components/Tooltip/tooltip.scss +93 -77
- package/components/TreeView/tree-view.css +48 -27
- package/components/TreeView/tree-view.scss +50 -28
- package/components/Truncate/truncate.css +13 -0
- package/components/Truncate/truncate.scss +19 -3
- package/components/Wizard/wizard.css +57 -36
- package/components/Wizard/wizard.scss +57 -36
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
- package/docs/components/Accordion/examples/Accordion.md +614 -416
- package/docs/components/ActionList/examples/ActionList.md +73 -22
- package/docs/components/Alert/examples/Alert.md +3 -3
- package/docs/components/Avatar/examples/Avatar.md +5 -19
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
- package/docs/components/Badge/examples/Badge.md +21 -0
- package/docs/components/Banner/examples/Banner.md +48 -25
- package/docs/components/Brand/examples/Brand.css +12 -0
- package/docs/components/Brand/examples/Brand.md +51 -32
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
- package/docs/components/Button/examples/Button.css +6 -2
- package/docs/components/Button/examples/Button.md +1425 -87
- package/docs/components/Card/examples/Card.md +565 -148
- package/docs/components/Check/examples/Check.md +71 -58
- package/docs/components/Chip/examples/Chip.md +1 -1
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
- package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
- package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
- package/docs/components/Content/examples/Content.md +5 -5
- package/docs/components/Divider/examples/Divider.css +3 -1
- package/docs/components/Divider/examples/Divider.md +4 -5
- package/docs/components/DragDrop/examples/DragDrop.css +3 -3
- package/docs/components/Drawer/examples/Drawer.md +294 -256
- package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
- package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
- package/docs/components/EmptyState/examples/EmptyState.md +45 -1
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
- package/docs/components/FileUpload/examples/FileUpload.md +112 -53
- package/docs/components/Form/examples/Form.md +134 -89
- package/docs/components/Icon/examples/Icon.md +82 -11
- package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
- package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
- package/docs/components/Label/examples/Label.css +4 -0
- package/docs/components/Label/examples/Label.md +3091 -704
- package/docs/components/LogViewer/examples/LogViewer.css +2 -2
- package/docs/components/LogViewer/examples/LogViewer.md +300 -210
- package/docs/components/Login/examples/Login.md +10 -5
- package/docs/components/Masthead/examples/masthead.md +443 -65
- package/docs/components/Menu/examples/Menu.css +8 -0
- package/docs/components/Menu/examples/Menu.md +594 -543
- package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
- package/docs/components/ModalBox/examples/ModalBox.css +3 -8
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
- package/docs/components/Nav/examples/Navigation.css +3 -42
- package/docs/components/Nav/examples/Navigation.md +305 -353
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
- package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
- package/docs/components/Page/examples/Page.css +0 -8
- package/docs/components/Page/examples/Page.md +22 -21
- package/docs/components/Pagination/examples/Pagination.md +663 -637
- package/docs/components/Panel/examples/Panel.md +12 -0
- package/docs/components/Popover/examples/Popover.css +4 -9
- package/docs/components/Popover/examples/Popover.md +1 -1
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
- package/docs/components/Radio/examples/Radio.md +62 -54
- package/docs/components/Select/deprecated/Select.md +184 -177
- package/docs/components/Sidebar/examples/Sidebar.md +19 -0
- package/docs/components/SimpleList/examples/SimpleList.md +3 -3
- package/docs/components/TabContent/examples/TabContent.md +10 -10
- package/docs/components/Table/examples/Table.css +2 -2
- package/docs/components/Table/examples/Table.md +10 -10
- package/docs/components/Tabs/examples/Tabs.css +1 -1
- package/docs/components/Tabs/examples/Tabs.md +1025 -826
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
- package/docs/components/Tile/examples/Tile.css +1 -1
- package/docs/components/Tile/examples/Tile.md +264 -144
- package/docs/components/Title/examples/Title.md +18 -0
- package/docs/components/Toolbar/examples/Toolbar.css +20 -15
- package/docs/components/Toolbar/examples/Toolbar.md +1211 -3487
- package/docs/components/Tooltip/examples/Tooltip.css +4 -0
- package/docs/components/Tooltip/examples/Tooltip.md +3 -1
- package/docs/components/Truncate/examples/Truncate.css +2 -2
- package/docs/components/Truncate/examples/Truncate.md +2 -2
- package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
- package/docs/demos/Alert/examples/Alert.md +330 -87
- package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
- package/docs/demos/Banner/examples/Banner.md +211 -60
- package/docs/demos/Card/examples/Card.css +3 -3
- package/docs/demos/Card/examples/Card.md +28 -12
- package/docs/demos/CardView/examples/CardView.md +265 -207
- package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
- package/docs/demos/Dashboard/examples/Dashboard.md +105 -32
- package/docs/demos/DataList/examples/DataList.md +1002 -935
- package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
- package/docs/demos/Drawer/examples/Drawer.md +640 -251
- package/docs/demos/Form/examples/BasicForms.md +138 -84
- package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
- package/docs/demos/Masthead/examples/Masthead.md +786 -342
- package/docs/demos/Modal/examples/Modal.md +645 -198
- package/docs/demos/Nav/examples/Nav.md +691 -902
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
- package/docs/demos/Page/examples/Page.md +942 -273
- package/docs/demos/Page/examples/Penta.md +66 -26
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1333 -946
- package/docs/demos/Skeleton/examples/Skeleton.md +109 -64
- package/docs/demos/Table/examples/Table.md +3857 -3418
- package/docs/demos/Tabs/examples/Tabs.md +664 -215
- package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
- package/docs/demos/Toolbar/examples/Toolbar.md +1313 -1475
- package/docs/demos/Wizard/examples/Wizard.md +918 -261
- package/docs/layouts/Flex/examples/Flex.md +16 -16
- package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
- package/icons/pficons.mjs +1 -0
- package/layouts/Flex/flex.css +115 -43
- package/layouts/Flex/flex.scss +20 -8
- package/package.json +36 -32
- package/patternfly-addons.css +732 -972
- package/patternfly-base-no-globals-theme-dark-unversioned.css +895 -847
- package/patternfly-base-no-globals.css +895 -847
- package/patternfly-base-theme-dark-unversioned.css +899 -850
- package/patternfly-base.css +899 -850
- package/patternfly-no-globals.css +9954 -8996
- package/patternfly-theme-dark-unversioned.css +9959 -9000
- package/patternfly.css +9959 -9000
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +6 -0
- package/sass-utilities/mixins.scss +80 -2
- package/sass-utilities/scss-variables.scss +8 -8
- package/sass-utilities/themes/dark/mixins.scss +3 -1
- package/utilities/Accessibility/accessibility.css +12 -12
- package/utilities/Spacing/spacing.css +720 -960
- package/utilities/Spacing/spacing.scss +4 -8
- package/base/themes/dark/_variables.scss +0 -102
- package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
- package/components/Accordion/themes/dark/accordion.scss +0 -9
- package/components/Alert/themes/dark/alert.scss +0 -17
- package/components/Badge/themes/dark/badge.scss +0 -9
- package/components/Banner/themes/dark/banner.scss +0 -14
- package/components/Button/themes/dark/button.scss +0 -51
- package/components/Card/themes/dark/card.scss +0 -20
- package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
- package/components/DataList/themes/dark/data-list.scss +0 -10
- package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
- package/components/Drawer/themes/dark/drawer.scss +0 -13
- package/components/Form/themes/dark/form.scss +0 -7
- package/components/FormControl/themes/dark/form-control.scss +0 -24
- package/components/HelperText/themes/dark/helper-text.scss +0 -7
- package/components/Hint/themes/dark/hint.scss +0 -8
- package/components/InputGroup/themes/dark/input-group.scss +0 -22
- package/components/Label/themes/dark/label.scss +0 -53
- package/components/Login/themes/dark/login.scss +0 -12
- package/components/Masthead/themes/dark/masthead.scss +0 -14
- package/components/ModalBox/themes/dark/modal-box.scss +0 -7
- package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
- package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
- package/components/Page/themes/dark/page.scss +0 -69
- package/components/Pagination/themes/dark/pagination.scss +0 -7
- package/components/Panel/themes/dark/panel.scss +0 -7
- package/components/Popover/themes/dark/popover.scss +0 -11
- package/components/Progress/themes/dark/progress.scss +0 -9
- package/components/SimpleList/themes/dark/simple-list.scss +0 -14
- package/components/Skeleton/themes/dark/skeleton.scss +0 -10
- package/components/Switch/themes/dark/switch.scss +0 -11
- package/components/Tabs/themes/dark/tabs.scss +0 -10
- package/components/Tile/themes/dark/tile.scss +0 -10
- package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
- package/components/Tooltip/themes/dark/tooltip.scss +0 -8
- package/docs/components/Avatar/examples/Avatar.css +0 -3
- package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
|
@@ -60,15 +60,20 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
60
60
|
display: flex;
|
|
61
61
|
align-items: baseline;
|
|
62
62
|
min-width: 0;
|
|
63
|
-
padding-
|
|
64
|
-
margin-
|
|
65
|
-
text-align:
|
|
63
|
+
padding-inline-start: var(--#{$table}__tree-view-main--PaddingLeft);
|
|
64
|
+
margin-inline-start: var(--#{$table}__tree-view-main--MarginLeft);
|
|
65
|
+
text-align: start;
|
|
66
66
|
cursor: pointer;
|
|
67
67
|
|
|
68
68
|
> .#{$table}__toggle {
|
|
69
|
+
@include pf-v5-bidirectional-style (
|
|
70
|
+
$prop: 'transform',
|
|
71
|
+
$ltr-val: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX)),
|
|
72
|
+
$rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$table}--m-tree-view__toggle--TranslateX))})
|
|
73
|
+
);
|
|
74
|
+
|
|
69
75
|
position: var(--#{$table}--m-tree-view__toggle--Position);
|
|
70
|
-
|
|
71
|
-
transform: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX));
|
|
76
|
+
inset-inline-start: var(--#{$table}--m-tree-view__toggle--Left);
|
|
72
77
|
|
|
73
78
|
.#{$table}__toggle-icon {
|
|
74
79
|
min-width: var(--#{$table}--m-tree-view__toggle__toggle-icon--MinWidth);
|
|
@@ -76,13 +81,16 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
76
81
|
}
|
|
77
82
|
|
|
78
83
|
> .#{$table}__check {
|
|
79
|
-
margin-
|
|
84
|
+
margin-inline-end: var(--#{$table}__tree-view-main--c-table__check--MarginRight);
|
|
80
85
|
}
|
|
81
86
|
|
|
82
87
|
> .#{$table}__check label {
|
|
83
|
-
padding-
|
|
84
|
-
padding-
|
|
85
|
-
margin
|
|
88
|
+
padding-inline-start: var(--#{$table}__tree-view-main--c-table__check--PaddingLeft);
|
|
89
|
+
padding-inline-end: var(--#{$table}__tree-view-main--c-table__check--PaddingRight);
|
|
90
|
+
margin-block-start: 0;
|
|
91
|
+
margin-block-end: 0;
|
|
92
|
+
margin-inline-start: 0;
|
|
93
|
+
margin-inline-end: calc(var(--#{$table}__tree-view-main--c-table__check--MarginRight) * -1);
|
|
86
94
|
}
|
|
87
95
|
}
|
|
88
96
|
|
|
@@ -92,14 +100,13 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
92
100
|
|
|
93
101
|
.#{$table}__tree-view-icon {
|
|
94
102
|
min-width: var(--#{$table}__tree-view-icon--MinWidth);
|
|
95
|
-
margin-
|
|
103
|
+
margin-inline-end: var(--#{$table}__tree-view-icon--MarginRight);
|
|
96
104
|
}
|
|
97
105
|
|
|
98
106
|
.#{$table}__tree-view-details-toggle {
|
|
99
107
|
display: none;
|
|
100
108
|
}
|
|
101
109
|
|
|
102
|
-
// stylelint-disable
|
|
103
110
|
@mixin pf-tree-view-grid {
|
|
104
111
|
.pf-m-tree-view-grid.#{$table} {
|
|
105
112
|
@content;
|
|
@@ -150,7 +157,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
150
157
|
|
|
151
158
|
// node cells
|
|
152
159
|
--#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--#{$pf-global}--spacer--xl);
|
|
153
|
-
--#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
|
|
160
|
+
--#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr)); // use minmax func to contain possible text modifier width
|
|
154
161
|
--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--#{$pf-global}--spacer--xs);
|
|
155
162
|
--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--#{$pf-global}--spacer--xs);
|
|
156
163
|
|
|
@@ -175,17 +182,17 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
175
182
|
|
|
176
183
|
tbody:where(.#{$table}__tbody) tr:where(.#{$table}__tr) {
|
|
177
184
|
position: relative;
|
|
178
|
-
outline-offset: var(--#{$table}--m-tree-view-grid--tr--OutlineOffset);
|
|
179
185
|
border: none;
|
|
186
|
+
outline-offset: var(--#{$table}--m-tree-view-grid--tr--OutlineOffset);
|
|
180
187
|
|
|
181
188
|
&::before {
|
|
182
189
|
position: absolute;
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
|
|
190
|
+
inset-block-start: 0;
|
|
191
|
+
inset-block-end: 0;
|
|
192
|
+
inset-inline-start: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
|
|
193
|
+
inset-inline-end: 0;
|
|
188
194
|
content: '';
|
|
195
|
+
border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
|
|
189
196
|
}
|
|
190
197
|
}
|
|
191
198
|
|
|
@@ -209,11 +216,11 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
209
216
|
--#{$table}--cell--PaddingTop: var(--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
|
|
210
217
|
--#{$table}--cell--PaddingBottom: var(--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
|
|
211
218
|
|
|
212
|
-
padding-
|
|
219
|
+
padding-inline-start: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
|
|
213
220
|
}
|
|
214
221
|
|
|
215
222
|
.#{$table}__tree-view-text {
|
|
216
|
-
padding-
|
|
223
|
+
padding-inline-end: var(--#{$table}__tree-view-text--PaddingRight);
|
|
217
224
|
}
|
|
218
225
|
|
|
219
226
|
thead:where(.#{$table}__thead) th:where(.#{$table}__th) {
|
|
@@ -226,11 +233,9 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
226
233
|
|
|
227
234
|
// Standard td, in standard row (non-expandable)
|
|
228
235
|
td:where(.#{$table}__td)[data-label] {
|
|
236
|
+
grid-template-columns: var(--#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
|
229
237
|
grid-column: 1;
|
|
230
238
|
grid-column-gap: var(--#{$table}--m-tree-view-grid__tbody--cell--GridColumnGap);
|
|
231
|
-
|
|
232
|
-
// use minmax func to contain possible text modifier width
|
|
233
|
-
grid-template-columns: var(--#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns);
|
|
234
239
|
align-items: start;
|
|
235
240
|
|
|
236
241
|
// set contents of td to start at column two of td grid
|
|
@@ -239,14 +244,14 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
239
244
|
}
|
|
240
245
|
|
|
241
246
|
&::before {
|
|
242
|
-
font-weight: bold
|
|
243
|
-
text-align:
|
|
247
|
+
font-weight: var(--#{$pf-global}--FontWeight--bold);;
|
|
248
|
+
text-align: start;
|
|
244
249
|
content: attr(data-label);
|
|
245
250
|
}
|
|
246
251
|
}
|
|
247
252
|
|
|
248
253
|
tr:where(.#{$table}__tr).pf-m-tree-view-details-expanded {
|
|
249
|
-
padding-
|
|
254
|
+
padding-block-end: var(--#{$table}--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
|
|
250
255
|
|
|
251
256
|
td:where(.#{$table}__td)[data-label] {
|
|
252
257
|
display: grid;
|
|
@@ -268,24 +273,24 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
268
273
|
--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--#{$table}--m-tree-view-grid--c-table__action--PaddingTop);
|
|
269
274
|
--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--#{$table}--m-tree-view-grid--c-table__action--PaddingBottom);
|
|
270
275
|
|
|
271
|
-
grid-column: 2;
|
|
272
276
|
grid-row: 1;
|
|
277
|
+
grid-column: 2;
|
|
273
278
|
|
|
274
279
|
> .#{$dropdown} {
|
|
275
|
-
margin-
|
|
276
|
-
margin-
|
|
280
|
+
margin-block-start: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginTop);
|
|
281
|
+
margin-block-end: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginBottom);
|
|
277
282
|
}
|
|
278
283
|
}
|
|
279
284
|
|
|
280
285
|
.#{$table}__tree-view-main > .#{$table}__check {
|
|
281
|
-
margin-right: var(--#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
|
282
|
-
margin-left: auto;
|
|
283
286
|
order: var(--#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--Order);
|
|
287
|
+
margin-inline-start: auto;
|
|
288
|
+
margin-inline-end: var(--#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
|
|
284
289
|
}
|
|
285
290
|
|
|
286
291
|
.#{$table}__tree-view-details-toggle {
|
|
287
|
-
margin-
|
|
288
|
-
margin-
|
|
292
|
+
margin-block-start: var(--#{$table}__tree-view-details-toggle--MarginTop);
|
|
293
|
+
margin-block-end: var(--#{$table}__tree-view-details-toggle--MarginBottom);
|
|
289
294
|
}
|
|
290
295
|
|
|
291
296
|
@for $i from 2 through $pf-v5-c-tree-view--MaxDepth {
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
--pf-v5-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
64
64
|
--pf-v5-c-table--BorderColor: var(--pf-t--global--border--color--default);
|
|
65
65
|
--pf-v5-c-table--border-width--base: var(--pf-t--global--border--width--divider--default);
|
|
66
|
-
--pf-v5-c-table__caption--FontSize: var(--pf-t--global--font--size--body);
|
|
66
|
+
--pf-v5-c-table__caption--FontSize: var(--pf-t--global--font--size--body--default);
|
|
67
67
|
--pf-v5-c-table__caption--Color: var(--pf-t--global--text--color--subtle);
|
|
68
68
|
--pf-v5-c-table__caption--PaddingTop: var(--pf-v5-global--spacer--md);
|
|
69
69
|
--pf-v5-c-table__caption--PaddingRight: var(--pf-v5-global--spacer--lg);
|
|
@@ -71,13 +71,13 @@
|
|
|
71
71
|
--pf-v5-c-table__caption--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
|
72
72
|
--pf-v5-c-table__caption--xl--PaddingRight: var(--pf-v5-global--spacer--md);
|
|
73
73
|
--pf-v5-c-table__caption--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
|
|
74
|
-
--pf-v5-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body);
|
|
74
|
+
--pf-v5-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--default);
|
|
75
75
|
--pf-v5-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
76
76
|
--pf-v5-c-table__tbody--cell--PaddingTop: var(--pf-t--global--spacer--md);
|
|
77
77
|
--pf-v5-c-table__tbody--cell--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
78
78
|
--pf-v5-c-table__tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);
|
|
79
79
|
--pf-v5-c-table--cell--Padding--base: var(--pf-v5-global--spacer--md);
|
|
80
|
-
--pf-v5-c-table--cell--FontSize: var(--pf-t--global--font--size--body);
|
|
80
|
+
--pf-v5-c-table--cell--FontSize: var(--pf-t--global--font--size--body--default);
|
|
81
81
|
--pf-v5-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body);
|
|
82
82
|
--pf-v5-c-table--cell--Color: var(--pf-t--global--text--color--regular);
|
|
83
83
|
--pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--cell--Padding--base);
|
|
@@ -117,11 +117,12 @@
|
|
|
117
117
|
--pf-v5-c-table__button--OutlineOffset: calc(var(--pf-v5-global--BorderWidth--lg) * -1);
|
|
118
118
|
--pf-v5-c-table--m-compact__toggle--PaddingTop: 0;
|
|
119
119
|
--pf-v5-c-table--m-compact__toggle--PaddingBottom: 0;
|
|
120
|
-
--pf-v5-c-table__check--input--MarginTop: 0.
|
|
121
|
-
--pf-v5-c-
|
|
120
|
+
--pf-v5-c-table__check--input--MarginTop: 0.1875rem;
|
|
121
|
+
--pf-v5-c-table__thead__check--input--TranslateY: var(--pf-v5-c-table__check--input--MarginTop);
|
|
122
|
+
--pf-v5-c-table__check--input--FontSize: var(--pf-t--global--font--size--body--default);
|
|
122
123
|
--pf-v5-c-table--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
|
|
123
124
|
--pf-v5-c-table__favorite--c-button--Color: var(--pf-t--global--text--color--subtle);
|
|
124
|
-
--pf-v5-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body);
|
|
125
|
+
--pf-v5-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
|
|
125
126
|
--pf-v5-c-table__favorite--c-button--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
|
|
126
127
|
--pf-v5-c-table__favorite--c-button--MarginRight: calc(var(--pf-v5-global--spacer--md) * -1);
|
|
127
128
|
--pf-v5-c-table__favorite--c-button--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
|
|
@@ -209,7 +210,7 @@
|
|
|
209
210
|
--pf-v5-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-v5-global--spacer--md);
|
|
210
211
|
--pf-v5-c-table--m-compact--cell--first-last-child--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
|
211
212
|
--pf-v5-c-table--m-compact--cell--first-last-child--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
|
|
212
|
-
--pf-v5-c-table--m-compact--FontSize: var(--pf-t--global--font--size--body);
|
|
213
|
+
--pf-v5-c-table--m-compact--FontSize: var(--pf-t--global--font--size--body--default);
|
|
213
214
|
--pf-v5-c-table--m-compact__expandable-row-content--PaddingTop: var(--pf-v5-global--spacer--lg);
|
|
214
215
|
--pf-v5-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-v5-global--spacer--lg);
|
|
215
216
|
--pf-v5-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-v5-global--spacer--lg);
|
|
@@ -220,7 +221,6 @@
|
|
|
220
221
|
--pf-v5-c-table__tr--m-clickable--BoxShadow--top: var(--pf-v5-c-table__tr--BoxShadow--top--base);
|
|
221
222
|
--pf-v5-c-table__tr--m-clickable--BackgroundColor: transparent;
|
|
222
223
|
--pf-v5-c-table__tr--m-clickable--BoxShadow: none;
|
|
223
|
-
--pf-v5-c-table__tr--m-clickable--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
224
224
|
--pf-v5-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
|
|
225
225
|
--pf-v5-c-table__tr--m-clickable--hover--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
|
|
226
226
|
--pf-v5-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
@@ -290,27 +290,27 @@
|
|
|
290
290
|
position: relative;
|
|
291
291
|
}
|
|
292
292
|
.pf-v5-c-table.pf-m-sticky-header thead:where(.pf-v5-c-table__thead) tr:where(.pf-v5-c-table__tr) {
|
|
293
|
-
border-
|
|
293
|
+
border-block-end: 0;
|
|
294
294
|
}
|
|
295
295
|
.pf-v5-c-table.pf-m-sticky-header thead:where(.pf-v5-c-table__thead) tr:where(.pf-v5-c-table__tr) > * {
|
|
296
296
|
z-index: var(--pf-v5-c-table--m-sticky-header--cell--ZIndex);
|
|
297
297
|
}
|
|
298
298
|
.pf-v5-c-table.pf-m-sticky-header > thead:where(.pf-v5-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v5-c-table__tr) > * {
|
|
299
299
|
position: sticky;
|
|
300
|
-
|
|
300
|
+
inset-block-start: 0;
|
|
301
301
|
background: var(--pf-v5-c-table--BackgroundColor);
|
|
302
302
|
}
|
|
303
303
|
.pf-v5-c-table.pf-m-sticky-header > thead:where(.pf-v5-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v5-c-table__tr) > *::after {
|
|
304
304
|
position: absolute;
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
305
|
+
inset-block-end: 0;
|
|
306
|
+
inset-inline-start: 0;
|
|
307
|
+
inset-inline-end: 0;
|
|
308
308
|
content: "";
|
|
309
|
-
border-
|
|
309
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
|
310
310
|
}
|
|
311
311
|
.pf-v5-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
|
|
312
312
|
position: sticky;
|
|
313
|
-
|
|
313
|
+
inset-block-start: 0;
|
|
314
314
|
z-index: var(--pf-v5-global--ZIndex--xs);
|
|
315
315
|
background: var(--pf-v5-c-table--BackgroundColor);
|
|
316
316
|
}
|
|
@@ -323,7 +323,7 @@
|
|
|
323
323
|
--pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table__thead--m-nested-column-header__tr--PaddingBottom);
|
|
324
324
|
}
|
|
325
325
|
.pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) {
|
|
326
|
-
border-
|
|
326
|
+
border-block-end: 0;
|
|
327
327
|
}
|
|
328
328
|
.pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) th:where(.pf-v5-c-table__th):not([rowspan]),
|
|
329
329
|
.pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) td:where(.pf-v5-c-table__td):not([rowspan]) {
|
|
@@ -337,7 +337,7 @@
|
|
|
337
337
|
background: var(--pf-v5-c-table--m-striped__tr--BackgroundColor);
|
|
338
338
|
}
|
|
339
339
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
|
|
340
|
-
border-
|
|
340
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
|
341
341
|
}
|
|
342
342
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row).pf-m-ghost-row {
|
|
343
343
|
background-color: var(--pf-v5-c-table__tr--m-ghost-row--BackgroundColor);
|
|
@@ -349,7 +349,10 @@
|
|
|
349
349
|
width: var(--pf-v5-c-table--cell--Width);
|
|
350
350
|
min-width: var(--pf-v5-c-table--cell--MinWidth);
|
|
351
351
|
max-width: var(--pf-v5-c-table--cell--MaxWidth);
|
|
352
|
-
padding: var(--pf-v5-c-table--cell--PaddingTop)
|
|
352
|
+
padding-block-start: var(--pf-v5-c-table--cell--PaddingTop);
|
|
353
|
+
padding-block-end: var(--pf-v5-c-table--cell--PaddingBottom);
|
|
354
|
+
padding-inline-start: var(--pf-v5-c-table--cell--PaddingLeft);
|
|
355
|
+
padding-inline-end: var(--pf-v5-c-table--cell--PaddingRight);
|
|
353
356
|
overflow: var(--pf-v5-c-table--cell--Overflow);
|
|
354
357
|
font-size: var(--pf-v5-c-table--cell--FontSize);
|
|
355
358
|
font-weight: var(--pf-v5-c-table--cell--FontWeight);
|
|
@@ -383,26 +386,26 @@
|
|
|
383
386
|
}
|
|
384
387
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-right::before, .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-left::before {
|
|
385
388
|
position: absolute;
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
389
|
+
inset-block-start: 0;
|
|
390
|
+
inset-block-end: 0;
|
|
391
|
+
inset-inline-start: 0;
|
|
392
|
+
inset-inline-end: 0;
|
|
390
393
|
pointer-events: none;
|
|
391
394
|
content: "";
|
|
392
395
|
}
|
|
393
396
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-right::before {
|
|
394
|
-
border-
|
|
397
|
+
border-inline-end: var(--pf-v5-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-v5-c-table--cell--m-border-right--before--BorderRightColor);
|
|
395
398
|
}
|
|
396
399
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-left::before {
|
|
397
|
-
border-
|
|
400
|
+
border-inline-start: var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth) solid var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftColor);
|
|
398
401
|
}
|
|
399
402
|
.pf-v5-c-table caption:where(.pf-v5-c-table__caption) {
|
|
400
|
-
padding-
|
|
401
|
-
padding-
|
|
402
|
-
padding-
|
|
403
|
+
padding-block-start: var(--pf-v5-c-table__caption--PaddingTop);
|
|
404
|
+
padding-block-end: var(--pf-v5-c-table__caption--PaddingBottom);
|
|
405
|
+
padding-inline-start: var(--pf-v5-c-table__caption--PaddingLeft);
|
|
403
406
|
font-size: var(--pf-v5-c-table__caption--FontSize);
|
|
404
407
|
color: var(--pf-v5-c-table__caption--Color);
|
|
405
|
-
text-align:
|
|
408
|
+
text-align: start;
|
|
406
409
|
background-color: var(--pf-v5-c-table--BackgroundColor);
|
|
407
410
|
}
|
|
408
411
|
.pf-v5-c-table thead:where(.pf-v5-c-table__thead) {
|
|
@@ -440,19 +443,19 @@
|
|
|
440
443
|
}
|
|
441
444
|
.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > :first-child::after {
|
|
442
445
|
position: absolute;
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
+
inset-block-start: var(--pf-v5-c-table__expandable-row--after--Top);
|
|
447
|
+
inset-block-end: var(--pf-v5-c-table__expandable-row--after--Bottom);
|
|
448
|
+
inset-inline-start: 0;
|
|
446
449
|
content: "";
|
|
447
450
|
background-color: transparent;
|
|
448
|
-
border-
|
|
451
|
+
border-inline-start: var(--pf-v5-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-v5-c-table__expandable-row--after--BorderColor);
|
|
449
452
|
}
|
|
450
453
|
.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__check input:where(.pf-v5-c-check__input) {
|
|
451
|
-
margin-
|
|
454
|
+
margin-block-start: var(--pf-v5-c-table__check--input--MarginTop);
|
|
452
455
|
vertical-align: top;
|
|
453
456
|
}
|
|
454
457
|
.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded > :first-child:not(.pf-v5-c-table__control-row) {
|
|
455
|
-
border-
|
|
458
|
+
border-block-end-width: 0;
|
|
456
459
|
}
|
|
457
460
|
.pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle, .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle:first-child, .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle:last-child {
|
|
458
461
|
padding: 0;
|
|
@@ -498,35 +501,26 @@
|
|
|
498
501
|
--pf-v5-c-table--cell--WhiteSpace: normal;
|
|
499
502
|
}
|
|
500
503
|
.pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) {
|
|
501
|
-
border-
|
|
504
|
+
border-block-end: 0;
|
|
502
505
|
}
|
|
503
506
|
.pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > :first-child::after {
|
|
504
|
-
border-
|
|
507
|
+
border-inline-start: 0;
|
|
505
508
|
}
|
|
506
509
|
.pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody):not(.pf-m-expanded) .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before {
|
|
507
510
|
display: none;
|
|
508
511
|
}
|
|
509
512
|
.pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody).pf-m-expanded > .pf-v5-c-table__control-row {
|
|
510
|
-
border-
|
|
513
|
+
border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
|
|
511
514
|
}
|
|
512
515
|
.pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__control-row > .pf-v5-c-table__compound-expansion-toggle:first-child > ::before {
|
|
513
|
-
border-
|
|
516
|
+
border-inline-start-width: 0;
|
|
514
517
|
}
|
|
515
518
|
.pf-v5-c-table tr.pf-m-clickable:last-child {
|
|
516
|
-
border-
|
|
517
|
-
}
|
|
518
|
-
.pf-v5-c-table tr:where(.pf-v5-c-table__tr) {
|
|
519
|
-
position: relative;
|
|
520
|
-
}
|
|
521
|
-
.pf-v5-c-table tr:where(.pf-v5-c-table__tr)::before {
|
|
522
|
-
position: absolute;
|
|
523
|
-
inset: 0;
|
|
524
|
-
content: "";
|
|
525
|
-
background-color: var(--pf-v5-c-table__tr--m-clickable--BackgroundColor);
|
|
526
|
-
border-radius: var(--pf-v5-c-table__tr--m-clickable--BorderRadius);
|
|
519
|
+
border-block-end-color: transparent;
|
|
527
520
|
}
|
|
528
521
|
.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable {
|
|
529
522
|
cursor: pointer;
|
|
523
|
+
background-color: var(--pf-v5-c-table__tr--m-clickable--BackgroundColor);
|
|
530
524
|
outline-offset: var(--pf-v5-c-table__tr--m-clickable--OutlineOffset);
|
|
531
525
|
box-shadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow);
|
|
532
526
|
}
|
|
@@ -621,11 +615,14 @@
|
|
|
621
615
|
.pf-v5-c-table__button {
|
|
622
616
|
position: static;
|
|
623
617
|
width: 100%;
|
|
624
|
-
padding: var(--pf-v5-c-table--cell--PaddingTop)
|
|
618
|
+
padding-block-start: var(--pf-v5-c-table--cell--PaddingTop);
|
|
619
|
+
padding-block-end: var(--pf-v5-c-table--cell--PaddingBottom);
|
|
620
|
+
padding-inline-start: var(--pf-v5-c-table--cell--PaddingLeft);
|
|
621
|
+
padding-inline-end: var(--pf-v5-c-table--cell--PaddingRight);
|
|
625
622
|
font-size: inherit;
|
|
626
623
|
font-weight: inherit;
|
|
627
624
|
color: var(--pf-v5-c-table__button--Color);
|
|
628
|
-
text-align:
|
|
625
|
+
text-align: start;
|
|
629
626
|
white-space: inherit;
|
|
630
627
|
user-select: text;
|
|
631
628
|
background-color: var(--pf-v5-c-table__button--BackgroundColor);
|
|
@@ -633,10 +630,10 @@
|
|
|
633
630
|
}
|
|
634
631
|
.pf-v5-c-table__button::before {
|
|
635
632
|
position: absolute;
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
633
|
+
inset-block-start: 0;
|
|
634
|
+
inset-block-end: 0;
|
|
635
|
+
inset-inline-start: 0;
|
|
636
|
+
inset-inline-end: 0;
|
|
640
637
|
cursor: pointer;
|
|
641
638
|
content: "";
|
|
642
639
|
}
|
|
@@ -719,8 +716,8 @@
|
|
|
719
716
|
vertical-align: top;
|
|
720
717
|
}
|
|
721
718
|
.pf-v5-c-table__toggle .pf-v5-c-button {
|
|
722
|
-
margin-
|
|
723
|
-
margin-
|
|
719
|
+
margin-block-start: var(--pf-v5-c-table__toggle--c-button--MarginTop);
|
|
720
|
+
margin-block-end: var(--pf-v5-c-table__toggle--c-button--MarginBottom);
|
|
724
721
|
}
|
|
725
722
|
.pf-v5-c-table__toggle .pf-v5-c-button.pf-m-expanded .pf-v5-c-table__toggle-icon {
|
|
726
723
|
transform: rotate(var(--pf-v5-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
|
|
@@ -729,6 +726,10 @@
|
|
|
729
726
|
transition: var(--pf-v5-c-table__toggle--c-button__toggle-icon--Transition);
|
|
730
727
|
transform: rotate(var(--pf-v5-c-table__toggle--c-button__toggle-icon--Rotate));
|
|
731
728
|
}
|
|
729
|
+
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
|
|
730
|
+
scale: -1 1;
|
|
731
|
+
}
|
|
732
|
+
|
|
732
733
|
.pf-v5-c-table__toggle svg {
|
|
733
734
|
pointer-events: none;
|
|
734
735
|
}
|
|
@@ -741,22 +742,34 @@
|
|
|
741
742
|
cursor: pointer;
|
|
742
743
|
}
|
|
743
744
|
.pf-v5-c-table__check label {
|
|
744
|
-
display:
|
|
745
|
+
display: inline-flex;
|
|
745
746
|
padding: inherit;
|
|
746
|
-
margin: calc(var(--pf-v5-c-table--cell--PaddingTop) * -1)
|
|
747
|
+
margin-block-start: calc(var(--pf-v5-c-table--cell--PaddingTop) * -1);
|
|
748
|
+
margin-block-end: calc(var(--pf-v5-c-table--cell--PaddingBottom) * -1);
|
|
749
|
+
margin-inline-start: calc(var(--pf-v5-c-table--cell--PaddingLeft) * -1);
|
|
750
|
+
margin-inline-end: calc(var(--pf-v5-c-table--cell--PaddingRight) * -1);
|
|
751
|
+
}
|
|
752
|
+
.pf-v5-c-table__thead .pf-v5-c-check.pf-m-standalone {
|
|
753
|
+
--pf-v5-c-check__input--TranslateY: var(--pf-v5-c-table__thead__check--input--TranslateY);
|
|
747
754
|
}
|
|
748
755
|
|
|
749
756
|
.pf-v5-c-table__favorite .pf-v5-c-button {
|
|
750
757
|
--pf-v5-c-button--m-plain--Color: var(--pf-v5-c-table__favorite--c-button--Color);
|
|
751
758
|
--pf-v5-c-button--FontSize: var(--pf-v5-c-table__favorite--c-button--FontSize);
|
|
752
|
-
margin: var(--pf-v5-c-table__favorite--c-button--MarginTop)
|
|
759
|
+
margin-block-start: var(--pf-v5-c-table__favorite--c-button--MarginTop);
|
|
760
|
+
margin-block-end: var(--pf-v5-c-table__favorite--c-button--MarginBottom);
|
|
761
|
+
margin-inline-start: var(--pf-v5-c-table__favorite--c-button--MarginLeft);
|
|
762
|
+
margin-inline-end: var(--pf-v5-c-table__favorite--c-button--MarginRight);
|
|
753
763
|
}
|
|
754
764
|
.pf-m-favorited.pf-v5-c-table__favorite .pf-v5-c-button {
|
|
755
765
|
--pf-v5-c-button--m-plain--Color: var(--pf-v5-c-table__favorite--m-favorited--c-button--Color);
|
|
756
766
|
}
|
|
757
767
|
|
|
758
768
|
.pf-v5-c-table__draggable .pf-v5-c-button {
|
|
759
|
-
margin: var(--pf-v5-c-table__draggable--c-button--MarginTop)
|
|
769
|
+
margin-block-start: var(--pf-v5-c-table__draggable--c-button--MarginTop);
|
|
770
|
+
margin-block-end: var(--pf-v5-c-table__draggable--c-button--MarginBottom);
|
|
771
|
+
margin-inline-start: var(--pf-v5-c-table__draggable--c-button--MarginLeft);
|
|
772
|
+
margin-inline-end: var(--pf-v5-c-table__draggable--c-button--MarginRight);
|
|
760
773
|
cursor: grab;
|
|
761
774
|
}
|
|
762
775
|
.pf-v5-c-table__draggable .pf-v5-c-button:active {
|
|
@@ -769,19 +782,19 @@
|
|
|
769
782
|
--pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table__action--PaddingRight);
|
|
770
783
|
--pf-v5-c-table--cell--PaddingBottom: 0;
|
|
771
784
|
--pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table__action--PaddingLeft);
|
|
772
|
-
padding-
|
|
773
|
-
padding-
|
|
785
|
+
padding-block-start: 0;
|
|
786
|
+
padding-block-end: 0;
|
|
774
787
|
vertical-align: middle;
|
|
775
788
|
}
|
|
776
789
|
|
|
777
790
|
.pf-v5-c-table__action {
|
|
778
|
-
text-align:
|
|
791
|
+
text-align: end;
|
|
779
792
|
}
|
|
780
793
|
|
|
781
794
|
.pf-v5-c-table__inline-edit-action {
|
|
782
795
|
--pf-v5-c-table--cell--PaddingLeft: 0;
|
|
783
796
|
--pf-v5-c-table--cell--PaddingRight: 0;
|
|
784
|
-
text-align:
|
|
797
|
+
text-align: end;
|
|
785
798
|
}
|
|
786
799
|
|
|
787
800
|
.pf-v5-c-table__compound-expansion-toggle {
|
|
@@ -804,25 +817,25 @@
|
|
|
804
817
|
.pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before,
|
|
805
818
|
.pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::after {
|
|
806
819
|
position: absolute;
|
|
807
|
-
|
|
820
|
+
inset-inline-end: 0;
|
|
808
821
|
content: "";
|
|
809
822
|
border-style: solid;
|
|
810
823
|
border-width: 0;
|
|
811
824
|
}
|
|
812
825
|
.pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before {
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
826
|
+
inset-block-start: 0;
|
|
827
|
+
inset-block-end: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Bottom);
|
|
828
|
+
inset-inline-start: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Left);
|
|
816
829
|
border-color: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderColor);
|
|
817
|
-
border-
|
|
818
|
-
border-
|
|
830
|
+
border-inline-start-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);
|
|
831
|
+
border-inline-end-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth);
|
|
819
832
|
}
|
|
820
833
|
.pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::after {
|
|
821
|
-
|
|
822
|
-
|
|
834
|
+
inset-block-start: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Top);
|
|
835
|
+
inset-inline-start: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Left);
|
|
823
836
|
pointer-events: none;
|
|
824
837
|
border-color: var(--pf-v5-c-table__compound-expansion-toggle__button--after--BorderColor);
|
|
825
|
-
border-
|
|
838
|
+
border-block-start-width: var(--pf-v5-c-table__compound-expansion-toggle__button--after--BorderTopWidth);
|
|
826
839
|
}
|
|
827
840
|
.pf-v5-c-table__compound-expansion-toggle:hover, .pf-v5-c-table__compound-expansion-toggle:focus-within, .pf-v5-c-table__compound-expansion-toggle.pf-m-expanded {
|
|
828
841
|
--pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base);
|
|
@@ -834,7 +847,7 @@
|
|
|
834
847
|
--pf-v5-c-table__compound-expansion-toggle__button--after--Left: 0;
|
|
835
848
|
}
|
|
836
849
|
.pf-v5-c-table__compound-expansion-toggle.pf-m-expanded .pf-v5-c-table__button::before {
|
|
837
|
-
border-
|
|
850
|
+
border-block-end: var(--pf-v5-c-table--BackgroundColor) solid var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base);
|
|
838
851
|
}
|
|
839
852
|
.pf-v5-c-table__compound-expansion-toggle.pf-m-expanded:first-child {
|
|
840
853
|
--pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
|
|
@@ -850,14 +863,14 @@
|
|
|
850
863
|
}
|
|
851
864
|
|
|
852
865
|
.pf-v5-c-table__column-help-action {
|
|
853
|
-
margin-
|
|
866
|
+
margin-inline-start: var(--pf-v5-c-table__column-help--MarginLeft);
|
|
854
867
|
transform: translateY(var(--pf-v5-c-table__column-help--TranslateY));
|
|
855
868
|
}
|
|
856
869
|
.pf-v5-c-table__column-help-action .pf-v5-c-button {
|
|
857
870
|
--pf-v5-c-button--PaddingRight: var(--pf-v5-c-table__column-help--c-button--PaddingRight);
|
|
858
871
|
--pf-v5-c-button--PaddingLeft: var(--pf-v5-c-table__column-help--c-button--PaddingLeft);
|
|
859
|
-
margin-
|
|
860
|
-
margin-
|
|
872
|
+
margin-block-start: var(--pf-v5-c-table__column-help--c-button--MarginTop);
|
|
873
|
+
margin-block-end: var(--pf-v5-c-table__column-help--c-button--MarginBottom);
|
|
861
874
|
font-size: inherit;
|
|
862
875
|
line-height: 1;
|
|
863
876
|
}
|
|
@@ -869,9 +882,9 @@
|
|
|
869
882
|
--pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table__sort__button--PaddingLeft);
|
|
870
883
|
display: flex;
|
|
871
884
|
width: auto;
|
|
872
|
-
margin-
|
|
873
|
-
margin-
|
|
874
|
-
margin-
|
|
885
|
+
margin-block-start: var(--pf-v5-c-table__sort__button--MarginTop);
|
|
886
|
+
margin-block-end: var(--pf-v5-c-table__sort__button--MarginBottom);
|
|
887
|
+
margin-inline-start: var(--pf-v5-c-table__sort__button--MarginLeft);
|
|
875
888
|
}
|
|
876
889
|
.pf-v5-c-table__sort .pf-v5-c-table__button:hover {
|
|
877
890
|
--pf-v5-c-table__sort-indicator--Color: var(--pf-v5-c-table__sort__button--hover__sort-indicator--Color);
|
|
@@ -906,7 +919,7 @@
|
|
|
906
919
|
|
|
907
920
|
.pf-v5-c-table__sort-indicator {
|
|
908
921
|
grid-column: 2;
|
|
909
|
-
margin-
|
|
922
|
+
margin-inline-start: var(--pf-v5-c-table__sort-indicator--MarginLeft);
|
|
910
923
|
color: var(--pf-v5-c-table__sort-indicator--Color);
|
|
911
924
|
pointer-events: none;
|
|
912
925
|
}
|
|
@@ -915,7 +928,7 @@
|
|
|
915
928
|
--pf-v5-c-table--cell--PaddingTop: 0;
|
|
916
929
|
--pf-v5-c-table--cell--PaddingBottom: 0;
|
|
917
930
|
position: relative;
|
|
918
|
-
border-
|
|
931
|
+
border-block-end: 0 solid transparent;
|
|
919
932
|
box-shadow: 0 0 0 0 transparent;
|
|
920
933
|
}
|
|
921
934
|
.pf-v5-c-table__expandable-row,
|
|
@@ -924,19 +937,22 @@
|
|
|
924
937
|
}
|
|
925
938
|
.pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td).pf-m-no-padding,
|
|
926
939
|
.pf-v5-c-table__expandable-row th:where(.pf-v5-c-table__th).pf-m-no-padding {
|
|
927
|
-
padding: 0
|
|
940
|
+
padding-block-start: 0;
|
|
941
|
+
padding-inline-end: 0;
|
|
942
|
+
padding-block-end: 0;
|
|
943
|
+
padding-inline-start: var(--pf-v5-c-table__expandable-row--after--border-width--base);
|
|
928
944
|
}
|
|
929
945
|
.pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td).pf-m-no-padding .pf-v5-c-table__expandable-row-content,
|
|
930
946
|
.pf-v5-c-table__expandable-row th:where(.pf-v5-c-table__th).pf-m-no-padding .pf-v5-c-table__expandable-row-content {
|
|
931
947
|
padding: 0;
|
|
932
948
|
}
|
|
933
949
|
.pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
|
|
934
|
-
padding-
|
|
935
|
-
padding-
|
|
950
|
+
padding-block-start: var(--pf-v5-c-table__expandable-row-content--PaddingTop);
|
|
951
|
+
padding-block-end: var(--pf-v5-c-table__expandable-row-content--PaddingBottom);
|
|
936
952
|
}
|
|
937
953
|
.pf-v5-c-table__expandable-row.pf-m-expanded {
|
|
938
|
-
border-
|
|
939
|
-
border-
|
|
954
|
+
border-block-end-color: var(--pf-v5-c-table__expandable-row--m-expanded--BorderBottomColor);
|
|
955
|
+
border-block-end-width: var(--pf-v5-c-table--border-width--base);
|
|
940
956
|
box-shadow: var(--pf-v5-c-table__expandable-row--m-expanded--BoxShadow);
|
|
941
957
|
}
|
|
942
958
|
.pf-v5-c-table__expandable-row:not(.pf-m-expanded) {
|
|
@@ -1006,7 +1022,7 @@
|
|
|
1006
1022
|
align-items: center;
|
|
1007
1023
|
}
|
|
1008
1024
|
.pf-v5-c-table__icon-inline > :not(:last-child) {
|
|
1009
|
-
margin-
|
|
1025
|
+
margin-inline-end: var(--pf-v5-c-table__icon-inline--MarginRight);
|
|
1010
1026
|
}
|
|
1011
1027
|
|
|
1012
1028
|
.pf-v5-c-table .pf-m-width-10 {
|