diff --git a/app/assets/javascripts/discourse/app/widgets/post-menu.js b/app/assets/javascripts/discourse/app/widgets/post-menu.js index 5eaa372b6ec..fcbb4263b89 100644 --- a/app/assets/javascripts/discourse/app/widgets/post-menu.js +++ b/app/assets/javascripts/discourse/app/widgets/post-menu.js @@ -677,7 +677,7 @@ export default createWidget("post-menu", { `.toggle-like[data-post-id="${attrs.id}"] .d-icon` ); heart.closest(".toggle-like").classList.add("has-like"); - heart.classList.add("has-animation"); + heart.classList.add("heart-animation"); return new Promise((resolve) => { later(() => { diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 6e091157fb0..a6baafd79c1 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -274,6 +274,22 @@ $quote-share-maxwidth: 150px; } } +@keyframes heartBump { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.5); + } + 100% { + transform: scale(1); + } +} + +.has-like .d-icon.heart-animation { + animation: heartBump 0.4s; +} + // we use aside to hold expandable quotes (versus, say, static blockquotes) aside.quote { margin-top: 1em; diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index bd2b8e66717..ab3737de0f8 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -1,15 +1,3 @@ -@keyframes heartBump { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.5); - } - 100% { - transform: scale(1); - } -} - .wrap { max-width: $large-width; } @@ -115,9 +103,6 @@ nav.post-controls { // Like button after I've liked .d-icon { color: var(--love); - &.has-animation { - animation: heartBump 0.4s; - } } &.d-hover { background: var(--primary-low);