Tables: Add scroll indicator

Adds a visual scroll indicator (shadow) to indicate there is
more content available

Changelog: changed

app/assets/javascripts/glql/components/presenters/table.vue

@@ -59,7 +59,7 @@ export default {
 };
 </script>
 <template>
-  <div class="!gl-my-4">
+  <div class="gl-table-shadow !gl-my-4">
     <table ref="table" class="!gl-mb-2 !gl-mt-0 gl-overflow-y-hidden">
       <thead>
         <tr v-if="table">

app/assets/stylesheets/framework/tables.scss

@@ -41,12 +41,12 @@ table {
       }
 
     }
-    
+
     thead tr {
       th {
-        @apply gl-bg-subtle;
+        @apply gl-bg-strong;
         border-bottom: 0;
-  
+
         &.wide {
           width: 55%;
         }

app/assets/stylesheets/framework/typography.scss

@@ -175,6 +175,44 @@
     margin: 10px 0;
   }
 
+  @keyframes gl-table-shadow {
+    0% {
+      box-shadow:
+        inset -16px 0 14px -14px var(--gl-shadow-color-default),
+        inset 0 0 0 0 var(--gl-shadow-color-default);
+    }
+
+    5% {
+      box-shadow:
+        inset -16px 0 14px -14px var(--gl-shadow-color-default),
+        inset 16px 0 14px -14px var(--gl-shadow-color-default);
+    }
+
+    95% {
+      box-shadow:
+        inset -16px 0 14px -14px var(--gl-shadow-color-default),
+        inset 16px 0 14px -14px var(--gl-shadow-color-default);
+    }
+
+    100% {
+      box-shadow:
+          inset 0 0 0 0 var(--gl-shadow-color-default),
+          inset 16px 0 14px -14px var(--gl-shadow-color-default);
+    }
+  }
+
+  .gl-table-shadow {
+    overflow-x: auto;
+    animation: gl-table-shadow $gl-easing-out-cubic;
+    animation-timeline: scroll(self inline);
+
+    table:not(.code) {
+      display: table;
+      overflow-x: initial;
+      mix-blend-mode: multiply;
+    }
+  }
+
   table:not(.code) {
     margin: 16px 0;
     @apply gl-text-default;
@@ -184,8 +222,7 @@
     overflow-x: auto;
 
     tbody {
-      background-color: $white;
-
+      @apply gl-bg-default;
     }
 
     td,
@@ -195,7 +232,7 @@
 
     tr {
       th {
-        border-bottom: solid 2px $gray-200;
+        @apply gl-border-b;
       }
     }
 
@@ -523,7 +560,7 @@
   h5,
   h6 {
     $anchor-offset: 20px;
-    
+
     a.anchor {
       float: left;
       margin-left: calc(-1 * $anchor-offset);