Move fancybox magnify icon out of sprite.png

3 files changed, 15 insertions, 9 deletions

diff --git a/web/cobrands/fixmystreet/images/magnify.png b/web/cobrands/fixmystreet/images/magnify.png
new file mode 100644
index 000000000..372818a04
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/magnify.png
diff --git a/web/cobrands/fixmystreet/images/magnify.svg b/web/cobrands/fixmystreet/images/magnify.svg
new file mode 100644
index 000000000..30f7e68ff
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/magnify.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M12.8 10.8L16 14l-2 2-3.2-3.2a7 7 0 1 1 2-2zM8 6h2v2H8v2H6V8H4V6h2V4h2v2zm-1 6A5 5 0 1 0 7 2a5 5 0 0 0 0 10z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index c7e1a2994..160a928ef 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1258,19 +1258,24 @@ input.final-submit {
   a {
     display: block;
     position: relative;
+
     span {
-      position:absolute;
-      top:0;
+      position: absolute;
+      top: 0;
       #{$right}: 0;
-      display:block;
-      width:20px;
-      height:20px;
+      display: block;
+      width: 20px;
+      height: 0;
+      padding-top: 20px;
       opacity: 0.5;
-      background:#fff url($image-sprite) -16px -1098px no-repeat;
-      //hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/
-      font: 0/0 a;
-      color: transparent;
+      overflow: hidden;
+      background-color: #fff;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-size: 16px 16px;
+      @include svg-background-image('/cobrands/fixmystreet/images/magnify');
     }
+
     &:hover span {
       opacity: 1;
     }