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

backport CE style for boards selector fade mask

See merge request gitlab-org/gitlab-ce!15624
This commit is contained in:
Clement Ho 2017-12-05 23:55:28 +00:00
commit 32b18557eb
2 changed files with 30 additions and 1 deletions

View file

@ -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;
}
}

View file

@ -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