backport CE style for boards selector fade mask

1 files changed, 26 insertions, 1 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 30d5d7a653b..8d83554d813 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/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;
+  }
+}