Merge pull request #1832 from Kajabi/DSS-485/dropdown-scrolling-indic…

…ator

fix(dropdown): add visual indicator when dropdown is scrollable

packages/sage-assets/lib/stylesheets/components/_dropdown.scss

@@ -272,6 +272,40 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
   width: auto;
   max-height: $-dropdown-panel-max-height;
   padding: sage-spacing(xs) 0;
+  border-radius: sage-border(radius-medium);
+
+  // adds a box shadow to the menu when it is scrollable
+  overflow-scrolling: touch;
+  background:
+    /* Shadow Cover TOP */
+    linear-gradient(
+      white 30%,
+      rgba(255, 255, 255, 0)
+    ) center top,
+
+    /* Shadow Cover BOTTOM */
+    linear-gradient(
+      rgba(255, 255, 255, 0), 
+      white 70%
+    ) center bottom,
+
+    /* Shadow TOP */
+    radial-gradient(
+      farthest-side at 50% 0,
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0)
+    ) center top,
+
+    /* Shadow BOTTOM */
+    radial-gradient(
+      farthest-side at 50% 100%,
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0)
+    ) center bottom;
+
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
 
   :not(.sage-dropdown--anchor-right) > .sage-dropdown__panel & {
     left: 0;