From ea16be1bb7c45d25d0e8d7a3e5af55b23becf741 Mon Sep 17 00:00:00 2001 From: Barry McGee Date: Wed, 21 Sep 2016 16:02:27 +0100 Subject: [PATCH] Fix up svg icons for IE --- scss/_global_functions.scss | 12 +++++++++++ scss/_patterns_links.scss | 6 +++--- scss/_patterns_lists.scss | 33 +++++++++---------------------- scss/_patterns_notifications.scss | 6 +++--- scss/_vanilla.scss | 4 ++++ 5 files changed, 31 insertions(+), 30 deletions(-) create mode 100644 scss/_global_functions.scss diff --git a/scss/_global_functions.scss b/scss/_global_functions.scss new file mode 100644 index 000000000..afb9f007b --- /dev/null +++ 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 index e87a4ca60..be177d08e 100644 --- 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, '); +@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 index fd9b95f80..18904a46f 100644 --- 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, '); -} diff --git a/scss/_patterns_notifications.scss b/scss/_patterns_notifications.scss index 04ae0875c..316061cb8 100644 --- 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, '); + 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, '); + 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, '); + 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 index d4670c2ae..2de39c17f 100644 --- a/scss/_vanilla.scss +++ b/scss/_vanilla.scss @@ -1,3 +1,7 @@ +// Global Sass functions +@import +'global_functions'; + // Settings @import 'settings_assets',