Merge pull request #1060 from mjschock/STENCIL-3658

STENCIL-3658 - Fix carousel next arrows
bigcommerce · Aug 8, 2017 · e78e2ce · e78e2ce
2 parents 670f310 + 9319dd8
commit e78e2ce
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/assets/scss/settings/vendor/slick/_settings.scss b/assets/scss/settings/vendor/slick/_settings.scss
@@ -11,8 +11,8 @@ $slick-loader-path:             null;
 $slick-arrow-color:             stencilColor("carousel-arrow-color");
 $slick-arrow-bgColor:           rgba(stencilColor("carousel-arrow-bgColor"), 0.9);
 $slick-arrow-borderColor:       stencilColor("carousel-arrow-borderColor");
-$slick-arrow-prev:              url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M22.4572074 1.00746147l-21 20.02482143 20.9479397 19.9751786' stroke='#{$slick-arrow-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
-$slick-arrow-next:              url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M1.45679 1.00746147l21 20.02482143L1.50885 41.0074615' stroke='#{$slick-arrow-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
+$slick-arrow-prev:              url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M22.4572074 1.00746147l-21 20.02482143 20.9479397 19.9751786' stroke='#{str-replace(#{$slick-arrow-color}, \"\#\", \"\%23\")}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
+$slick-arrow-next:              url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M1.45679 1.00746147l21 20.02482143L1.50885 41.0074615' stroke='#{str-replace(#{$slick-arrow-color}, \"\#\", \"\%23\")}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
 $slick-dot-color:               stencilColor("carousel-dot-color");
 $slick-dot-color-active:        stencilColor("carousel-dot-color-active");
 $slick-dot-bgColor:             rgba(stencilColor("carousel-dot-bgColor"), 0.9);

diff --git a/assets/scss/tools/_string.scss b/assets/scss/tools/_string.scss
@@ -0,0 +1,10 @@
+// http://sassmeister.com/gist/1b4f2da5527830088e4d
+@function str-replace($string, $search, $replace: "") {
+    $index: str-index($string, $search);
+
+    @if $index {
+      @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
diff --git a/assets/scss/tools/_tools.scss b/assets/scss/tools/_tools.scss
@@ -1 +1,2 @@
 @import "list";
+@import "string";