@import "global-variables"; .ct-table { &.pf-m-compact { > thead, > tbody { > tr:not(.pf-v5-c-table__expandable-row) { // We actually want the normal font size for our lists --pf-v5-c-table-cell--FontSize: var(--pf-v5-global--FontSize--md); } } } &-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-v5-global--spacer--md); // Set a minimum height of 3rem, so when buttons wrap, there's spacing min-block-size: var(--pf-v5-global--spacer--2xl); // Make sure textual content is aligned to the center display: flex; align-items: center; } &-actions { > * { margin-block: var(--pf-v5-global--spacer--xs); margin-inline: var(--pf-v5-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-v5-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-v5-global--FontSize--sm); font-weight: var(--pf-v5-global--FontWeight--bold); } // Adjust the padding for nested ct-tables in ct-tables // FIXME: https://github.com/patternfly/patternfly/issues/4280 .ct-table { td, th { &:first-child { --pf-v5-c-table--nested--first-last-child--PaddingLeft: var(--pf-v5-global--spacer--lg); } &:last-child { --pf-v5-c-table--nested--first-last-child--PaddingRight: var(--pf-v5-global--spacer--lg); } } } } // Special handling for rows with errors .pf-v5-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); } }