From 3a2365d0714fb214707dbf2f0c21e6bae6d04cf5 Mon Sep 17 00:00:00 2001
From: Tomas Roun <tomas.roun@cern.ch>
Date: Thu, 13 Jun 2024 17:04:29 +0200
Subject: [PATCH] Parametrize bg animation

---
 src/Components/Tailwind/Table.module.scss | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/Components/Tailwind/Table.module.scss b/src/Components/Tailwind/Table.module.scss
index 0720ee4..98f1c8b 100644
--- a/src/Components/Tailwind/Table.module.scss
+++ b/src/Components/Tailwind/Table.module.scss
@@ -1,3 +1,8 @@
+.animated {
+  // Should be in sync with `ROW_HEIGHT_PX` in Table.tsx
+  --row-height-px: 56px;
+}
+
 :global(html.dark) .animated {
   background: repeating-linear-gradient(
       90deg,
@@ -7,7 +12,10 @@
       rgba(55, 65, 81, 0.5),
       rgba(18, 24, 33, 0.5)
     ),
-    repeating-linear-gradient(rgb(31, 41, 55) 0 56px, rgb(55, 65, 81) 0 112px);
+    repeating-linear-gradient(
+      rgb(31, 41, 55) 0 var(--row-height-px),
+      rgb(55, 65, 81) 0 calc(2 * var(--row-height-px))
+    );
 
   background-repeat: repeat-x;
   background-size: 400% 100%;
@@ -23,7 +31,10 @@
       rgba(243, 244, 246, 0.5),
       rgba(200, 204, 213, 0.5)
     ),
-    repeating-linear-gradient(rgb(229, 231, 235) 0 56px, rgb(243, 244, 246) 0 112px);
+    repeating-linear-gradient(
+      rgb(229, 231, 235) 0 var(--row-height-px),
+      rgb(243, 244, 246) 0 calc(2 * var(--row-height-px))
+    );
 
   background-repeat: repeat-x;
   background-size: 400% 100%;