Parametrize bg animation

indico · Jul 23, 2024 · 3a2365d · 3a2365d
1 parent 17b1e48
commit 3a2365d
Showing 1 changed file with 13 additions and 2 deletions.
diff --git 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%;