diff options
| author | Luke "Jared" Bennett <lbennett@gitlab.com> | 2017-12-06 02:55:28 +0300 |
|---|---|---|
| committer | Clement Ho <clemmakesapps@gmail.com> | 2017-12-06 02:55:28 +0300 |
| commit | d1e807d8e962860b11992914ae2b40786699edbe (patch) | |
| tree | 25b99b0b018492266a5c7391ca44933b7f1fc9b6 | |
| parent | 4475212a100d6546f8e1ef667c4af82c541a4c19 (diff) | |
backport CE style for boards selector fade mask
| -rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 27 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 4 |
2 files changed, 30 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; + } +} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index cb2a237f574..6525b39d55c 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/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 |