Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Replace fav icon animation with CSS (#12175)

Browse source 
Fixes #12151
This commit is contained in:
ThibG 2019-10-24 22:47:48 +02:00 • committed by Eugen Rochko
parent 547a5bac9d
commit 3a929dbedd
2 changed files with 96 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

58
app/javascript/styles/mastodon/components.scss
View file

@ -1591,6 +1591,20 @@ a.account__display-name {
color: $gold-star;
}
.no-reduce-motion .icon-button.star-icon {
&.activate {
& > .fa-star {
animation: spring-rotate-in 1s linear;
}
}
&.deactivate {
& > .fa-star {
animation: spring-rotate-out 1s linear;
}
}
}
.notification__display-name {
color: inherit;
font-weight: 500;
@ -3373,6 +3387,50 @@ a.status-card.compact:hover {
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes spring-rotate-in {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(-484.8deg);
}
60% {
transform: rotate(-316.7deg);
}
90% {
transform: rotate(-375deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes spring-rotate-out {
0% {
transform: rotate(-360deg);
}
30% {
transform: rotate(124.8deg);
}
60% {
transform: rotate(-43.27deg);
}
90% {
transform: rotate(15deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes loader-figure {
0% {
width: 0;