From e7c0d87d984108a5c56c08285e8496a23fca28b8 Mon Sep 17 00:00:00 2001 From: Shin Kojima Date: Thu, 6 Jul 2017 22:27:02 +0900 Subject: [PATCH] Fix embedded SVG fill attribute (#4086) * Fix embedded SVG fill attribute SCSS darken/lighten functions may not return a color value, but a color name like "white". See following example: https://www.sassmeister.com/gist/c41da93b87d536890ddf30a1f42e7816 This patch will normalize $color argument to FFFFFF style. I also changed the function name from "url-friendly-colour" to "hex-color", Because... 1. The name "url-friendly" is not meaningful enough to describe what it does. 2. It is familier to me using "color" rather than "colour" kojima:kojiMac mastodon[master]$ git grep -l colour app/javascript/styles/boost.scss spec/fixtures/files/attachment.jpg kojima:kojiMac mastodon[master]$ git grep -l color .rspec .scss-lint.yml Gemfile.lock app/javascript/mastodon/features/status/components/action_bar.js app/javascript/styles/about.scss app/javascript/styles/accounts.scss app/javascript/styles/admin.scss app/javascript/styles/basics.scss app/javascript/styles/boost.scss app/javascript/styles/compact_header.scss app/javascript/styles/components.scss app/javascript/styles/containers.scss app/javascript/styles/footer.scss app/javascript/styles/forms.scss app/javascript/styles/landing_strip.scss app/javascript/styles/reset.scss app/javascript/styles/stream_entries.scss app/javascript/styles/tables.scss app/javascript/styles/variables.scss app/views/admin/subscriptions/_subscription.html.haml app/views/layouts/application.html.haml app/views/layouts/error.html.haml app/views/manifests/show.json.rabl bin/webpack-dev-server config/initializers/httplog.rb public/500.html public/emoji/1f1e6-1f1e8.svg public/emoji/1f1ec-1f1f8.svg public/emoji/1f1f3-1f1ee.svg public/emoji/1f1fb-1f1ec.svg spec/fixtures/requests/idn.txt yarn.lock * Add semicolon --- app/javascript/styles/boost.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/javascript/styles/boost.scss b/app/javascript/styles/boost.scss index 7589828c6..8d6478e10 100644 --- a/app/javascript/styles/boost.scss +++ b/app/javascript/styles/boost.scss @@ -1,11 +1,14 @@ -@function url-friendly-colour($colour) { - @return '%23' + str-slice('#{$colour}', 2, -1) +@function hex-color($color) { + @if type-of($color) == 'color' { + $color: str-slice(ie-hex-str($color), 4); + } + @return '%23' + unquote($color) } button.icon-button i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } }