Fleet UI: Scroll shadows (#8914)

frontend/components/TableContainer/DataTable/_styles.scss

@@ -1,3 +1,6 @@
+$shadow-width: 40px;
+$shadow-transition-width: 10px;
+
 .data-table-block {
   position: relative;
   display: inline-block;
@@ -9,9 +12,30 @@
       border: 1px solid $ui-fleet-blue-15;
       border-radius: 6px;
       margin-top: $pad-small;
-      box-shadow: inset -8px 0 17px -10px #e8edf4;
       flex-grow: 1;
       width: 100%;
+
+      // Shadow
+      background-image: 
+      /* Shadows */ linear-gradient(
+          to right,
+          white,
+          $transparent
+        ),
+        linear-gradient(to left, white, $transparent),
+        /* Shadow covers */
+          linear-gradient(to right, $ui-shadow, white $shadow-transition-width),
+        linear-gradient(to left, $ui-shadow, white $shadow-transition-width);
+
+      background-position: left center, right center, left center, right center;
+      background-repeat: no-repeat;
+      background-color: white;
+      background-size: $shadow-width 100%, $shadow-width 100%, 50% 100%,
+        50% 100%;
+
+      /* Opera doesn't support this in the shorthand */
+      background-attachment: local, local, scroll, scroll;
+      // End shadow
     }
 
     &__table {
@@ -30,6 +54,15 @@
       .component__tooltip-wrapper__element {
         white-space: initial; // wraps long text with tooltip
       }
+
+      tr:hover {
+        background-color: $ui-off-white-opaque; // opaque needed for horizontal scroll shadow
+      }
+
+      .single-row:hover {
+        cursor: pointer;
+        background-color: $ui-vibrant-blue-10-opaque; // opaque needed for horizontal scroll shadow
+      }
     }
 
     tr {
@@ -39,14 +72,6 @@
         border-bottom: 0;
       }
 
-      &.single-row {
-        cursor: pointer;
-
-        &:hover {
-          background-color: rgba($core-vibrant-blue, 0.1);
-        }
-      }
-
       // override styles of checkbox data cells
       .form-field--checkbox {
         display: flex;
@@ -60,7 +85,7 @@
     }
 
     thead {
-      background-color: $ui-off-white;
+      background-color: $ui-off-white-opaque; // opaque needed for horizontal scroll shadow
       color: $core-fleet-black;
       text-align: left;
       border-bottom: 1px solid $ui-fleet-blue-15;
@@ -194,9 +219,7 @@
           font-style: italic;
         }
       }
-      tr:hover {
-        background-color: $ui-off-white;
-      }
+
       .disable-highlight:hover {
         background-color: initial;
       }