kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/assets/stylesheets/framework/dropdowns.scss
View file

@ -608,7 +608,7 @@
} }
.dropdown-content { .dropdown-content {
max-height: 215px; max-height: $dropdown-max-height;
overflow-y: auto; 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;
}
}

4
app/assets/stylesheets/framework/variables.scss
View file

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