Merge pull request #686 from barrymcgee/642-ie-svgs

Fix up SVG icons in IE
canonical · Sep 21, 2016 · f6fadd5 · f6fadd5
2 parents 52104fa + b2be7c0
commit f6fadd5
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 31 deletions.
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -72,7 +72,7 @@ rules:
   leading-zero: 2
   nesting-depth: 2
   pseudo-element: 2
-  quotes: 2
+  quotes: 0
   url-quotes: 2
   zero-unit: 2
 

diff --git a/scss/_global_functions.scss b/scss/_global_functions.scss
@@ -0,0 +1,12 @@
+// Functions used across multiple patterns or utils
+
+// This is to get the variable inserted in an inline svg, we have to strip the #
+// and replace with %23
+@function url-friendly-color($color) {
+  @if type-of($color) != 'color' {
+    @warn '#{$fill-color} is not a color.';
+    @return false;
+  } @else {
+    @return '%23' + str-slice('#{$color}', 2, -1);
+  }
+}
diff --git a/scss/_patterns_links.scss b/scss/_patterns_links.scss
@@ -7,7 +7,7 @@
       position: relative;
 
       &::after {
-        @include external-svg;
+        @include link-svg-icon;
         display: block;
         height: 1rem;
         position: absolute;
@@ -35,6 +35,6 @@
   }
 }
 
-@mixin external-svg($color-external-svg: $color-dark) {
-  content: url('data:image/svg+xml;utf8, <svg width="14px" height="15px" viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group" transform="translate(-1.000000, -1.000000)"><polygon id="Shape" points="0 0 16 0 16 16 0 16"></polygon><g id="Shape"><path d="M5.86666667,2.31324444 C1.59893333,2.31857778 1.06666667,2.44391111 1.06666667,5.51111111 L1.06666667,11.9111111 C1.06666667,15.1111111 1.6,15.1111111 6.4,15.1111111 L8.53333333,15.1111111 C13.3333333,15.1111111 13.8666667,15.1111111 13.8666667,11.9111111 L13.8666667,10.3111111 L12.2666667,10.3111111 L12.2666667,11.3777778 C12.2666667,13.5111111 12.2666667,13.5111111 8,13.5111111 L6.93333333,13.5111111 C2.66666667,13.5111111 2.66666667,13.5111111 2.66666667,11.3777778 L2.66666667,6.04444444 C2.66666667,4.11306667 2.7008,3.93155556 5.86666667,3.91431111 L5.86666667,2.31324444 L5.86666667,2.31324444 Z" fill="#{$color-external-svg}"></path><polygon points="0 0 16 0 16 16 0 16"></polygon><path d="M7.43466667,3.16124444 C7.54631111,2.71431111 14.5475556,0.963555556 14.8828444,1.29866667 C15.2177778,1.63377778 13.4670222,8.6352 13.0204444,8.74702222 C12.5733333,8.85866667 7.32266667,3.60817778 7.43431111,3.16124444 L7.43466667,3.16124444 Z" fill="#{$color-external-svg}"></path><polygon fill="#{$color-external-svg}" points="10.032 4.38044444 5.70488889 8.70755556 7.472 10.4746667 11.7991111 6.14755556"></polygon></g></g></g></svg>');
+@mixin link-svg-icon($color: $color-dark) {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-1-1h16v16H-1'/%3E%3Cpath fill='" + url-friendly-color($color) + "' d='M4.867 1.313C.6 1.32.067 1.443.067 4.51v6.4c0 3.2.533 3.2 5.333 3.2h2.133c4.8 0 5.334 0 5.334-3.2v-1.6h-1.6v1.068c0 2.133 0 2.133-4.267 2.133H5.933c-4.266 0-4.266 0-4.266-2.132V5.044c0-1.93.034-2.112 3.2-2.13v-1.6z'/%3E%3Cpath d='M-1-1h16v16H-1'/%3E%3Cpath fill='" + url-friendly-color($color) + "' d='M6.435 2.16c.11-.446 7.113-2.196 7.448-1.86.335.334-1.416 7.335-1.863 7.447-.447.112-5.697-5.14-5.586-5.586z'/%3E%3Cpath fill='" + url-friendly-color($color) + "' d='M9.032 3.38L4.705 7.708l1.767 1.767L10.8 5.148'/%3E%3C/g%3E%3C/svg%3E");
 }
diff --git a/scss/_patterns_lists.scss b/scss/_patterns_lists.scss
@@ -9,6 +9,14 @@
   @include vf-p-stepped-list;
 }
 
