1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
@use "global-variables" as *;
.ct-table {
&-header {
display: flex;
align-items: center;
flex-wrap: wrap;
> :only-child {
flex: auto;
}
}
&-heading {
// Push buttons to the right by stretching the heading
flex: auto;
// Add a bit of minimum margin to the right of the heading
margin-inline-end: var(--pf-t--global--spacer--md);
// Set a minimum height of 3rem, so when buttons wrap, there's spacing
min-block-size: var(--pf-t--global--spacer--2xl);
// Make sure textual content is aligned to the center
display: flex;
align-items: center;
}
&-actions {
> * {
margin-block: var(--pf-t--global--spacer--xs);
margin-inline: var(--pf-t--global--spacer--sm) 0;
}
> :first-child {
margin-inline-start: 0;
}
}
// https://github.com/patternfly/patternfly-react/issues/5379
&-empty {
[data-label] {
display: revert;
}
[data-label]::before {
display: none;
}
}
// Don't wrap labels
[data-label]::before {
white-space: nowrap;
}
// Fix toggle button alignment
.pf-v6-c-table__toggle {
// Workaround: Chrome sometimes oddly expands the table,
// unless a width is set. (This affects panels the most, but not only.)
// As the width is smaller than the contents, and this is a table,
// the cell will stay at the correct width.
inline-size: 1px;
}
// Properly align actions on the end
> tbody > tr > td:last-child > .btn-group {
display: flex;
justify-content: flex-end;
align-items: center;
}
// Use PF4 style headings
> thead th {
font-size: var(--pf-t--global--font--size--sm);
}
}
// Special handling for rows with errors
.pf-v6-c-table tbody tr:first-child.error {
&, tbody.pf-m-expanded > & {
background-color: var(--ct-color-list-critical-bg) !important; /* keep red background when expanded */
border-block-start: 1px solid var(--ct-color-list-critical-border);
border-block-end: 1px solid var(--ct-color-list-critical-border);
}
}
|
