feat: Improve visual affordance of horizontally scrolling tables

studio24 · Jan 30, 2024 · 54ff92f · 54ff92f
1 parent 7b0ef21
commit 54ff92f
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 1 deletion.
diff --git a/assets-src/styles/sass/30-base/_animation.scss b/assets-src/styles/sass/30-base/_animation.scss
@@ -1,5 +1,7 @@
 /*------------------------------------*\
     #Animation
+
+    'scroll-shadow-inset' improves visual affordance of horizontally scrolling tables
 \*------------------------------------*/
 
 /*
@@ -18,4 +20,16 @@
         transition-duration: 0.001ms !important;
         transition-delay: 0s !important;
     }
+}
+
+@keyframes scroll-shadow-inset {
+    /* start with inset shadow on right */
+    from {
+        box-shadow: inset -10px -10px 15px 0px rgb(0 0 0 / 0.3);
+    }
+
+    /* end with inset shadow on left */
+    to {
+        box-shadow: inset 10px -10px 15px 0px rgb(0 0 0 / 0.3);
+    }
 }
diff --git a/assets-src/styles/sass/30-base/_tables.scss b/assets-src/styles/sass/30-base/_tables.scss
@@ -1,5 +1,7 @@
 /*------------------------------------*\
     #Tables
+
+    1. See https://daverupert.com/2023/08/animation-timeline-scroll-shadows/
 \*------------------------------------*/
 
 table {
@@ -55,6 +57,8 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
         max-inline-size: 100% !important;
 
         &[role][aria-labelledby][tabindex] {
+            animation: scroll-shadow-inset linear; /* 1 */
+            animation-timeline: scroll( self inline ); /* 1 */
             overflow: auto;
         }
 

diff --git a/web/dist/styles/core.css b/web/dist/styles/core.css
@@ -942,6 +942,8 @@ blockquote cite {
 
 /*------------------------------------*\
     #Tables
+
+    1. See https://daverupert.com/2023/08/animation-timeline-scroll-shadows/
 \*------------------------------------*/
 table {
   border: 1px solid #c6c6c6;
@@ -992,6 +994,9 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
     max-inline-size: 100% !important;
   }
   [data-component=table-wrap][role][aria-labelledby][tabindex] {
+    -webkit-animation: scroll-shadow-inset linear;
+            animation: scroll-shadow-inset linear; /* 1 */
+    animation-timeline: scroll(self inline); /* 1 */
     overflow: auto;
   }
   [data-component=table-wrap] table {
@@ -1004,6 +1009,8 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
 }
 /*------------------------------------*\
     #Animation
+
+    'scroll-shadow-inset' improves visual affordance of horizontally scrolling tables
 \*------------------------------------*/
 /*
  * Respect the choices of users who do not want animations.
@@ -1024,6 +1031,26 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
     transition-delay: 0s !important;
   }
 }
+@-webkit-keyframes scroll-shadow-inset {
+  /* start with inset shadow on right */
+  from {
+    box-shadow: inset -10px -10px 15px 0px rgba(0, 0, 0, 0.3);
+  }
+  /* end with inset shadow on left */
+  to {
+    box-shadow: inset 10px -10px 15px 0px rgba(0, 0, 0, 0.3);
+  }
+}
+@keyframes scroll-shadow-inset {
+  /* start with inset shadow on right */
+  from {
+    box-shadow: inset -10px -10px 15px 0px rgba(0, 0, 0, 0.3);
+  }
+  /* end with inset shadow on left */
+  to {
+    box-shadow: inset 10px -10px 15px 0px rgba(0, 0, 0, 0.3);
+  }
+}
 /*------------------------------------*\
     #Global focus styles incorporating a reset for :focus-visible
 

diff --git a/web/dist/styles/core.min.css b/web/dist/styles/core.min.css