+@function svg-tick($color) {
+  @if type-of($color) != 'color' {
+    @warn '#{$color} is not a color.';
+    @return false;
+  }
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='" + url-friendly-color($color) + "' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='M6.1 10.813L2.41 8.105l1.184-1.613L5.9 8.187l4.393-4.394 1.414 1.414z' /%3E%3C/svg%3E");
+}
+
 // List styling using list class
 @mixin vf-p-list {
   .p-list {
@@ -35,7 +43,7 @@
 // Displays item with a tick bullet
 @mixin vf-p-list-item-state {
   .is-ticked {
-    background-image: svg-tick($color-brand);
+    background-image: svg-tick($color-mid-dark);
     background-position: 0 50%;
     background-repeat: no-repeat;
     padding-left: 25px;
@@ -211,26 +219,3 @@
     margin-right: 0;
   }
 }
-
-// this is to get the variable inserted in an inline svg, we have to strip the # and replace with %23
-// it also checks to see if the color is a light color and adjusts the background color accordingly
-@function url-friendly-color($color) {
-  @if type-of($color) != 'color' {
-    @warn '#{$fill-color} is not a color.';
-    @return false;
-  } @else {
-    @if (lightness($color) > 50) {
-      @return '%23' + str-slice('#{darken($color, 20%)}', 2, -1);
-    } @else {
-      @return '%23' + str-slice('#{$color}', 2, -1);
-    }
-  }
-}
-
-@function svg-tick($color) {
-  @if type-of($color) != 'color' {
-    @warn '#{$color} is not a color.';
-    @return false;
-  }
-  @return url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><circle fill="' + url-friendly-color($color) + '" cx="7" cy="7" r="7"/><path fill="%23fff" d="M6.1 10.813L2.41 8.105l1.184-1.613L5.9 8.187l4.393-4.394 1.414 1.414z" /></svg>');
-}
diff --git a/scss/_patterns_notifications.scss b/scss/_patterns_notifications.scss
@@ -38,7 +38,7 @@
     border-color: $color-positive;
 
     .p-notification__response {
-      background-image: url('data:image/svg+xml;utf8, <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="notification-success" transform="translate(1.000000, 1.000000)"><g id="Page-3---colours"><g id="Notifications---single"><g id="Group"><g id="ICON"><circle id="circle6710" stroke="#{$color-positive}" stroke-width="1.5" fill="#{$color-positive}" cx="7.2500086" cy="7.2500086" r="7.2500086"></circle><polygon id="path6712" fill="#{$color-x-light}" points="11.0502986 4.1734486 10.9843986 4.2311486 6.2496486 8.3783686 3.4740786 5.9974286 2.6350186 6.9463086 6.2503386 10.7500186 11.7500086 4.9627786 11.0502986 4.1734886"></polygon></g></g></g></g></g></g></svg>');
+      background-image: url("data:image/svg+xml,%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='notification-success' transform='translate(1.000000, 1.000000)'%3E%3Cg id='Page-3---colours'%3E%3Cg id='Notifications---single'%3E%3Cg id='Group'%3E%3Cg id='ICON'%3E%3Ccircle id='circle6710' stroke='" + url-friendly-color($color-positive) + "' stroke-width='1.5' fill='" + url-friendly-color($color-positive) + "' cx='7.2500086' cy='7.2500086' r='7.2500086'%3E%3C/circle%3E%3Cpolygon id='path6712' fill='" + url-friendly-color($color-x-light) + "' points='11.0502986 4.1734486 10.9843986 4.2311486 6.2496486 8.3783686 3.4740786 5.9974286 2.6350186 6.9463086 6.2503386 10.7500186 11.7500086 4.9627786 11.0502986 4.1734886'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
       padding-left: 1.5rem;
     }
   }
@@ -51,7 +51,7 @@
     border-color: $color-warning;
 
     .p-notification__response {
-      background-image: url('data:image/svg+xml;utf8, <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="notification-warning" transform="translate(1.000000, 1.000000)"><g id="Page-3---colours"><g id="Notifications---single"><g id="Group"><g id="ICON"><circle id="circle5432" stroke="#{$color-warning}" stroke-width="1.5" fill="#{$color-warning}" cx="7.2500086" cy="7.2500086" r="7.2500086"></circle><path d="M6.2500086,3.2500086 L6.2500086,8.2500086 L8.2500086,8.2500086 L8.2500086,3.2500086 L6.2500086,3.2500086 L6.2500086,3.2500086 L6.2500086,3.2500086 Z M6.2500086,9.2500086 L6.2500086,11.2500086 L8.2500086,11.2500086 L8.2500086,9.2500086 L6.2500086,9.2500086 L6.2500086,9.2500086 L6.2500086,9.2500086 Z" id="rect5434" fill="#{$color-x-light}"></path></g></g></g></g></g></g></svg>');
+      background-image: url("data:image/svg+xml,%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='notification-warning' transform='translate(1.000000, 1.000000)'%3E%3Cg id='Page-3---colours'%3E%3Cg id='Notifications---single'%3E%3Cg id='Group'%3E%3Cg id='ICON'%3E%3Ccircle id='circle5432' stroke='" + url-friendly-color($color-warning) + "' stroke-width='1.5' fill='" + url-friendly-color($color-warning) + "' cx='7.2500086' cy='7.2500086' r='7.2500086'%3E%3C/circle%3E%3Cpath d='M6.2500086,3.2500086 L6.2500086,8.2500086 L8.2500086,8.2500086 L8.2500086,3.2500086 L6.2500086,3.2500086 L6.2500086,3.2500086 L6.2500086,3.2500086 Z M6.2500086,9.2500086 L6.2500086,11.2500086 L8.2500086,11.2500086 L8.2500086,9.2500086 L6.2500086,9.2500086 L6.2500086,9.2500086 L6.2500086,9.2500086 Z' id='rect5434' fill='" + url-friendly-color($color-x-light) + "'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
       padding-left: 1.5rem;
     }
   }
@@ -64,7 +64,7 @@
     border-color: $color-negative;
 
     .p-notification__response {
-      background-image: url('data:image/svg+xml;utf8, <svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-3---colours" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Notifications---single" transform="translate(-215.000000, -271.000000)"><g id="Group" transform="translate(205.000000, 254.000000)"><g id="ICON" transform="translate(10.000000, 17.000000)"><rect id="rect6415" x="0" y="0.36218" width="16" height="16"></rect><circle id="circle6417" stroke="#{$color-negative}" stroke-width="1.5" fill="#{$color-negative}" cx="8" cy="8.36218" r="7.2500086"></circle><path d="M5.00001,5.36218 L11.00001,11.36218" id="path6479-8" stroke="#{$color-x-light}" stroke-width="1.5"></path><path d="M11.00001,5.36218 L5.00001,11.36218" id="path6481-8" stroke="#{$color-x-light}" stroke-width="1.5"></path></g></g></g></g></svg>');
+      background-image: url("data:image/svg+xml,%3Csvg width='16px' height='17px' viewBox='0 0 16 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-3---colours' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Notifications---single' transform='translate(-215.000000, -271.000000)'%3E%3Cg id='Group' transform='translate(205.000000, 254.000000)'%3E%3Cg id='ICON' transform='translate(10.000000, 17.000000)'%3E%3Crect id='rect6415' x='0' y='0.36218' width='16' height='16'%3E%3C/rect%3E%3Ccircle id='circle6417' stroke='" + url-friendly-color($color-negative) + "' stroke-width='1.5' fill='" + url-friendly-color($color-negative) + "' cx='8' cy='8.36218' r='7.2500086'%3E%3C/circle%3E%3Cpath d='M5.00001,5.36218 L11.00001,11.36218' id='path6479-8' stroke='" + url-friendly-color($color-x-light) + "' stroke-width='1.5'%3E%3C/path%3E%3Cpath d='M11.00001,5.36218 L5.00001,11.36218' id='path6481-8' stroke='" + url-friendly-color($color-x-light) + "' stroke-width='1.5'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
       padding-left: 1.5rem;
     }
   }

diff --git a/scss/_vanilla.scss b/scss/_vanilla.scss
@@ -1,3 +1,7 @@
+// Global Sass functions
+@import
+'global_functions';
+
 // Settings
 @import
 'settings_assets',