@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60
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 +22 -14
- package/assets/images/icon-help.hbs +3 -0
- package/assets/images/icon-outlined-star.hbs +3 -0
- package/assets/images/icon-star.hbs +3 -0
- package/base/normalize.scss +4 -0
- package/base/patternfly-common.css +46 -11
- package/base/patternfly-common.scss +58 -13
- package/base/patternfly-variables.css +1172 -1
- package/base/patternfly-variables.scss +10 -0
- package/base/tokens/tokens-charts-dark.scss +1 -1
- package/base/tokens/tokens-charts.scss +1 -1
- package/base/tokens/tokens-dark.scss +13 -1
- package/base/tokens/tokens-default.scss +60 -2
- package/base/tokens/tokens-highcontrast-dark.scss +396 -0
- package/base/tokens/tokens-highcontrast.scss +703 -0
- package/base/tokens/tokens-local.scss +1 -0
- package/base/tokens/tokens-palette.scss +9 -1
- package/components/Accordion/accordion.css +102 -6
- package/components/Accordion/accordion.scss +112 -10
- package/components/Alert/alert-group.css +67 -33
- package/components/Alert/alert-group.scss +95 -48
- package/components/Badge/badge.css +2 -0
- package/components/Badge/badge.scss +2 -0
- package/components/Banner/banner.css +4 -0
- package/components/Banner/banner.scss +4 -0
- package/components/Button/button.css +187 -9
- package/components/Button/button.scss +195 -13
- package/components/CalendarMonth/calendar-month.css +16 -0
- package/components/CalendarMonth/calendar-month.scss +16 -0
- package/components/Card/card.css +5 -4
- package/components/Card/card.scss +5 -4
- package/components/CodeBlock/code-block.css +3 -0
- package/components/CodeBlock/code-block.scss +3 -0
- package/components/CodeEditor/code-editor.css +8 -3
- package/components/CodeEditor/code-editor.scss +11 -6
- package/components/DataList/data-list.css +2 -2
- package/components/DataList/data-list.scss +2 -2
- package/components/DatePicker/date-picker.css +3 -0
- package/components/DatePicker/date-picker.scss +4 -0
- package/components/Drawer/drawer.css +44 -41
- package/components/Drawer/drawer.scss +42 -36
- package/components/DualListSelector/dual-list-selector.css +55 -1
- package/components/DualListSelector/dual-list-selector.scss +63 -1
- package/components/ExpandableSection/expandable-section.css +63 -1
- package/components/ExpandableSection/expandable-section.scss +76 -2
- package/components/FileUpload/file-upload.css +3 -3
- package/components/FileUpload/file-upload.scss +3 -3
- package/components/Form/form.css +40 -1
- package/components/Form/form.scss +47 -1
- package/components/FormControl/form-control.css +16 -0
- package/components/FormControl/form-control.scss +9 -0
- package/components/InputGroup/input-group.css +80 -0
- package/components/InputGroup/input-group.scss +95 -0
- package/components/Label/label.css +20 -11
- package/components/Label/label.scss +21 -11
- package/components/Login/login.css +3 -0
- package/components/Login/login.scss +3 -0
- package/components/Menu/menu.css +35 -4
- package/components/Menu/menu.scss +32 -6
- package/components/MenuToggle/menu-toggle.css +51 -10
- package/components/MenuToggle/menu-toggle.scss +61 -9
- package/components/ModalBox/modal-box.css +3 -0
- package/components/ModalBox/modal-box.scss +3 -0
- package/components/Nav/nav.css +39 -8
- package/components/Nav/nav.scss +42 -9
- package/components/Page/page.css +124 -26
- package/components/Page/page.scss +86 -16
- package/components/Pagination/pagination.css +14 -1
- package/components/Pagination/pagination.scss +14 -1
- package/components/Panel/panel.css +7 -1
- package/components/Panel/panel.scss +7 -1
- package/components/Popover/popover.css +4 -0
- package/components/Popover/popover.scss +4 -0
- package/components/Progress/progress.css +26 -0
- package/components/Progress/progress.scss +22 -1
- package/components/ProgressStepper/progress-stepper.scss +1 -0
- package/components/SimpleList/simple-list.css +15 -0
- package/components/SimpleList/simple-list.scss +17 -1
- package/components/Skeleton/skeleton.css +22 -2
- package/components/Skeleton/skeleton.scss +25 -3
- package/components/Spinner/spinner.css +5 -0
- package/components/Spinner/spinner.scss +6 -0
- package/components/Table/table-grid.css +51 -5
- package/components/Table/table-grid.scss +22 -1
- package/components/Table/table.css +124 -2
- package/components/Table/table.scss +171 -3
- package/components/Tabs/tabs.css +32 -15
- package/components/Tabs/tabs.scss +34 -14
- package/components/TextInputGroup/text-input-group.css +23 -0
- package/components/TextInputGroup/text-input-group.scss +16 -1
- package/components/Timestamp/timestamp.css +4 -0
- package/components/Timestamp/timestamp.scss +7 -0
- package/components/TreeView/tree-view.css +54 -0
- package/components/TreeView/tree-view.scss +59 -2
- package/components/Truncate/truncate.css +1 -0
- package/components/Truncate/truncate.scss +3 -0
- package/components/Wizard/wizard.css +33 -6
- package/components/Wizard/wizard.scss +38 -8
- package/components/_index.css +1390 -195
- package/docs/components/Alert/examples/Alert.md +2 -2
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
- package/docs/components/Button/examples/Button.md +159 -6
- package/docs/components/Card/examples/Card.md +8 -8
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
- package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
- package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
- package/docs/components/DataList/examples/DataList.md +83 -207
- package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
- package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
- package/docs/components/EmptyState/examples/EmptyState.md +6 -6
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
- package/docs/components/Form/examples/Form.md +1178 -113
- package/docs/components/Hint/examples/Hint.md +3 -3
- package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
- package/docs/components/InputGroup/examples/InputGroup.md +5 -1
- package/docs/components/Label/examples/Label.md +2 -2
- package/docs/components/Login/examples/Login.md +22 -22
- package/docs/components/Masthead/examples/masthead.md +90 -12
- package/docs/components/Menu/examples/Menu.md +122 -6
- package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
- package/docs/components/ModalBox/examples/ModalBox.md +13 -1
- package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
- package/docs/components/Page/examples/Page.md +147 -14
- package/docs/components/Pagination/examples/Pagination.md +123 -12
- package/docs/components/Popover/examples/Popover.md +0 -4
- package/docs/components/Progress/examples/Progress.md +222 -210
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
- package/docs/components/Skeleton/examples/Skeleton.md +21 -7
- package/docs/components/Slider/examples/Slider.md +2 -2
- package/docs/components/Spinner/examples/Spinner.md +10 -0
- package/docs/components/Table/examples/Table.md +7699 -4896
- package/docs/components/Tabs/examples/Tabs.md +1214 -6729
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
- package/docs/components/Title/examples/Title.md +8 -8
- package/docs/components/Toolbar/examples/Toolbar.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +583 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
- package/docs/demos/Alert/examples/Alert.md +66 -9
- package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
- package/docs/demos/Banner/examples/Banner.md +47 -6
- package/docs/demos/Card/examples/Card.md +13 -67
- package/docs/demos/CardView/examples/CardView.md +24 -5
- package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
- package/docs/demos/DataList/examples/DataList.md +628 -192
- package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
- package/docs/demos/Drawer/examples/Drawer.md +110 -53
- package/docs/demos/Form/examples/BasicForms.md +146 -26
- package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
- package/docs/demos/Masthead/examples/Masthead.md +170 -18
- package/docs/demos/Modal/examples/Modal.md +171 -21
- package/docs/demos/Nav/examples/Nav.md +111 -16
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
- package/docs/demos/Page/examples/Page.md +309 -43
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
- package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
- package/docs/demos/Table/examples/Table.md +480 -177
- package/docs/demos/Tabs/examples/Tabs.md +139 -594
- package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
- package/docs/demos/Wizard/examples/Wizard.md +198 -27
- package/package.json +12 -7
- package/patternfly-base-no-globals.css +1217 -12
- package/patternfly-base.css +1221 -12
- package/patternfly-no-globals.css +2837 -437
- package/patternfly.css +2839 -435
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +54 -0
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
35
35
|
--pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
|
|
36
36
|
--pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
|
|
37
|
+
--pf-v6-c-table--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
37
38
|
--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
38
39
|
--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
39
40
|
--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
|
|
@@ -97,6 +98,12 @@
|
|
|
97
98
|
.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
|
|
98
99
|
border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
|
|
99
100
|
}
|
|
101
|
+
.pf-m-grid.pf-v6-c-table.pf-m-animate-expand {
|
|
102
|
+
--pf-v6-c-table__expandable-row--Display: block;
|
|
103
|
+
}
|
|
104
|
+
.pf-m-grid.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
|
|
105
|
+
content: none;
|
|
106
|
+
}
|
|
100
107
|
.pf-m-grid.pf-v6-c-table.pf-m-expandable {
|
|
101
108
|
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
102
109
|
}
|
|
@@ -153,12 +160,15 @@
|
|
|
153
160
|
grid-template-columns: 1fr minmax(0, 1.5fr);
|
|
154
161
|
align-items: start;
|
|
155
162
|
}
|
|
163
|
+
.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
|
|
164
|
+
align-items: center;
|
|
165
|
+
}
|
|
156
166
|
.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
|
|
157
167
|
grid-column: 2;
|
|
158
168
|
}
|
|
159
169
|
.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
160
170
|
position: revert;
|
|
161
|
-
font-weight:
|
|
171
|
+
font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
|
|
162
172
|
text-align: start;
|
|
163
173
|
content: attr(data-label);
|
|
164
174
|
}
|
|
@@ -397,6 +407,12 @@
|
|
|
397
407
|
.pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
|
|
398
408
|
border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
|
|
399
409
|
}
|
|
410
|
+
.pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand {
|
|
411
|
+
--pf-v6-c-table__expandable-row--Display: block;
|
|
412
|
+
}
|
|
413
|
+
.pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
|
|
414
|
+
content: none;
|
|
415
|
+
}
|
|
400
416
|
.pf-m-grid-md.pf-v6-c-table.pf-m-expandable {
|
|
401
417
|
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
402
418
|
}
|
|
@@ -453,12 +469,15 @@
|
|
|
453
469
|
grid-template-columns: 1fr minmax(0, 1.5fr);
|
|
454
470
|
align-items: start;
|
|
455
471
|
}
|
|
472
|
+
.pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
|
|
473
|
+
align-items: center;
|
|
474
|
+
}
|
|
456
475
|
.pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
|
|
457
476
|
grid-column: 2;
|
|
458
477
|
}
|
|
459
478
|
.pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
460
479
|
position: revert;
|
|
461
|
-
font-weight:
|
|
480
|
+
font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
|
|
462
481
|
text-align: start;
|
|
463
482
|
content: attr(data-label);
|
|
464
483
|
}
|
|
@@ -700,6 +719,12 @@
|
|
|
700
719
|
.pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
|
|
701
720
|
border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
|
|
702
721
|
}
|
|
722
|
+
.pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand {
|
|
723
|
+
--pf-v6-c-table__expandable-row--Display: block;
|
|
724
|
+
}
|
|
725
|
+
.pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
|
|
726
|
+
content: none;
|
|
727
|
+
}
|
|
703
728
|
.pf-m-grid-lg.pf-v6-c-table.pf-m-expandable {
|
|
704
729
|
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
705
730
|
}
|
|
@@ -756,12 +781,15 @@
|
|
|
756
781
|
grid-template-columns: 1fr minmax(0, 1.5fr);
|
|
757
782
|
align-items: start;
|
|
758
783
|
}
|
|
784
|
+
.pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
|
|
785
|
+
align-items: center;
|
|
786
|
+
}
|
|
759
787
|
.pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
|
|
760
788
|
grid-column: 2;
|
|
761
789
|
}
|
|
762
790
|
.pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
763
791
|
position: revert;
|
|
764
|
-
font-weight:
|
|
792
|
+
font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
|
|
765
793
|
text-align: start;
|
|
766
794
|
content: attr(data-label);
|
|
767
795
|
}
|
|
@@ -1003,6 +1031,12 @@
|
|
|
1003
1031
|
.pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
|
|
1004
1032
|
border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
|
|
1005
1033
|
}
|
|
1034
|
+
.pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand {
|
|
1035
|
+
--pf-v6-c-table__expandable-row--Display: block;
|
|
1036
|
+
}
|
|
1037
|
+
.pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
|
|
1038
|
+
content: none;
|
|
1039
|
+
}
|
|
1006
1040
|
.pf-m-grid-xl.pf-v6-c-table.pf-m-expandable {
|
|
1007
1041
|
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
1008
1042
|
}
|
|
@@ -1059,12 +1093,15 @@
|
|
|
1059
1093
|
grid-template-columns: 1fr minmax(0, 1.5fr);
|
|
1060
1094
|
align-items: start;
|
|
1061
1095
|
}
|
|
1096
|
+
.pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
|
|
1097
|
+
align-items: center;
|
|
1098
|
+
}
|
|
1062
1099
|
.pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
|
|
1063
1100
|
grid-column: 2;
|
|
1064
1101
|
}
|
|
1065
1102
|
.pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
1066
1103
|
position: revert;
|
|
1067
|
-
font-weight:
|
|
1104
|
+
font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
|
|
1068
1105
|
text-align: start;
|
|
1069
1106
|
content: attr(data-label);
|
|
1070
1107
|
}
|
|
@@ -1306,6 +1343,12 @@
|
|
|
1306
1343
|
.pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
|
|
1307
1344
|
border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
|
|
1308
1345
|
}
|
|
1346
|
+
.pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand {
|
|
1347
|
+
--pf-v6-c-table__expandable-row--Display: block;
|
|
1348
|
+
}
|
|
1349
|
+
.pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
|
|
1350
|
+
content: none;
|
|
1351
|
+
}
|
|
1309
1352
|
.pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable {
|
|
1310
1353
|
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
1311
1354
|
}
|
|
@@ -1362,12 +1405,15 @@
|
|
|
1362
1405
|
grid-template-columns: 1fr minmax(0, 1.5fr);
|
|
1363
1406
|
align-items: start;
|
|
1364
1407
|
}
|
|
1408
|
+
.pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
|
|
1409
|
+
align-items: center;
|
|
1410
|
+
}
|
|
1365
1411
|
.pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
|
|
1366
1412
|
grid-column: 2;
|
|
1367
1413
|
}
|
|
1368
1414
|
.pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
1369
1415
|
position: revert;
|
|
1370
|
-
font-weight:
|
|
1416
|
+
font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
|
|
1371
1417
|
text-align: start;
|
|
1372
1418
|
content: attr(data-label);
|
|
1373
1419
|
}
|
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
--#{$table}--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
95
95
|
--#{$table}--cell--responsive--PaddingInlineEnd: 0;
|
|
96
96
|
--#{$table}--cell--responsive--PaddingInlineStart: 0;
|
|
97
|
+
--#{$table}--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
97
98
|
|
|
98
99
|
// * Table grid compact table
|
|
99
100
|
--#{$table}--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
@@ -132,6 +133,8 @@
|
|
|
132
133
|
|
|
133
134
|
// - Table mobile layout
|
|
134
135
|
@include pf-mobile-layout {
|
|
136
|
+
$pf-mobile-parent: &;
|
|
137
|
+
|
|
135
138
|
--#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-grid--cell--PaddingBlockStart);
|
|
136
139
|
--#{$table}--cell--PaddingInlineEnd: var(--#{$table}--m-grid--cell--PaddingInlineEnd);
|
|
137
140
|
--#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-grid--cell--PaddingBlockEnd);
|
|
@@ -182,6 +185,20 @@
|
|
|
182
185
|
}
|
|
183
186
|
}
|
|
184
187
|
|
|
188
|
+
&.pf-m-animate-expand {
|
|
189
|
+
--#{$table}__expandable-row--Display: block;
|
|
190
|
+
|
|
191
|
+
> .#{$table}__tbody > .#{$table}__expandable-row {
|
|
192
|
+
&:not(.pf-m-expanded) {
|
|
193
|
+
> :is(.#{$table}__td, .#{$table}__th) {
|
|
194
|
+
&[data-label]::before {
|
|
195
|
+
content: none; // hides column header for non-expanded rows
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
185
202
|
// Remove border on tr inside non-expanded tbody in of expandable tables
|
|
186
203
|
&.pf-m-expandable {
|
|
187
204
|
--#{$table}__tr--BorderBlockEndWidth: 0; // nested table rows have no border
|
|
@@ -265,6 +282,10 @@
|
|
|
265
282
|
grid-template-columns: 1fr minmax(0, 1.5fr);
|
|
266
283
|
align-items: start;
|
|
267
284
|
|
|
285
|
+
&.pf-m-action {
|
|
286
|
+
align-items: center;
|
|
287
|
+
}
|
|
288
|
+
|
|
268
289
|
// set contents of td to start at column two of td grid
|
|
269
290
|
> * {
|
|
270
291
|
grid-column: 2;
|
|
@@ -272,7 +293,7 @@
|
|
|
272
293
|
|
|
273
294
|
&::before {
|
|
274
295
|
position: revert;
|
|
275
|
-
font-weight:
|
|
296
|
+
font-weight: var(--#{$table}--cell--responsive--th--FontWeight);
|
|
276
297
|
text-align: start;
|
|
277
298
|
content: attr(data-label);
|
|
278
299
|
}
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
--pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
|
|
11
11
|
--pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
12
12
|
--pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
13
|
-
--pf-v6-c-table__thead__toggle--
|
|
13
|
+
--pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
|
|
14
|
+
--pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
|
|
14
15
|
--pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
|
|
15
16
|
--pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
|
|
16
17
|
--pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
|
|
@@ -60,6 +61,9 @@
|
|
|
60
61
|
--pf-v6-c-table__button--Color: var(--pf-t--global--text--color--regular);
|
|
61
62
|
--pf-v6-c-table__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
62
63
|
--pf-v6-c-table__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
|
|
64
|
+
--pf-v6-c-table__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
65
|
+
--pf-v6-c-table__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
|
|
66
|
+
--pf-v6-c-table__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
|
|
63
67
|
--pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
64
68
|
--pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
|
|
65
69
|
--pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
@@ -74,12 +78,23 @@
|
|
|
74
78
|
--pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
75
79
|
--pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
76
80
|
--pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
81
|
+
--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
|
|
82
|
+
--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
83
|
+
--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
|
|
84
|
+
--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
85
|
+
--pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
86
|
+
--pf-v6-c-table__expandable-row--Opacity: 0;
|
|
87
|
+
--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
|
|
88
|
+
--pf-v6-c-table__expandable-row--TranslateY: 0;
|
|
89
|
+
--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
|
|
77
90
|
--pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
78
91
|
--pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
79
92
|
--pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
80
93
|
--pf-v6-c-table__expandable-row-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
81
94
|
--pf-v6-c-table__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
82
95
|
--pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
96
|
+
--pf-v6-c-table__expandable-row-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
97
|
+
--pf-v6-c-table__expandable-row-content--BorderWidth: 0;
|
|
83
98
|
--pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
84
99
|
--pf-v6-c-table__control-row--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
85
100
|
--pf-v6-c-table__control-row__tbody--BorderBlockEndColor: var(--pf-t--global--border--color--default);
|
|
@@ -101,14 +116,20 @@
|
|
|
101
116
|
--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
102
117
|
--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
103
118
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
119
|
+
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
|
|
104
120
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
|
|
105
121
|
--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
|
|
106
122
|
--pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
|
|
107
123
|
--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
124
|
+
--pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
108
125
|
--pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
|
|
109
126
|
--pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
110
127
|
--pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
111
128
|
--pf-v6-c-table--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
129
|
+
--pf-v6-c-table__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
130
|
+
--pf-v6-c-table__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
131
|
+
--pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
|
|
132
|
+
--pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
112
133
|
--pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
|
|
113
134
|
--pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
114
135
|
--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
|
|
@@ -134,6 +155,13 @@
|
|
|
134
155
|
--pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
135
156
|
--pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
136
157
|
}
|
|
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
|
+
}
|
|
137
165
|
|
|
138
166
|
.pf-v6-c-table {
|
|
139
167
|
width: 100%;
|
|
@@ -330,6 +358,10 @@
|
|
|
330
358
|
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :where(th, td) {
|
|
331
359
|
overflow-wrap: break-word;
|
|
332
360
|
}
|
|
361
|
+
.pf-v6-c-table .pf-v6-c-table__td.pf-m-action {
|
|
362
|
+
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__td--m-action--PaddingBlockStart);
|
|
363
|
+
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__td--m-action--PaddingBlockEnd);
|
|
364
|
+
}
|
|
333
365
|
.pf-v6-c-table .pf-v6-c-table__sort {
|
|
334
366
|
min-width: var(--pf-v6-c-table__sort--MinWidth);
|
|
335
367
|
}
|
|
@@ -398,6 +430,51 @@
|
|
|
398
430
|
.pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
|
|
399
431
|
--pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
|
|
400
432
|
}
|
|
433
|
+
.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody.pf-m-expanded > .pf-v6-c-table__control-row {
|
|
434
|
+
border-block-end: 0;
|
|
435
|
+
}
|
|
436
|
+
.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row {
|
|
437
|
+
display: var(--pf-v6-c-table__expandable-row--Display, revert);
|
|
438
|
+
visibility: hidden;
|
|
439
|
+
opacity: var(--pf-v6-c-table__expandable-row--Opacity);
|
|
440
|
+
transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
|
|
441
|
+
transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
|
|
442
|
+
transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide), 0s, 0s;
|
|
443
|
+
transition-property: opacity, translate, visibility, background-color;
|
|
444
|
+
translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
|
|
445
|
+
}
|
|
446
|
+
.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] {
|
|
447
|
+
display: var(--pf-v6-c-table__expandable-row--Display, revert);
|
|
448
|
+
}
|
|
449
|
+
.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded {
|
|
450
|
+
visibility: visible;
|
|
451
|
+
opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
|
|
452
|
+
transition-delay: 0s;
|
|
453
|
+
transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), 0s, 0s;
|
|
454
|
+
translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
|
|
455
|
+
}
|
|
456
|
+
.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
|
|
457
|
+
max-height: 99999px;
|
|
458
|
+
}
|
|
459
|
+
.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th),
|
|
460
|
+
.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
|
|
461
|
+
padding: 0;
|
|
462
|
+
overflow: hidden;
|
|
463
|
+
transition-delay: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
|
|
464
|
+
transition-property: padding, max-height, overflow;
|
|
465
|
+
}
|
|
466
|
+
.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
|
|
467
|
+
max-height: 0;
|
|
468
|
+
}
|
|
469
|
+
.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
|
|
470
|
+
border-block-end: 0;
|
|
471
|
+
}
|
|
472
|
+
.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row.pf-m-no-animate-expand ~ .pf-v6-c-table__expandable-row {
|
|
473
|
+
--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: 0s;
|
|
474
|
+
--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
|
|
475
|
+
--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: 0s;
|
|
476
|
+
--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
|
|
477
|
+
}
|
|
401
478
|
|
|
402
479
|
[class*=pf-v6-c-table].pf-m-truncate {
|
|
403
480
|
--pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
|
|
@@ -456,6 +533,7 @@
|
|
|
456
533
|
}
|
|
457
534
|
|
|
458
535
|
.pf-v6-c-table__button {
|
|
536
|
+
position: relative;
|
|
459
537
|
width: auto;
|
|
460
538
|
padding-block-start: var(--pf-v6-c-table__button--PaddingBlockStart);
|
|
461
539
|
padding-block-end: var(--pf-v6-c-table__button--PaddingBlockEnd);
|
|
@@ -474,6 +552,14 @@
|
|
|
474
552
|
border-radius: var(--pf-v6-c-table__button--BorderRadius);
|
|
475
553
|
outline-offset: var(--pf-v6-c-table__button--OutlineOffset);
|
|
476
554
|
}
|
|
555
|
+
.pf-v6-c-table__button::after {
|
|
556
|
+
position: absolute;
|
|
557
|
+
inset: 0;
|
|
558
|
+
pointer-events: none;
|
|
559
|
+
content: "";
|
|
560
|
+
border: var(--pf-v6-c-table__button--BorderWidth) solid var(--pf-v6-c-table__button--BorderColor);
|
|
561
|
+
border-radius: inherit;
|
|
562
|
+
}
|
|
477
563
|
.pf-v6-c-table .pf-v6-c-table .pf-v6-c-table__button {
|
|
478
564
|
margin-block-end: 0;
|
|
479
565
|
}
|
|
@@ -544,6 +630,12 @@
|
|
|
544
630
|
--pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
|
|
545
631
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
|
|
546
632
|
}
|
|
633
|
+
.pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
|
|
634
|
+
margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
|
|
635
|
+
margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
|
|
636
|
+
line-height: 1lh;
|
|
637
|
+
}
|
|
638
|
+
|
|
547
639
|
.pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
|
|
548
640
|
transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
|
|
549
641
|
}
|
|
@@ -643,6 +735,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
643
735
|
content: "";
|
|
644
736
|
border: 0;
|
|
645
737
|
border-block-start: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth) solid var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor);
|
|
738
|
+
border-radius: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius);
|
|
646
739
|
}
|
|
647
740
|
.pf-v6-c-table__compound-expansion-toggle:hover, .pf-v6-c-table__compound-expansion-toggle:focus-within {
|
|
648
741
|
--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor);
|
|
@@ -666,6 +759,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
666
759
|
align-self: last baseline;
|
|
667
760
|
margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
|
|
668
761
|
}
|
|
762
|
+
.pf-v6-c-table__column-help-action .pf-v6-c-button {
|
|
763
|
+
line-height: 1lh;
|
|
764
|
+
}
|
|
669
765
|
|
|
670
766
|
.pf-v6-c-table__sort {
|
|
671
767
|
vertical-align: bottom;
|
|
@@ -674,6 +770,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
674
770
|
--pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort__button--hover__sort-indicator--Color);
|
|
675
771
|
--pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort__button--hover__text--Color);
|
|
676
772
|
--pf-v6-c-table__button--BackgroundColor: var(--pf-v6-c-table__button--hover--BackgroundColor);
|
|
773
|
+
--pf-v6-c-table__button--BorderWidth: var(--pf-v6-c-table__button--hover--BorderWidth);
|
|
677
774
|
}
|
|
678
775
|
.pf-v6-c-table__sort .pf-v6-c-table__button .pf-v6-c-table__text {
|
|
679
776
|
color: var(--pf-v6-c-table__sort__button__text--Color);
|
|
@@ -707,7 +804,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
707
804
|
:not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
|
|
708
805
|
padding-block-start: 0;
|
|
709
806
|
}
|
|
710
|
-
|
|
807
|
+
.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):not(.pf-m-no-padding) {
|
|
808
|
+
padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
|
|
809
|
+
}
|
|
711
810
|
.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding,
|
|
712
811
|
.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding {
|
|
713
812
|
padding-block-start: 0;
|
|
@@ -718,15 +817,29 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
718
817
|
.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
|
|
719
818
|
.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
|
|
720
819
|
padding: 0;
|
|
820
|
+
border-radius: 0;
|
|
721
821
|
}
|
|
722
822
|
.pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
|
|
823
|
+
position: relative;
|
|
723
824
|
padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingBlockStart);
|
|
724
825
|
padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBlockEnd);
|
|
725
826
|
padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingInlineStart);
|
|
726
827
|
padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingInlineEnd);
|
|
727
828
|
background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
|
|
829
|
+
border: 0;
|
|
728
830
|
border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
|
|
729
831
|
}
|
|
832
|
+
.pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content.pf-m-no-background {
|
|
833
|
+
background-color: transparent;
|
|
834
|
+
}
|
|
835
|
+
.pf-v6-c-table__expandable-row .pf-v6-c-table__td:not(.pf-m-no-padding) > .pf-v6-c-table__expandable-row-content::after {
|
|
836
|
+
position: absolute;
|
|
837
|
+
inset: 0;
|
|
838
|
+
pointer-events: none;
|
|
839
|
+
content: "";
|
|
840
|
+
border: var(--pf-v6-c-table__expandable-row-content--BorderWidth) solid var(--pf-v6-c-table__expandable-row-content--BorderColor);
|
|
841
|
+
border-radius: inherit;
|
|
842
|
+
}
|
|
730
843
|
.pf-v6-c-table__expandable-row.pf-m-expanded {
|
|
731
844
|
border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
|
|
732
845
|
border-block-end-width: var(--pf-v6-c-table--border-width--base);
|
|
@@ -758,6 +871,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
758
871
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__action--PaddingBlockStart);
|
|
759
872
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__action--PaddingBlockEnd);
|
|
760
873
|
}
|
|
874
|
+
.pf-v6-c-table.pf-m-compact .pf-v6-c-table__td.pf-m-action {
|
|
875
|
+
--pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart);
|
|
876
|
+
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd);
|
|
877
|
+
}
|
|
761
878
|
.pf-v6-c-table.pf-m-compact .pf-v6-c-table__icon {
|
|
762
879
|
width: auto;
|
|
763
880
|
min-width: 0;
|
|
@@ -766,6 +883,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
766
883
|
|
|
767
884
|
.pf-v6-c-table__thead {
|
|
768
885
|
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
886
|
+
--pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
|
|
769
887
|
--pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
|
|
770
888
|
vertical-align: bottom;
|
|
771
889
|
}
|
|
@@ -779,6 +897,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
779
897
|
vertical-align: top;
|
|
780
898
|
}
|
|
781
899
|
.pf-v6-c-table__tbody .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded {
|
|
900
|
+
--pf-v6-c-table__expandable-row-content--BorderWidth: var(--pf-v6-c-table--compound-expansion--m-expanded--BorderWidth);
|
|
782
901
|
background-color: var(--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor);
|
|
783
902
|
}
|
|
784
903
|
|
|
@@ -795,6 +914,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
795
914
|
background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
|
|
796
915
|
border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor);
|
|
797
916
|
}
|
|
917
|
+
.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row.pf-m-expanded {
|
|
918
|
+
border-block-end: 0;
|
|
919
|
+
}
|
|
798
920
|
|
|
799
921
|
.pf-v6-c-table__tr {
|
|
800
922
|
border-block-end: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor);
|