From 666114fef3e1f3c289f5eb4c40d128a55ec99d96 Mon Sep 17 00:00:00 2001
From: Heleen <magned@gmail.com>
Date: Wed, 27 Sep 2023 17:03:04 +0200
Subject: [PATCH] Adds expando row styling options

---
 .../components/table-expando-row.html         | 21 +++++++++++++++++++
 manon/table-expando-rows-variables.scss       |  8 +++++++
 manon/table-expando-rows.scss                 | 11 ++++++++++
 3 files changed, 40 insertions(+)

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 @@ <h2>Instelbare variabelen</h2>
                     <td>Subtitel binnen de openklapbare cel - h2</td>
                     <td>SASS</td>
                   </tr>
+                  <tr>
+                    <td>--expando-rows-row-background-color</td>
+                    <td><a href="../variables.html#background-color">background-color</a></td>
+                    <td>transparent</td>
+                    <td>De openklapbare rij</td>
+                    <td>CSS</td>
+                  </tr>
+                  <tr>
+                    <td>--expando-rows-row-striping-background-color</td>
+                    <td><a href="../variables.html#background-color">background-color</a></td>
+                    <td>var(--table-row-background-color-striping, initial)</td>
+                    <td>De openklapbare rij</td>
+                    <td>CSS</td>
+                  </tr>
+                  <tr>
+                    <td>--expando-rows-row-font-weight</td>
+                    <td><a href="../variables.html#font-weight">font-weight</a></td>
+                    <td>bold</td>
+                    <td>De openklapbare rij</td>
+                    <td>CSS</td>
+                  </tr>
                 </tbody>
               </table>
             </div>
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);
+  }
+}