diff --git a/docs/documentation/components/table-expando-row.html b/docs/documentation/components/table-expando-row.html index 637d45b8..5db0a395 100644 --- a/docs/documentation/components/table-expando-row.html +++ b/docs/documentation/components/table-expando-row.html @@ -367,6 +367,27 @@

Instelbare variabelen

Subtitel binnen de openklapbare cel - h2 SASS + + --expando-rows-row-background-color + background-color + transparent + De openklapbare rij + CSS + + + --expando-rows-row-striping-background-color + background-color + var(--table-row-background-color-striping, initial) + De openklapbare rij + CSS + + + --expando-rows-row-font-weight + font-weight + bold + De openklapbare rij + CSS + diff --git a/manon/table-expando-rows-variables.scss b/manon/table-expando-rows-variables.scss index f0240fb3..dc19316e 100644 --- a/manon/table-expando-rows-variables.scss +++ b/manon/table-expando-rows-variables.scss @@ -16,4 +16,12 @@ /* After breakpoint */ --expando-rows-table-cell-after-breakpoint-padding: 2rem 3rem; + + /* Parent row styling when their content is expanded */ + --expando-rows-row-background-color: transparent; + --expando-rows-row-striping-background-color: var( + --table-row-background-color-striping, + initial + ); + --expando-rows-row-font-weight: bold; } diff --git a/manon/table-expando-rows.scss b/manon/table-expando-rows.scss index d021e52c..9a4dbcf8 100644 --- a/manon/table-expando-rows.scss +++ b/manon/table-expando-rows.scss @@ -43,3 +43,14 @@ table { } } } + +.expanded-row { + background-color: var(--expando-rows-row-background-color); + font-weight: var(--expando-rows-row-font-weight); + + /* Zebra striping with opacity to keep background color. e.g for warnings or errors */ + &:nth-child(even):not(.odd), + &:nth-child(odd).even { + background-color: var(--expando-rows-row-striping-background-color); + } +}