From d1faa6d12980f407d5d72eadb2de86e244f52b18 Mon Sep 17 00:00:00 2001 From: Julia Miocene <jmiocene@gitlab.com> Date: Fri, 16 Feb 2024 13:58:53 +0100 Subject: [PATCH] Fix emoji picker Remove bounce effect on emojis hover. Changelog: changed --- app/assets/javascripts/emoji/components/category.vue | 6 ++---- app/assets/stylesheets/framework/emojis.scss | 8 ++------ 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/emoji/components/category.vue b/app/assets/javascripts/emoji/components/category.vue index eefb487b79beebb4..f9770733bcee2ed8 100644 --- a/app/assets/javascripts/emoji/components/category.vue +++ b/app/assets/javascripts/emoji/components/category.vue @@ -42,10 +42,8 @@ export default { </script> <template> - <gl-intersection-observer class="gl-px-5 gl-h-full" @appear="categoryAppeared"> - <div - class="gl-top-0 gl-py-3 gl-w-full gl-z-index-1 gl-font-sm gl-ml-n2 emoji-picker-category-header" - > + <gl-intersection-observer class="gl-px-4 gl-h-full" @appear="categoryAppeared"> + <div class="gl-top-0 gl-py-3 gl-w-full gl-z-index-1 gl-font-sm emoji-picker-category-header"> <b>{{ categoryTitle }}</b> </div> <template v-if="emojis.length"> diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss index 39b60aa3fae125ce..cfdf17f00db37598 100644 --- a/app/assets/stylesheets/framework/emojis.scss +++ b/app/assets/stylesheets/framework/emojis.scss @@ -34,14 +34,10 @@ gl-emoji { height: 30px; // Create a width that fits 9 emojis per row width: 100 / 9 * 1%; - transition: transform 0.15s cubic-bezier(0.3, 0, 0.2, 2) !important; - transform: scale(1) !important; mix-blend-mode: normal !important; - &:hover, - &:focus { - z-index: 2; - transform: scale(1.3) !important; + gl-emoji { + font-size: 1.2rem !important; } gl-emoji img { -- GitLab