From c670d2cadd8b3831989d179adf6a9947c06cd458 Mon Sep 17 00:00:00 2001 From: cwm Date: Tue, 26 Dec 2017 14:04:52 -0600 Subject: [PATCH] Reduce motion for boost animation (tootsuite pr #5871) --- .../glitch/styles/components/index.scss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index f8e6ad65f2..b947c082d8 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -556,6 +556,10 @@ white-space: pre-wrap; padding-top: 5px; + &:focus { + outline: 0; + } + &.status__content--with-spoiler { white-space: normal; @@ -2368,7 +2372,7 @@ @import 'boost'; -button.icon-button i.fa-retweet { +.no-reduce-motion button.icon-button i.fa-retweet { background-position: 0 0; height: 19px; transition: background-position 0.9s steps(10); @@ -2381,11 +2385,20 @@ button.icon-button i.fa-retweet { } } -button.icon-button.active i.fa-retweet { +.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: $ui-base-lighter-color; + transition: color 100ms ease-in; +} + +.reduce-motion button.icon-button.active i.fa-retweet { + color: $ui-highlight-color; +} + .status-card { display: flex; cursor: pointer;