Adds expando row styling options

minvws · Sep 27, 2023 · 666114f · 666114f
1 parent 790ac8b
commit 666114f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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);
+  }
+}