Fixed emoji click area and emoji picker tabs

73544b52 · Ariel Fuggini · JC Brand · 5a57ded2 · 73544b52
Commit 73544b52 authored May 26, 2020 by Ariel Fuggini Committed by JC Brand Jun 01, 2020
Hide whitespace changes
Inline Side-by-side

Showing with 15 additions and 4 deletions

sass/_emoji.scss sass/_emoji.scss +15 -4

No files found.
--- a/sass/_emoji.scss
+++ b/sass/_emoji.scss
@@ -76,25 +76,35 @@
                    padding-bottom: 0.5em;
                }
                li {
+                    display: inline-block;
+                    height: calc(var(--font-size-huge) * 1.5);
+                    width: calc(var(--font-size-huge) * 1.5);
+                    overflow: hidden;
                    margin-left: 0;
-                    cursor: pointer;
                    list-style: none;
                    position: relative;
                    &.insert-emoji {
                        margin: 0;
-                        height: 30px;
+                        display: block;
-                        width: 32px;
+                        text-align: center;
                        &.selected a {
                            background-color: var(--highlight-color-darker);
                        }
                        img {
-                            margin-top: 3px;
+                            margin: 0 auto;
                            height: var(--font-size-huge);
                            width: var(--font-size-huge);
+                            display: inline-block;
+                            vertical-align: baseline;
                        }
                        a {
                            padding: 3px;
+                            display: inline-block;
                            font-size: var(--font-size-huge);
+                            line-height: calc(var(--font-size-huge) * 1.5);
+                            height: calc(var(--font-size-huge) * 1.5);
+                            width: calc(var(--font-size-huge) * 1.5);
+                            overflow: hidden;
                            &:hover {
                                background-color: var(--highlight-color-darker);
                            }
@@ -131,6 +141,7 @@
                        }
                        a {
                            padding: 0.25em;
+                            display: inline-block;
                        }
                        img {
                            height: var(--font-size-huge);