Merge branch 'backport-boards-selector-fade-mask' into 'master'

app/assets/stylesheets/framework/dropdowns.scss

@@ -608,7 +608,7 @@
 }
 
 .dropdown-content {
-  max-height: 215px;
+  max-height: $dropdown-max-height;
   overflow-y: auto;
 }
 
@@ -1030,3 +1030,28 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     }
   }
 }
+
+.dropdown-content-faded-mask {
+  position: relative;
+
+  .dropdown-list {
+    max-height: $dropdown-max-height;
+    overflow-y: auto;
+    position: relative;
+  }
+
+  &::after {
+    height: $dropdown-fade-mask-height;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    background: linear-gradient(to top, $white-light 0, rgba($white-light, 0));
+    transition: opacity $fade-mask-transition-duration $fade-mask-transition-curve;
+    content: '';
+    pointer-events: none;
+  }
+
+  &.fade-out::after {
+    opacity: 0;
+  }
+}

app/assets/stylesheets/framework/variables.scss

@@ -337,6 +337,7 @@ $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San
 * Dropdowns
 */
 $dropdown-width: 300px;
+$dropdown-max-height: 215px;
 $dropdown-vertical-offset: 4px;
 $dropdown-link-color: #555;
 $dropdown-link-hover-bg: $row-hover;
@@ -353,6 +354,7 @@ $dropdown-loading-bg: rgba(#fff, .6);
 $dropdown-chevron-size: 10px;
 $dropdown-toggle-active-border-color: darken($border-color, 14%);
 $dropdown-item-hover-bg: $gray-darker;
+$dropdown-fade-mask-height: 32px;
 
 /*
 * Filtered Search
@@ -564,6 +566,8 @@ $label-border-radius: 100px;
 * Animation
 */
 $fade-in-duration: 200ms;
+$fade-mask-transition-duration: .1s;
+$fade-mask-transition-curve: ease-in-out;
 
 /*
 * Lint