diff options
| author | Henry Jameson <me@hjkos.com> | 2019-09-15 01:16:54 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2019-09-15 01:16:54 +0300 |
| commit | f0cb6fe03faa1994fb667255d4051fe611b2afbc (patch) | |
| tree | 76de3641b1cc738b433e59df94888c88c6522e06 /src/components/emoji_picker/emoji_picker.scss | |
| parent | 3505e53756562b4d7b304d0da9910c4528b25959 (diff) | |
Fixed scrollability not being obvious, added fade effect
Diffstat (limited to 'src/components/emoji_picker/emoji_picker.scss')
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.scss | 18 |
1 files changed, 17 insertions, 1 deletions
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 472db35b..8c07fd27 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -6,7 +6,7 @@ position: absolute; right: 0; left: 0; - height: 300px; + height: 320px; margin: 0 !important; z-index: 1; @@ -104,6 +104,22 @@ flex: 1 1 1px; position: relative; overflow: auto; + mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, + linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, + linear-gradient(to top, white, white); + transition: mask-size 150ms; + mask-size: 100% 20px, 100% 20px, auto; + // Autoprefixed seem to ignore this one, and also syntax is different + -webkit-mask-composite: xor; + mask-composite: exclude; + &.scrolled { + &-top { + mask-size: 100% 20px, 100% 0, auto; + } + &-bottom { + mask-size: 100% 0, 100% 20px, auto; + } + } } &-group { |