diff --git a/elements/rh-table/rh-table-lightdom.css b/elements/rh-table/rh-table-lightdom.css index 4a2947c565..ea1236f511 100644 --- a/elements/rh-table/rh-table-lightdom.css +++ b/elements/rh-table/rh-table-lightdom.css @@ -1,4 +1,6 @@ rh-table { + container: host / inline-size; + --_row-border: var(--rh-table-row-border, var(--rh-border-width-sm, 1px) @@ -12,17 +14,16 @@ rh-table { var(--rh-table-column-background-hover-color, rgb(var(--rh-color-blue-50-rgb, 0 102 204) / var(--rh-opacity-10, 10%))); - - container: host / inline-size; - & thead { + & thead { & th { position: relative; padding-block: var(--rh-space-lg, 16px); text-align: start; font-weight: var(--rh-font-weight-heading-bold, 700); } - } + } + & table { min-width: 100%; margin: 0 auto; @@ -30,29 +31,35 @@ rh-table { border: 0; border-collapse: collapse; } + & :is(tr, col) { transition: background 0.3s ease-out; } + & :is(th, td) { padding-inline: var(--rh-space-lg, 16px); } + & :is(col.active) { background: var(--_column-background-hover-color); - } + } + & tr { border-block-end: var(--_row-border); &:hover { background: var(--_row-background-hover-color); } + & > * { border: none; } } + & td { - padding-block-start: var(--rh-space-xl, 24px); - padding-block-end: var(--rh-space-xl, 24px); + padding-block: var(--rh-space-xl, 24px); } + & a { color: var(--rh-color-interactive-primary-default-on-light, #0066cc); text-decoration: none; @@ -62,6 +69,7 @@ rh-table { text-decoration: underline; } } + & caption { font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-lg, 1.125rem); @@ -77,13 +85,21 @@ rh-table { table { display: grid; + & *:not(thead) + tbody { + & tr { + display: grid; + grid-auto-columns: auto; + grid-auto-flow: column; + } + } + & thead { display: none; visibility: hidden; - + & ~ tbody { display: block; - + & tr { border: none; display: grid; @@ -91,38 +107,37 @@ rh-table { height: auto; grid-auto-columns: max-content; grid-auto-flow: unset; - + &:first-child { border-block-start: var(--_row-border); - + & td:first-child { padding-block-start: var(--rh-space-lg, 16px); } - + & td:last-child { padding-block-end: var(--rh-space-lg, 16px); } } - + &:nth-child(even) { background: var(--_row-background-hover-color); } - + &:last-child { border-block-end: var(--_row-border); } - + &:hover { background: var(---_column-background-hover-color); } - + & > * { padding: var(--rh-space-lg, 16px); } - + & :is(th, td) { - padding-block-start: calc(var(--rh-space-md, 8px) + var(--rh-space-xs, 4px)); - padding-block-end: calc(var(--rh-space-md, 8px) + var(--rh-space-xs, 4px)); + padding-block: calc(var(--rh-space-md, 8px) + var(--rh-space-xs, 4px)); display: grid; grid-column-gap: var(--rh-space-lg, 16px); grid-template-columns: 1fr minmax(0, 1.5fr); @@ -131,27 +146,19 @@ rh-table { word-wrap: break-word; text-align: start; } - + & :is(td,th):before { font-weight: var(--rh-font-weight-heading-bold, 700); text-align: start; content: attr(data-label); display: inline-block; } - + & th { text-align: center; } } } } - - & *:not(thead) + tbody { - & tr { - display: grid; - grid-auto-columns: auto; - grid-auto-flow: column; - } - } } } diff --git a/elements/rh-table/rh-table.css b/elements/rh-table/rh-table.css index 7deb8d9976..7b2bc93b9b 100644 --- a/elements/rh-table/rh-table.css +++ b/elements/rh-table/rh-table.css @@ -10,7 +10,7 @@ scrollbar-color: var(--_scrollbar-track-color) var(--_scrollbar-thumb-color); color: var(--rh-color-text-primary); background-color: var(--rh-color-surface); - + --_scrollbar-size: calc(10 / 16 * 1rem); --_scrollbar-thumb-color: var(--rh-color-gray-50, #707070); --_scrollbar-track-color: var(--rh-color-border-subtle);