From f40fe82c4ed04960e0a899019977ac16d8ad9d2a Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 2 Jun 2020 19:15:06 -0500 Subject: [PATCH] Refactor boost icon, match theme color --- app/styles/boost.scss | 47 +++++++++++++++++++++++++++++++++----- app/styles/components.scss | 32 ++------------------------ 2 files changed, 43 insertions(+), 36 deletions(-) diff --git a/app/styles/boost.scss b/app/styles/boost.scss index a26292c35..30365ea1c 100644 --- a/app/styles/boost.scss +++ b/app/styles/boost.scss @@ -1,11 +1,46 @@ -button.icon-button i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); +button.icon-button { + i.fa-retweet { + background: rgba(var(--primary-text-color-rgb), 0.4); + mask: url("data:image/svg+xml;utf8,"); + } - &:hover { - background-image: url("data:image/svg+xml;utf8,"); + &:hover, + &:active, + &:focus { + i.fa-retweet { + background: rgba(var(--primary-text-color-rgb), 0.6); + transition: background-color 200ms ease-out; + } + } + + &.disabled i.fa-retweet { + background: rgba(var(--primary-text-color-rgb), 0.2); + cursor: default; + } + + &.active i.fa-retweet { + background: var(--highlight-text-color); } } -button.icon-button.disabled i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); +.no-reduce-motion button.icon-button i.fa-retweet { + mask-position: 0 0; + height: 19px; + transition: mask-position 0.9s steps(10); + transition-duration: 0s; + vertical-align: middle; + width: 22px; + + &::before { + display: none !important; + } +} + +.no-reduce-motion button.icon-button.active i.fa-retweet { + transition-duration: 0.9s; + mask-position: 0 100%; +} + +.reduce-motion button.icon-button i.fa-retweet { + transition: background-color 100ms ease-in; } diff --git a/app/styles/components.scss b/app/styles/components.scss index 8b6b0a1e8..8a9b28696 100644 --- a/app/styles/components.scss +++ b/app/styles/components.scss @@ -134,12 +134,12 @@ &:hover, &:active, &:focus { - color: lighten(#0482d8, 7%); + color: rgba(var(--primary-text-color-rgb), 0.6); transition: color 200ms ease-out; } &.disabled { - color: darken(#0482d8, 13%); + color: rgba(var(--primary-text-color-rgb), 0.2); cursor: default; } @@ -2079,34 +2079,6 @@ a.account__display-name { } } -.no-reduce-motion button.icon-button i.fa-retweet { - background-position: 0 0; - height: 19px; - transition: background-position 0.9s steps(10); - transition-duration: 0s; - vertical-align: middle; - width: 22px; - - &::before { - display: none !important; - } - -} - -.no-reduce-motion button.icon-button.active i.fa-retweet { - transition-duration: 0.9s; - background-position: 0 100%; -} - -.reduce-motion button.icon-button i.fa-retweet { - color: #0482d8; - transition: color 100ms ease-in; -} - -.reduce-motion button.icon-button.active i.fa-retweet { - color: var(--highlight-text-color); -} - .status-card { display: flex; font-size: 14px;