mirror of https://github.com/tootsuite/mastodon
Reduce motion for boost animation (#5871)
* Reduce motion for boost animation Fixes #5833 * Fix ternary expressionpull/6098/head
parent
35fdf561be
commit
a8eb0bf44f
|
@ -2149,7 +2149,8 @@
|
|||
|
||||
@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);
|
||||
|
@ -2160,13 +2161,23 @@ button.icon-button i.fa-retweet {
|
|||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
@ -28,6 +28,7 @@
|
|||
|
||||
- body_classes ||= @body_classes || ''
|
||||
- body_classes += ' system-font' if current_account&.user&.setting_system_font_ui
|
||||
- body_classes += current_account&.user&.setting_reduce_motion ? ' reduce-motion' : ' no-reduce-motion'
|
||||
|
||||
%body{ class: add_rtl_body_class(body_classes) }
|
||||
= content_for?(:content) ? yield(:content) : yield
|
||||
|
|
Loading…
Reference in New Issue