From abd7b4636a4bda2454f1d30e7f87843d0c06dcbe Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 1 Jun 2021 14:35:49 +0200 Subject: Add assets from Twemoji 13.1.0 (#16345) * Add assets from Twemoji 13.1.0 * Update emoji-mart --- app/javascript/styles/mastodon/emoji_picker.scss | 65 +++++++++++++++++++++--- 1 file changed, 59 insertions(+), 6 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 4bfd66504..adddd4533 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/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 From be8079f63783691dd9fdec3f79b744a5bfdb2b0f Mon Sep 17 00:00:00 2001 From: Claire Date: Tue, 1 Jun 2021 23:47:27 +0200 Subject: Fix deprecated slash as division in SASS files (#16347) Fixes #16293 --- app/javascript/styles/mastodon/widgets.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index f76ff18b3..4e03868a6 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + .hero-widget { margin-bottom: 10px; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); @@ -498,10 +500,10 @@ $fluid-breakpoint: $maximum-width + 20px; } &__item { - width: (960px - 20px) / 3; + width: math.div(960px - 20px, 3); @media screen and (max-width: $fluid-breakpoint) { - width: (940px - 20px) / 3; + width: math.div(940px - 20px, 3); } @media screen and (max-width: 640px) { -- cgit