{"action":"opened","issue":{"url":"https://api.github.com/repos/uikit/uikit/issues/2830","repository_url":"https://api.github.com/repos/uikit/uikit","labels_url":"https://api.github.com/repos/uikit/uikit/issues/2830/labels{/name}","comments_url":"https://api.github.com/repos/uikit/uikit/issues/2830/comments","events_url":"https://api.github.com/repos/uikit/uikit/issues/2830/events","html_url":"https://github.com/uikit/uikit/issues/2830","id":248654526,"number":2830,"title":"Issue with svg-fill mixin","user":{"login":"Lumelomser","id":30808076,"avatar_url":"https://avatars1.githubusercontent.com/u/30808076?v=4","gravatar_id":"","url":"https://api.github.com/users/Lumelomser","html_url":"https://github.com/Lumelomser","followers_url":"https://api.github.com/users/Lumelomser/followers","following_url":"https://api.github.com/users/Lumelomser/following{/other_user}","gists_url":"https://api.github.com/users/Lumelomser/gists{/gist_id}","starred_url":"https://api.github.com/users/Lumelomser/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Lumelomser/subscriptions","organizations_url":"https://api.github.com/users/Lumelomser/orgs","repos_url":"https://api.github.com/users/Lumelomser/repos","events_url":"https://api.github.com/users/Lumelomser/events{/privacy}","received_events_url":"https://api.github.com/users/Lumelomser/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-08-08T09:29:26Z","updated_at":"2017-08-08T09:29:26Z","closed_at":null,"body":"### UIkit version\r\n3.0.0-beta.28\r\n\r\n### Browser\r\nMicrosoft Edge (40.15063.0.0, EdgeHTML 15.15063)\r\n\r\n### Steps to reproduce\r\nPass a HSL or HSLA string as $color-new param to the svg-fill mixin.\r\n\r\n### What is Expected?\r\nA valid encoded base64 string is returned as background image.\r\n\r\n### What is actually happening?\r\nNo background image is visible in Microsoft Edge (Windows 10) because some characters of the HSL or HSLA string aren't replaced.\r\nThis may also happend in older Browser versions with RGB or RGBA values.\r\n\r\nWorks fine on macOS (10.12.6):\r\nApple Safari (10.1.2)\r\nGoogle Chrome (60.0)\r\nMozilla Firefox (54.0.1)\r\n\r\nWorks fine on Windows 10:\r\nGoogle Chrome (60.0)\r\nMozilla Firefox (54.0.1)\r\n\r\n### Possible fix\r\n```\r\n@mixin svg-fill($src, $color-default, $color-new) {\r\n\r\n    $color-new: quote($color-new);\r\n    $color-new: str-replace($color-new, \" \", \"\"); // Replace spaces\r\n    $color-new: str-replace($color-new, \"%\", \"%25\"); // Replace \"%\" of HSL/HSLA color values\r\n    $color-new: str-replace($color-new, \",\", \"%2C\"); // Replace commas\r\n    $color-new: str-replace($color-new, \"(\", \"%28\"); // Replace opening parentheses\r\n    $color-new: str-replace($color-new, \")\", \"%29\"); // Replace closing parentheses\r\n    $color-new: unquote($color-new);\r\n\r\n    $replace-src: str-replace($src, $color-default, $color-new) !default;\r\n    $replace-src: str-replace($replace-src, \"#\", \"%23\");\r\n    background-image: url(quote($replace-src));\r\n\r\n}\r\n```\r\n\r\n### Example calls\r\n`@include svg-fill($internal-accordion-close-image, \"#000\", \"#00ff00\");`\r\n`@include svg-fill($internal-accordion-close-image, \"#000\", \"rgb(0, 255, 0)\");`\r\n`@include svg-fill($internal-accordion-close-image, \"#000\", \"rgba(0, 255, 0, 0.75)\");`\r\n`@include svg-fill($internal-accordion-close-image, \"#000\", \"hsl(120, 100%, 50%)\");`\r\n`@include svg-fill($internal-accordion-close-image, \"#000\", \"hsla(120, 100%, 50%, 0.75)\");`\r\n"}}
{"actor":{"display_login":"Lumelomser"}}