From 061ab753430d748044a636cf7c79895152fd1bbe Mon Sep 17 00:00:00 2001 From: Joe Date: Wed, 23 Sep 2020 23:32:19 +0800 Subject: [PATCH] UX: ensures new-topic badge renders consistently MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We previously used the "●" Unicode character for this circle. Using Unicode for this means that it's up to the browser / OS to determine how it renders. This commit changes it to a CSS shape so that we always get the same rendering regardless of the user's browser / OS. --- app/assets/stylesheets/common/components/badges.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss index dc0dab3cd0b..7b8387111b1 100644 --- a/app/assets/stylesheets/common/components/badges.scss +++ b/app/assets/stylesheets/common/components/badges.scss @@ -189,14 +189,15 @@ &.new-topic { background-color: transparent; - color: var(--tertiary-high); - font-weight: normal; - font-size: $font-down-1; } &.new-topic::before { - content: "●"; - margin-right: 2px; + content: ""; + background: var(--tertiary-high); + display: inline-block; + height: 0.4em; + width: 0.4em; + border-radius: 50%; } // Click count