diff --git a/.sass-lint.yml b/.sass-lint.yml
index e3f246950..703b54a7f 100644
--- 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
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',