From d2c9f39c0bb71acb927b4bb75f7a98d5df733697 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 1 Jun 2021 14:35:49 +0200 Subject: [Glitch] Add assets from Twemoji 13.1.0 Port abd7b4636a4bda2454f1d30e7f87843d0c06dcbe to glitch-soc Signed-off-by: Claire --- .../glitch/styles/components/emoji_picker.scss | 65 ++++++++++++++++++++-- 1 file changed, 59 insertions(+), 6 deletions(-) (limited to 'app/javascript/flavours/glitch/styles/components') diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index dcc551c5b..0089445e1 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -48,6 +48,8 @@ overflow: hidden; transition: color .1s ease-out; cursor: pointer; + background: transparent; + border: 0; &:hover { color: darken($lighter-text-color, 4%); @@ -106,11 +108,13 @@ padding: 10px; padding-right: 45px; background: $simple-background-color; + position: relative; input { font-size: 14px; font-weight: 400; padding: 7px 9px; + padding-right: 25px; font-family: inherit; display: block; width: 100%; @@ -131,6 +135,30 @@ } } +.emoji-mart-search-icon { + position: absolute; + top: 18px; + right: 45px + 5px; + z-index: 2; + padding: 2px 5px 1px; + border: 0; + background: none; + transition: all 100ms linear; + transition-property: opacity; + pointer-events: auto; + opacity: 0.7; + + &:disabled { + cursor: default; + pointer-events: none; + opacity: 0.3; + } + + svg { + fill: $action-button-color; + } +} + .emoji-mart-category .emoji-mart-emoji { cursor: pointer; @@ -169,9 +197,36 @@ } } +/* For screenreaders only, via https://stackoverflow.com/a/19758620 */ +.emoji-mart-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.emoji-mart-category-list { + margin: 0; + padding: 0; +} + +.emoji-mart-category-list li { + list-style: none; + margin: 0; + padding: 0; + display: inline-block; +} + .emoji-mart-emoji { position: relative; display: inline-block; + background: transparent; + border: 0; + padding: 0; font-size: 0; span { @@ -182,19 +237,17 @@ .emoji-mart-no-results { font-size: 14px; + color: $light-text-color; text-align: center; + padding: 5px 6px; padding-top: 70px; - color: $light-text-color; - - .emoji-mart-category-label { - display: none; - } - .emoji-mart-no-results-label { + .emoji-mart-no-results-label { margin-top: .2em; } .emoji-mart-emoji:hover::before { + cursor: default; content: none; } } -- cgit