@patternfly/patternfly 6.0.0-alpha.100 → 6.0.0-alpha.101
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/components/Table/table-scrollable.css +12 -15
- package/components/Table/table-scrollable.scss +33 -30
- package/components/Table/table-tree-view.css +0 -2
- package/components/Table/table-tree-view.scss +9 -11
- package/components/Table/table.css +118 -55
- package/components/Table/table.scss +182 -100
- package/docs/components/Table/examples/Table.css +6 -8
- package/docs/components/Table/examples/Table.md +79 -92
- package/docs/demos/Table/examples/Table.md +28 -28
- package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
- package/docs/utilities/Alignment/examples/Alignment.css +4 -4
- package/docs/utilities/Alignment/examples/Alignment.md +5 -5
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +24 -24
- package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
- package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
- package/docs/utilities/Display/examples/Display.css +8 -8
- package/docs/utilities/Display/examples/Display.md +7 -7
- package/docs/utilities/Flex/examples/Flex.css +5 -5
- package/docs/utilities/Flex/examples/Flex.md +82 -40
- package/docs/utilities/Float/examples/Float.css +2 -2
- package/docs/utilities/Float/examples/Float.md +6 -6
- package/docs/utilities/Sizing/examples/Sizing.css +4 -4
- package/docs/utilities/Sizing/examples/Sizing.md +60 -60
- package/docs/utilities/Spacing/examples/Spacing.css +1 -1
- package/docs/utilities/Spacing/examples/Spacing.md +37 -37
- package/docs/utilities/Text/examples/Text.md +53 -53
- package/package.json +1 -1
- package/patternfly-addons.css +91 -371
- package/patternfly-no-globals.css +130 -72
- package/patternfly-theme-dark-unversioned.css +130 -72
- package/patternfly.css +130 -72
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +2 -2
- package/utilities/Alignment/alignment.css +24 -24
- package/utilities/Alignment/alignment.scss +4 -4
- package/utilities/BackgroundColor/BackgroundColor.css +0 -100
- package/utilities/BackgroundColor/BackgroundColor.scss +2 -8
- package/utilities/BoxShadow/box-shadow.css +15 -39
- package/utilities/BoxShadow/box-shadow.scss +17 -27
- package/utilities/Display/display.scss +2 -2
- package/utilities/Flex/flex.scss +18 -18
- package/utilities/Float/float.css +24 -24
- package/utilities/Float/float.scss +4 -4
- package/utilities/Sizing/sizing.css +28 -28
- package/utilities/Sizing/sizing.scss +17 -17
- package/utilities/Text/text.css +0 -155
- package/utilities/Text/text.scss +10 -16
- package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
- package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
- package/utilities/Text/themes/dark/text.css +0 -0
- package/utilities/Text/themes/dark/text.scss +0 -33
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
:where(:root),
|
|
2
2
|
:where(.pf-v6-c-table) {
|
|
3
|
-
--pf-v6-c-table__sticky-cell--MinWidth--base:
|
|
3
|
+
--pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
|
|
4
4
|
--pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
|
|
5
5
|
--pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
6
6
|
--pf-v6-c-table__sticky-cell--Right: auto;
|
|
@@ -14,36 +14,33 @@
|
|
|
14
14
|
--pf-v6-c-table__sticky-cell--m-left--Left: 0;
|
|
15
15
|
--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-v6-c-table__sticky-cell--ZIndex) + 1);
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
--pf-v6-c-table--cell--Overflow: visible;
|
|
20
|
-
--pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex);
|
|
17
|
+
|
|
18
|
+
.pf-v6-c-table .pf-v6-c-table__sticky-cell {
|
|
21
19
|
position: sticky;
|
|
22
20
|
inset-inline-start: var(--pf-v6-c-table__sticky-cell--Left);
|
|
23
21
|
inset-inline-end: var(--pf-v6-c-table__sticky-cell--Right);
|
|
24
22
|
z-index: var(--pf-v6-c-table__sticky-cell--ZIndex);
|
|
25
23
|
min-width: var(--pf-v6-c-table__sticky-cell--MinWidth);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.pf-v6-c-table__sticky-cell {
|
|
27
|
+
--pf-v6-c-table--cell--Overflow: visible;
|
|
28
|
+
--pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex);
|
|
26
29
|
background-color: var(--pf-v6-c-table__sticky-cell--BackgroundColor);
|
|
27
30
|
background-clip: padding-box;
|
|
28
31
|
}
|
|
29
|
-
|
|
30
|
-
:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-border-right::before {
|
|
32
|
+
.pf-v6-c-table__sticky-cell.pf-m-border-right::before {
|
|
31
33
|
--pf-v6-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
|
|
32
34
|
--pf-v6-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderRightColor);
|
|
33
35
|
}
|
|
34
|
-
|
|
35
|
-
:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-border-left::before {
|
|
36
|
+
.pf-v6-c-table__sticky-cell.pf-m-border-left::before {
|
|
36
37
|
--pf-v6-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
|
|
37
38
|
--pf-v6-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
|
|
38
39
|
}
|
|
39
|
-
|
|
40
|
-
:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-right,
|
|
41
|
-
:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-inline-end {
|
|
40
|
+
.pf-v6-c-table__sticky-cell.pf-m-right, .pf-v6-c-table__sticky-cell.pf-m-inline-end {
|
|
42
41
|
--pf-v6-c-table__sticky-cell--Right: var(--pf-v6-c-table__sticky-cell--m-right--Right);
|
|
43
42
|
}
|
|
44
|
-
|
|
45
|
-
:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-left,
|
|
46
|
-
:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-inline-start {
|
|
43
|
+
.pf-v6-c-table__sticky-cell.pf-m-left, .pf-v6-c-table__sticky-cell.pf-m-inline-start {
|
|
47
44
|
--pf-v6-c-table__sticky-cell--Left: var(--pf-v6-c-table__sticky-cell--m-left--Left);
|
|
48
45
|
}
|
|
49
46
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// * Table scrollable
|
|
2
2
|
:where(:root),
|
|
3
3
|
:where(.#{$table}) {
|
|
4
|
-
--#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(
|
|
4
|
+
--#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(140px)};
|
|
5
5
|
--#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
|
|
6
6
|
--#{$table}__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
7
7
|
--#{$table}__sticky-cell--Right: auto;
|
|
@@ -14,44 +14,47 @@
|
|
|
14
14
|
--#{$table}__sticky-cell--m-right--Right: 0;
|
|
15
15
|
--#{$table}__sticky-cell--m-left--Left: 0;
|
|
16
16
|
--#{$table}--m-sticky-header__sticky-cell--ZIndex: calc(var(--#{$table}__sticky-cell--ZIndex) + 1);
|
|
17
|
+
}
|
|
18
|
+
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
// - Table sticky cell
|
|
21
|
+
.#{$table} .#{$table}__sticky-cell {
|
|
22
|
+
position: sticky;
|
|
23
|
+
inset-inline-start: var(--#{$table}__sticky-cell--Left);
|
|
24
|
+
inset-inline-end: var(--#{$table}__sticky-cell--Right);
|
|
25
|
+
z-index: var(--#{$table}__sticky-cell--ZIndex);
|
|
26
|
+
min-width: var(--#{$table}__sticky-cell--MinWidth);
|
|
27
|
+
}
|
|
22
28
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
z-index: var(--#{$table}__sticky-cell--ZIndex);
|
|
27
|
-
min-width: var(--#{$table}__sticky-cell--MinWidth);
|
|
28
|
-
background-color: var(--#{$table}__sticky-cell--BackgroundColor);
|
|
29
|
-
background-clip: padding-box;
|
|
29
|
+
.#{$table}__sticky-cell {
|
|
30
|
+
--#{$table}--cell--Overflow: visible;
|
|
31
|
+
--#{$table}--m-sticky-header--cell--ZIndex: var(--#{$table}--m-sticky-header__sticky-cell--ZIndex);
|
|
30
32
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
--#{$table}--cell--m-border-right--before--BorderRightColor: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightColor);
|
|
34
|
-
}
|
|
33
|
+
background-color: var(--#{$table}__sticky-cell--BackgroundColor);
|
|
34
|
+
background-clip: padding-box;
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
&.pf-m-border-right::before {
|
|
37
|
+
--#{$table}--cell--m-border-right--before--BorderRightWidth: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightWidth);
|
|
38
|
+
--#{$table}--cell--m-border-right--before--BorderRightColor: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightColor);
|
|
39
|
+
}
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
&.pf-m-border-left::before {
|
|
42
|
+
--#{$table}--cell--m-border-left--before--BorderLeftWidth: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftWidth);
|
|
43
|
+
--#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
|
|
44
|
+
}
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
&.pf-m-right,
|
|
47
|
+
&.pf-m-inline-end {
|
|
48
|
+
--#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
|
|
49
|
+
}
|
|
50
50
|
|
|
51
|
+
&.pf-m-left,
|
|
52
|
+
&.pf-m-inline-start {
|
|
53
|
+
--#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
|
|
51
54
|
}
|
|
52
55
|
}
|
|
53
56
|
|
|
54
|
-
//
|
|
57
|
+
// - Scroll outer wrapper
|
|
55
58
|
.#{$scroll-outer-wrapper} {
|
|
56
59
|
--#{$scroll-outer-wrapper}--MinHeight: #{pf-size-prem(400px)};
|
|
57
60
|
--#{$scroll-outer-wrapper}--MaxHeight: 100%;
|
|
@@ -64,7 +67,7 @@
|
|
|
64
67
|
overflow: hidden;
|
|
65
68
|
}
|
|
66
69
|
|
|
67
|
-
//
|
|
70
|
+
// - Scroll inner wrapper
|
|
68
71
|
.#{$scroll-inner-wrapper} {
|
|
69
72
|
display: flex;
|
|
70
73
|
flex-direction: column;
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
--pf-v6-c-table__tree-view-main--PaddingLeft: var(--pf-v6-c-table__tree-view-main--indent--base);
|
|
7
7
|
--pf-v6-c-table__tree-view-main--MarginLeft: calc(var(--pf-v6-c-table--cell--PaddingLeft) * -1);
|
|
8
8
|
--pf-v6-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
9
|
-
--pf-v6-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
10
9
|
--pf-v6-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-t--global--spacer--sm);
|
|
11
10
|
--pf-v6-c-table__tree-view-icon--MinWidth: var(--pf-t--global--spacer--md);
|
|
12
11
|
--pf-v6-c-table__tree-view-icon--MarginRight: var(--pf-t--global--spacer--sm);
|
|
@@ -87,7 +86,6 @@
|
|
|
87
86
|
margin-inline-end: var(--pf-v6-c-table__tree-view-main--c-table__check--MarginRight);
|
|
88
87
|
}
|
|
89
88
|
.pf-v6-c-table__tree-view-main > .pf-v6-c-table__check label {
|
|
90
|
-
padding-inline-start: var(--pf-v6-c-table__tree-view-main--c-table__check--PaddingLeft);
|
|
91
89
|
padding-inline-end: var(--pf-v6-c-table__tree-view-main--c-table__check--PaddingRight);
|
|
92
90
|
margin-block-start: 0;
|
|
93
91
|
margin-block-end: 0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
$pf-
|
|
1
|
+
$pf-v6-c-tree-view--MaxDepth: 10;
|
|
2
2
|
|
|
3
3
|
// * Table tree view
|
|
4
4
|
:where(:root),
|
|
@@ -9,28 +9,27 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
9
9
|
// * Table tree view main button
|
|
10
10
|
--#{$table}__tree-view-main--c-button--MarginRight: var(--pf-t--global--spacer--sm);
|
|
11
11
|
|
|
12
|
-
//
|
|
12
|
+
// * Table tree view main
|
|
13
13
|
--#{$table}__tree-view-main--PaddingLeft: var(--#{$table}__tree-view-main--indent--base);
|
|
14
14
|
--#{$table}__tree-view-main--MarginLeft: calc(var(--#{$table}--cell--PaddingLeft) * -1);
|
|
15
15
|
|
|
16
|
-
//
|
|
16
|
+
// * Table tree view check
|
|
17
17
|
--#{$table}__tree-view-main--c-table__check--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
18
|
-
--#{$table}__tree-view-main--c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
19
18
|
--#{$table}__tree-view-main--c-table__check--MarginRight: var(--pf-t--global--spacer--sm);
|
|
20
19
|
|
|
21
|
-
//
|
|
20
|
+
// * Table tree view icon
|
|
22
21
|
--#{$table}__tree-view-icon--MinWidth: var(--pf-t--global--spacer--md);
|
|
23
22
|
--#{$table}__tree-view-icon--MarginRight: var(--pf-t--global--spacer--sm);
|
|
24
23
|
|
|
25
|
-
//
|
|
24
|
+
// * Table tree view toggle
|
|
26
25
|
--#{$table}--m-tree-view__toggle--Position: absolute;
|
|
27
26
|
--#{$table}--m-tree-view__toggle--Left: var(--#{$table}__tree-view-main--PaddingLeft);
|
|
28
27
|
--#{$table}--m-tree-view__toggle--TranslateX: -100%;
|
|
29
28
|
|
|
30
|
-
//
|
|
29
|
+
// * Table tree view toggle toggle icon
|
|
31
30
|
--#{$table}--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-t--global--spacer--md);
|
|
32
31
|
|
|
33
|
-
//
|
|
32
|
+
// * Table tree view no inset tree view main
|
|
34
33
|
--#{$table}--m-no-inset__tree-view-main--PaddingLeft: 0;
|
|
35
34
|
--#{$table}--m-no-inset__tree-view-main--MarginLeft: 0;
|
|
36
35
|
}
|
|
@@ -51,7 +50,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
51
50
|
--#{$table}__tree-view-main--MarginLeft: var(--#{$table}--m-no-inset__tree-view-main--MarginLeft);
|
|
52
51
|
}
|
|
53
52
|
|
|
54
|
-
@for $i from 2 through $pf-
|
|
53
|
+
@for $i from 2 through $pf-v6-c-tree-view--MaxDepth {
|
|
55
54
|
tr:where(.#{$table}__tr)[aria-level="#{$i}"] {
|
|
56
55
|
--#{$table}__tree-view-main--PaddingLeft: calc(var(--#{$table}__tree-view-main--nested-indent--base) * #{$i - 1} + var(--#{$table}__tree-view-main--indent--base));
|
|
57
56
|
}
|
|
@@ -95,7 +94,6 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
95
94
|
}
|
|
96
95
|
|
|
97
96
|
> .#{$table}__check label {
|
|
98
|
-
padding-inline-start: var(--#{$table}__tree-view-main--c-table__check--PaddingLeft);
|
|
99
97
|
padding-inline-end: var(--#{$table}__tree-view-main--c-table__check--PaddingRight);
|
|
100
98
|
margin-block-start: 0;
|
|
101
99
|
margin-block-end: 0;
|
|
@@ -313,7 +311,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
|
|
|
313
311
|
margin-block-end: var(--#{$table}__tree-view-details-toggle--MarginBottom);
|
|
314
312
|
}
|
|
315
313
|
|
|
316
|
-
@for $i from 2 through $pf-
|
|
314
|
+
@for $i from 2 through $pf-v6-c-tree-view--MaxDepth {
|
|
317
315
|
tr:where(.#{$table}__tr)[aria-level="#{$i}"] {
|
|
318
316
|
--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--#{$table}__tree-view-main--nested-indent--base) * #{$i - 1} + var(--#{$table}__tree-view-main--indent--base)); // indent, plus indent level, plus
|
|
319
317
|
}
|
|
@@ -60,18 +60,21 @@
|
|
|
60
60
|
--pf-v6-c-table__caption--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
61
61
|
--pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
62
62
|
--pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
63
|
+
--pf-v6-c-table__thead__toggle--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
63
64
|
--pf-v6-c-table__tbody--cell--PaddingTop: var(--pf-v6-c-table--cell--Padding--base);
|
|
64
65
|
--pf-v6-c-table__tbody--cell--PaddingBottom: var(--pf-v6-c-table--cell--Padding--base);
|
|
65
66
|
--pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
|
|
67
|
+
--pf-v6-c-table__tr--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
|
68
|
+
--pf-v6-c-table__tr--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
66
69
|
--pf-v6-c-table--cell--Padding--base: var(--pf-t--global--spacer--md);
|
|
67
|
-
--pf-v6-c-table--cell--FontSize: var(--pf-t--global--font--size--body--default);
|
|
68
|
-
--pf-v6-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body);
|
|
69
|
-
--pf-v6-c-table--cell--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
70
|
-
--pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
|
|
71
70
|
--pf-v6-c-table--cell--PaddingTop: var(--pf-v6-c-table--cell--Padding--base);
|
|
72
71
|
--pf-v6-c-table--cell--PaddingRight: var(--pf-v6-c-table--cell--Padding--base);
|
|
73
72
|
--pf-v6-c-table--cell--PaddingBottom: var(--pf-v6-c-table--cell--Padding--base);
|
|
74
73
|
--pf-v6-c-table--cell--PaddingLeft: var(--pf-v6-c-table--cell--Padding--base);
|
|
74
|
+
--pf-v6-c-table--cell--FontSize: var(--pf-t--global--font--size--body--default);
|
|
75
|
+
--pf-v6-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body);
|
|
76
|
+
--pf-v6-c-table--cell--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
77
|
+
--pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
|
|
75
78
|
--pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--sm);
|
|
76
79
|
--pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--pf-v6-c-table--cell--Padding--base);
|
|
77
80
|
--pf-v6-c-table--cell--MinWidth: 0;
|
|
@@ -88,6 +91,7 @@
|
|
|
88
91
|
--pf-v6-c-table--cell--m-help--MinWidth: 11ch;
|
|
89
92
|
--pf-v6-c-table--m-truncate--cell--MaxWidth: 1px;
|
|
90
93
|
--pf-v6-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-v6-c-table--cell--PaddingRight) + var(--pf-v6-c-table--cell--PaddingLeft));
|
|
94
|
+
--pf-v6-c-table--m-truncate__text--MinWidth: 5ch;
|
|
91
95
|
--pf-v6-c-table--cell--hidden-visible--Display: table-cell;
|
|
92
96
|
--pf-v6-c-table__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
93
97
|
--pf-v6-c-table__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
@@ -106,7 +110,6 @@
|
|
|
106
110
|
--pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
107
111
|
--pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
|
|
108
112
|
--pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
109
|
-
--pf-v6-c-table__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
|
|
110
113
|
--pf-v6-c-table--m-compact__toggle--PaddingTop: 0;
|
|
111
114
|
--pf-v6-c-table--m-compact__toggle--PaddingBottom: 0;
|
|
112
115
|
--pf-v6-c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
@@ -114,6 +117,7 @@
|
|
|
114
117
|
--pf-v6-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
|
|
115
118
|
--pf-v6-c-table--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
|
|
116
119
|
--pf-v6-c-table__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked);
|
|
120
|
+
--pf-v6-c-table__favorite--m-favorited--c-button--hover--Color: var(--pf-t--global--color--favorite--clicked);
|
|
117
121
|
--pf-v6-c-table__sort--m-favorite__button__text--Color: var(--pf-t--global--text--color--subtle);
|
|
118
122
|
--pf-v6-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-t--global--text--color--regular);
|
|
119
123
|
--pf-v6-c-table__draggable--c-button--MarginTop: calc(var(--pf-v6-c-button--PaddingTop) * -1);
|
|
@@ -133,7 +137,11 @@
|
|
|
133
137
|
--pf-v6-c-table__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
134
138
|
--pf-v6-c-table__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
135
139
|
--pf-v6-c-table__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--md);
|
|
140
|
+
--pf-v6-c-table__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
136
141
|
--pf-v6-c-table__expandable-row-content--Transition: var(--pf-v6-global--Transition);
|
|
142
|
+
--pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
143
|
+
--pf-v6-c-table__control-row--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
|
144
|
+
--pf-v6-c-table__control-row__tbody--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
137
145
|
--pf-v6-c-table__icon-inline--MarginRight: var(--pf-t--global--spacer--sm);
|
|
138
146
|
--pf-v6-c-table__sort--MinWidth: calc(6ch + var(--pf-v6-c-table--cell--PaddingRight) + var(--pf-v6-c-table--cell--PaddingLeft) + var(--pf-v6-c-table__sort-indicator--MarginLeft));
|
|
139
147
|
--pf-v6-c-table__sort__button--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
@@ -160,10 +168,16 @@
|
|
|
160
168
|
--pf-v6-c-table__column-help--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
161
169
|
--pf-v6-c-table__column-help--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
162
170
|
--pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
|
|
171
|
+
--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
163
172
|
--pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
|
|
173
|
+
--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
174
|
+
--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
164
175
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
165
176
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
|
|
177
|
+
--pf-v6-c-table__compound-expansion-toggle__button--hover--BorderColor: var(--pf-t--global--border--color--hover);
|
|
178
|
+
--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
|
|
166
179
|
--pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
|
|
180
|
+
--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
167
181
|
--pf-v6-c-table--m-compact__th--PaddingTop: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
|
|
168
182
|
--pf-v6-c-table--m-compact__th--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
169
183
|
--pf-v6-c-table--m-compact--cell--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
@@ -172,26 +186,34 @@
|
|
|
172
186
|
--pf-v6-c-table--m-compact--cell--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
173
187
|
--pf-v6-c-table--m-compact__action--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
174
188
|
--pf-v6-c-table--m-compact__action--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
189
|
+
--pf-v6-c-table--m-expandable__tbody--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
|
190
|
+
--pf-v6-c-table--m-expandable__tbody--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
175
191
|
--pf-v6-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
176
192
|
--pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
|
|
177
193
|
--pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
|
|
178
194
|
--pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
179
|
-
--pf-v6-c-table__tr--m-
|
|
195
|
+
--pf-v6-c-table__tr--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
196
|
+
--pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
180
197
|
--pf-v6-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
|
|
181
198
|
--pf-v6-c-table__tbody--m-clickable--BackgroundColor: transparent;
|
|
182
199
|
--pf-v6-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
|
|
183
|
-
--pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--
|
|
200
|
+
--pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
201
|
+
--pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
184
202
|
--pf-v6-c-table__tbody--m-clickable--m-expanded--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
185
|
-
--pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--
|
|
203
|
+
--pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
186
204
|
--pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
|
|
187
205
|
--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
|
|
188
206
|
--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
189
|
-
--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--
|
|
207
|
+
--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
190
208
|
--pf-v6-c-table__subhead--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
191
209
|
--pf-v6-c-table__subhead--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
192
210
|
--pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
|
|
193
|
-
--pf-v6-c-
|
|
211
|
+
--pf-v6-c-table__nested-column-header__button--PaddingLeft: calc(var(--pf-v6-c-table__button--PaddingLeft) - var(--pf-t--global--spacer--sm));
|
|
212
|
+
--pf-v6-c-table__nested-column-header__button--PaddingRight: calc(var(--pf-v6-c-table__button--PaddingRight) - var(--pf-t--global--spacer--xs));
|
|
213
|
+
--pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
194
214
|
--pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
215
|
+
--pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 1);
|
|
216
|
+
--pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 2);
|
|
195
217
|
}
|
|
196
218
|
|
|
197
219
|
.pf-v6-c-table {
|
|
@@ -201,39 +223,36 @@
|
|
|
201
223
|
.pf-v6-c-table.pf-m-fixed {
|
|
202
224
|
table-layout: fixed;
|
|
203
225
|
}
|
|
204
|
-
.pf-v6-c-table.pf-m-sticky-header
|
|
205
|
-
|
|
206
|
-
}
|
|
207
|
-
.pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > :where(th, td) {
|
|
208
|
-
z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
|
|
209
|
-
}
|
|
210
|
-
.pf-v6-c-table.pf-m-sticky-header > thead:where(.pf-v6-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v6-c-table__tr) > :where(th, td) {
|
|
226
|
+
.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead,
|
|
227
|
+
.pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header {
|
|
211
228
|
position: sticky;
|
|
212
229
|
inset-block-start: 0;
|
|
230
|
+
z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
|
|
213
231
|
background: var(--pf-v6-c-table--BackgroundColor);
|
|
214
232
|
}
|
|
215
|
-
.pf-v6-c-table.pf-m-sticky-header >
|
|
233
|
+
.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before,
|
|
234
|
+
.pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header::before {
|
|
216
235
|
position: absolute;
|
|
236
|
+
inset-block-start: 0;
|
|
217
237
|
inset-block-end: 0;
|
|
218
238
|
inset-inline-start: 0;
|
|
219
239
|
inset-inline-end: 0;
|
|
240
|
+
z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
|
|
241
|
+
pointer-events: none;
|
|
220
242
|
content: "";
|
|
221
243
|
border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
222
244
|
}
|
|
245
|
+
.pf-v6-c-table.pf-m-sticky-header {
|
|
246
|
+
position: relative;
|
|
247
|
+
}
|
|
248
|
+
.pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > :where(th, td) {
|
|
249
|
+
z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
|
|
250
|
+
}
|
|
223
251
|
.pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
|
|
224
252
|
position: sticky;
|
|
225
253
|
inset-block-start: 0;
|
|
226
|
-
z-index: var(--pf-t--global--Zindex--xs);
|
|
227
254
|
background: var(--pf-v6-c-table--BackgroundColor);
|
|
228
255
|
}
|
|
229
|
-
.pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header > .pf-m-border-row {
|
|
230
|
-
height: var(--pf-v6-c-table--border-width--base);
|
|
231
|
-
background-color: var(--pf-v6-c-table--BorderColor);
|
|
232
|
-
}
|
|
233
|
-
.pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:nth-last-child(2)) th:where(.pf-v6-c-table__th):not([rowspan]),
|
|
234
|
-
.pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:nth-last-child(2)) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
235
|
-
--pf-v6-c-table--cell--PaddingBottom: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom);
|
|
236
|
-
}
|
|
237
256
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
|
|
238
257
|
border-block-end: 0;
|
|
239
258
|
}
|
|
@@ -241,7 +260,7 @@
|
|
|
241
260
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
242
261
|
--pf-v6-c-table--cell--PaddingBottom: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom);
|
|
243
262
|
}
|
|
244
|
-
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr)
|
|
263
|
+
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
245
264
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
246
265
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
247
266
|
.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-striped {
|
|
@@ -280,7 +299,7 @@
|
|
|
280
299
|
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-center {
|
|
281
300
|
text-align: center;
|
|
282
301
|
}
|
|
283
|
-
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):empty {
|
|
302
|
+
.pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):is(:empty, .pf-v6-c-table__cell-empty) {
|
|
284
303
|
width: auto;
|
|
285
304
|
min-width: 0;
|
|
286
305
|
padding: 0;
|
|
@@ -327,14 +346,9 @@
|
|
|
327
346
|
--pf-v6-c-table--cell--PaddingTop: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingTop);
|
|
328
347
|
}
|
|
329
348
|
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__subhead {
|
|
330
|
-
--pf-v6-c-table--cell--PaddingLeft: var(--pf-v6-c-table__subhead--PaddingLeft);
|
|
331
|
-
--pf-v6-c-table--cell--PaddingRight: var(--pf-v6-c-table__subhead--PaddingRight);
|
|
332
349
|
--pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__subhead--Color);
|
|
333
350
|
color: var(--pf-v6-c-table__subhead--Color);
|
|
334
351
|
}
|
|
335
|
-
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__subhead .pf-v6-c-table__button {
|
|
336
|
-
margin-inline-start: 0;
|
|
337
|
-
}
|
|
338
352
|
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) {
|
|
339
353
|
--pf-v6-c-table--cell--PaddingTop: var(--pf-v6-c-table__tbody--cell--PaddingTop);
|
|
340
354
|
--pf-v6-c-table--cell--PaddingBottom: var(--pf-v6-c-table__tbody--cell--PaddingBottom);
|
|
@@ -383,6 +397,12 @@
|
|
|
383
397
|
--pf-v6-c-table--cell--WordBreak: break-word;
|
|
384
398
|
--pf-v6-c-table--cell--WhiteSpace: normal;
|
|
385
399
|
}
|
|
400
|
+
.pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) {
|
|
401
|
+
--pf-v6-c-table__tr--BorderBottomWidth: 0;
|
|
402
|
+
--pf-v6-c-table__tbody--BorderBottomWidth: 0;
|
|
403
|
+
--pf-v6-c-table--m-expandable__tbody--BorderBottomWidth: 0;
|
|
404
|
+
--pf-v6-c-table__control-row--BorderBottomWidth: 0;
|
|
405
|
+
}
|
|
386
406
|
.pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) {
|
|
387
407
|
border-block-end: 0;
|
|
388
408
|
}
|
|
@@ -401,35 +421,38 @@
|
|
|
401
421
|
--pf-v6-c-table__tr--m-clickable--BackgroundColor: var(--pf-v6-c-table__tr--m-clickable--hover--BackgroundColor);
|
|
402
422
|
}
|
|
403
423
|
.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
|
|
404
|
-
--pf-v6-c-table__expandable-row--after--BorderLeftWidth: var(--pf-v6-c-table__tr--m-selected--after--BorderLeftWidth);
|
|
405
|
-
--pf-v6-c-table__expandable-row--after--BorderColor: var(--pf-v6-c-table__tr--m-selected--after--BorderLeftColor);
|
|
406
424
|
position: relative;
|
|
407
425
|
background-color: var(--pf-v6-c-table__tr--m-selected--BackgroundColor);
|
|
408
426
|
outline-offset: var(--pf-v6-c-table__tr--m-selected--OutlineOffset);
|
|
409
427
|
}
|
|
410
|
-
.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-first-cell-offset-reset {
|
|
411
|
-
|
|
428
|
+
.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-first-cell-offset-reset > :first-child {
|
|
429
|
+
padding-inline-start: var(--pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingLeft);
|
|
412
430
|
}
|
|
413
431
|
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable {
|
|
414
432
|
cursor: pointer;
|
|
415
433
|
background-color: var(--pf-v6-c-table__tbody--m-clickable--BackgroundColor);
|
|
416
434
|
outline-offset: var(--pf-v6-c-table__tbody--m-clickable--OutlineOffset);
|
|
417
435
|
}
|
|
418
|
-
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable.pf-m-expanded:not(.pf-m-selected) {
|
|
419
|
-
--pf-v6-c-table__expandable-row--after--BorderColor: var(--pf-v6-c-table__tbody--m-clickable--m-expanded--BorderColor);
|
|
420
|
-
}
|
|
421
436
|
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable:is(:hover, :focus) {
|
|
422
437
|
--pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor);
|
|
423
438
|
}
|
|
439
|
+
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-clickable.pf-m-expanded {
|
|
440
|
+
--pf-v6-c-table__tbody--m-clickable--BackgroundColor: var(--pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor);
|
|
441
|
+
}
|
|
424
442
|
.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected {
|
|
425
|
-
--pf-v6-c-table__expandable-row--after--BorderLeftWidth: var(--pf-v6-c-table__tbody--m-selected--after--BorderLeftWidth);
|
|
426
|
-
--pf-v6-c-table__expandable-row--after--BorderColor: var(--pf-v6-c-table__tbody--m-selected--after--BorderLeftColor);
|
|
427
443
|
background-color: var(--pf-v6-c-table__tbody--m-selected--BackgroundColor);
|
|
428
444
|
outline-offset: var(--pf-v6-c-table__tbody--m-selected--OutlineOffset);
|
|
429
445
|
}
|
|
430
446
|
.pf-v6-c-table.pf-m-drag-over {
|
|
431
447
|
overflow-anchor: none;
|
|
432
448
|
}
|
|
449
|
+
.pf-v6-c-table .pf-v6-c-table {
|
|
450
|
+
background-color: transparent;
|
|
451
|
+
}
|
|
452
|
+
.pf-v6-c-table .pf-v6-c-table,
|
|
453
|
+
.pf-v6-c-table .pf-v6-c-table :is(.pf-v6-c-table__tbody, .pf-v6-c-table__tr:last-child) {
|
|
454
|
+
border-block-end: 0;
|
|
455
|
+
}
|
|
433
456
|
|
|
434
457
|
.pf-v6-c-table__text {
|
|
435
458
|
--pf-v6-c-table--cell--MaxWidth: 100%;
|
|
@@ -446,6 +469,7 @@
|
|
|
446
469
|
}
|
|
447
470
|
.pf-v6-c-table__text.pf-m-truncate {
|
|
448
471
|
--pf-v6-c-table--cell--MinWidth: 100%;
|
|
472
|
+
--pf-v6-c-table--text--MinWidth: var(--pf-v6-c-table--m-truncate__text--MinWidth);
|
|
449
473
|
}
|
|
450
474
|
.pf-v6-c-table__text.pf-m-truncate > :where(th, td) {
|
|
451
475
|
overflow: var(--pf-v6-c-table--cell--Overflow);
|
|
@@ -453,10 +477,6 @@
|
|
|
453
477
|
white-space: var(--pf-v6-c-table--cell--WhiteSpace);
|
|
454
478
|
}
|
|
455
479
|
|
|
456
|
-
.pf-v6-c-table__tr.pf-m-border-row {
|
|
457
|
-
border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
458
|
-
}
|
|
459
|
-
|
|
460
480
|
.pf-v6-c-table__button {
|
|
461
481
|
width: auto;
|
|
462
482
|
padding-block-start: var(--pf-v6-c-table__button--PaddingTop);
|
|
@@ -474,6 +494,7 @@
|
|
|
474
494
|
background-color: var(--pf-v6-c-table__button--BackgroundColor);
|
|
475
495
|
border: 0;
|
|
476
496
|
border-radius: var(--pf-v6-c-table__button--BorderRadius);
|
|
497
|
+
outline-offset: var(--pf-v6-c-table__button--OutlineOffset);
|
|
477
498
|
}
|
|
478
499
|
.pf-v6-c-table .pf-v6-c-table .pf-v6-c-table__button {
|
|
479
500
|
margin-block-end: 0;
|
|
@@ -583,9 +604,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
583
604
|
.pf-v6-c-table__favorite .pf-v6-c-button {
|
|
584
605
|
--pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
|
|
585
606
|
}
|
|
586
|
-
.pf-
|
|
607
|
+
.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
|
|
587
608
|
--pf-v6-c-button--m-plain--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
|
|
588
609
|
}
|
|
610
|
+
.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
|
|
611
|
+
--pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
|
|
612
|
+
}
|
|
589
613
|
|
|
590
614
|
.pf-v6-c-table__draggable .pf-v6-c-button {
|
|
591
615
|
cursor: grab;
|
|
@@ -614,6 +638,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
614
638
|
--pf-v6-c-table__button--hover--Color: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--Color);
|
|
615
639
|
position: relative;
|
|
616
640
|
padding: 0;
|
|
641
|
+
background-color: var(--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor);
|
|
617
642
|
}
|
|
618
643
|
.pf-v6-c-table__compound-expansion-toggle.pf-m-truncate {
|
|
619
644
|
overflow: visible;
|
|
@@ -635,7 +660,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
635
660
|
border: 0;
|
|
636
661
|
border-block-start: var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth) solid var(--pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor);
|
|
637
662
|
}
|
|
638
|
-
.pf-v6-c-table__compound-expansion-toggle:hover, .pf-v6-c-table__compound-expansion-toggle:focus-within
|
|
663
|
+
.pf-v6-c-table__compound-expansion-toggle:hover, .pf-v6-c-table__compound-expansion-toggle:focus-within {
|
|
664
|
+
--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor);
|
|
665
|
+
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderTopWidth);
|
|
666
|
+
}
|
|
667
|
+
.pf-v6-c-table__compound-expansion-toggle.pf-m-expanded {
|
|
668
|
+
--pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor);
|
|
639
669
|
--pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth);
|
|
640
670
|
}
|
|
641
671
|
.pf-v6-c-table__compound-expansion-toggle:focus-within {
|
|
@@ -671,10 +701,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
671
701
|
.pf-v6-c-table__sort.pf-m-help {
|
|
672
702
|
--pf-v6-c-table__th--m-help--MinWidth: var(--pf-v6-c-table__sort--m-help--MinWidth);
|
|
673
703
|
}
|
|
674
|
-
.pf-v6-c-table__sort.pf-m-favorite {
|
|
675
|
-
|
|
676
|
-
--pf-v6-c-table__sort__button--hover__text--Color: var(--pf-v6-c-table__sort--m-favorite__button--hover__text--Color);
|
|
677
|
-
--pf-v6-c-table__sort--m-selected__button__text--Color: currentcolor;
|
|
704
|
+
.pf-v6-c-table__sort.pf-m-favorite .pf-v6-c-table__text {
|
|
705
|
+
font-size: var(--pf-v6-c-table__favorite--c-button--FontSize);
|
|
678
706
|
}
|
|
679
707
|
|
|
680
708
|
.pf-v6-c-table__sort-indicator {
|
|
@@ -703,7 +731,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
703
731
|
padding-block-start: 0;
|
|
704
732
|
padding-inline-end: 0;
|
|
705
733
|
padding-block-end: 0;
|
|
706
|
-
padding-inline-start:
|
|
734
|
+
padding-inline-start: 0;
|
|
707
735
|
}
|
|
708
736
|
.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
|
|
709
737
|
.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
|
|
@@ -712,6 +740,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
712
740
|
.pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
|
|
713
741
|
padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingTop);
|
|
714
742
|
padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBottom);
|
|
743
|
+
padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingLeft);
|
|
744
|
+
padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingRight);
|
|
745
|
+
background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
|
|
746
|
+
border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
|
|
715
747
|
}
|
|
716
748
|
.pf-v6-c-table__expandable-row.pf-m-expanded {
|
|
717
749
|
border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBottomColor);
|
|
@@ -751,13 +783,44 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
751
783
|
}
|
|
752
784
|
|
|
753
785
|
.pf-v6-c-table__thead {
|
|
786
|
+
--pf-v6-c-table__tr--BorderBottomWidth: 0;
|
|
787
|
+
--pf-v6-c-table__toggle--PaddingBottom: var(--pf-v6-c-table__thead__toggle--PaddingBottom);
|
|
754
788
|
vertical-align: bottom;
|
|
755
789
|
}
|
|
790
|
+
.pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
|
|
791
|
+
--pf-v6-c-table__button--PaddingLeft: var(--pf-v6-c-table__nested-column-header__button--PaddingLeft);
|
|
792
|
+
--pf-v6-c-table__button--PaddingRight: var(--pf-v6-c-table__nested-column-header__button--PaddingRight);
|
|
793
|
+
margin-inline-end: calc(var(--pf-v6-c-table__button--PaddingLeft) * -1);
|
|
794
|
+
}
|
|
756
795
|
|
|
757
796
|
.pf-v6-c-table__tbody {
|
|
758
797
|
vertical-align: top;
|
|
759
798
|
}
|
|
760
|
-
.pf-v6-c-table__tbody .pf-v6-c-
|
|
799
|
+
.pf-v6-c-table__tbody .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded {
|
|
800
|
+
background-color: var(--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor);
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tr.pf-m-expanded {
|
|
804
|
+
border-block-end: 0;
|
|
805
|
+
}
|
|
806
|
+
.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody {
|
|
807
|
+
border-block-end: var(--pf-v6-c-table__tr--BorderBottomWidth) solid var(--pf-v6-c-table__tr--BorderBottomColor);
|
|
808
|
+
}
|
|
809
|
+
.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
|
|
810
|
+
border-block-end: var(--pf-v6-c-table__tr--BorderBottomWidth) solid var(--pf-v6-c-table__tr--BorderBottomColor);
|
|
811
|
+
}
|
|
812
|
+
.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
|
|
813
|
+
background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
|
|
814
|
+
border-block-end: var(--pf-v6-c-table__control-row--BorderBottomWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBottomColor);
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
.pf-v6-c-table__tr {
|
|
818
|
+
border-block-end: var(--pf-v6-c-table__tr--BorderBottomWidth) solid var(--pf-v6-c-table__tr--BorderBottomColor);
|
|
819
|
+
}
|
|
820
|
+
.pf-v6-c-table__thead .pf-v6-c-table__tr {
|
|
821
|
+
border-block-end: 0;
|
|
822
|
+
}
|
|
823
|
+
.pf-v6-c-table__tr.pf-m-border-row {
|
|
761
824
|
border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
762
825
|
}
|
|
763
826
|
|