From 4a146a0d189280dbd15098f42850ca550e0d7910 Mon Sep 17 00:00:00 2001 From: blackle Date: Mon, 23 Jan 2017 21:02:13 -0500 Subject: [PATCH] Make boost animation an SVG that uses SCSS colours --- app/assets/stylesheets/boost.scss | 9 +++++++++ app/assets/stylesheets/components.scss | 7 ++++--- 2 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 app/assets/stylesheets/boost.scss diff --git a/app/assets/stylesheets/boost.scss b/app/assets/stylesheets/boost.scss new file mode 100644 index 000000000..c45d4ff8e --- /dev/null +++ b/app/assets/stylesheets/boost.scss @@ -0,0 +1,9 @@ +@import 'variables'; + +@function url-friendly-colour($colour) { + @return '%23' + str-slice('#{$colour}', 2, -1) +} + +button i.fa-retweet { +background-image: url("data:image/svg+xml;utf8,"); +} \ No newline at end of file diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 73d1acccd..e1710580c 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -663,12 +663,13 @@ } } +@import 'boost'; + button i.fa-retweet { height: 19px; width: 22px; - background: image-url('boost_sprite.png') no-repeat; background-position: 0 0; - transition: background-position 0.9s steps(11); + transition: background-position 0.9s steps(10); transition-duration: 0s; &::before { @@ -678,7 +679,7 @@ button i.fa-retweet { button.active i.fa-retweet { transition-duration: 0.9s; - background-position: 0 -209px; + background-position: 0 100%; } .status-card {