Collect button icons into a single sprite

Replace `.button-fwd` and `.button-back` with `button--*` classes to
match the existing button styles. And combine the various button icons
into a single sprite file.

15 files changed, 47 insertions, 69 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index cb2f61d07..4d996387e 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -171,12 +171,12 @@ fixmystreet.resize_to = {
     if ($rapSidebar.length) {
         $rapSidebar.hide();
         $('<a>')
-            .addClass('rap-notes-trigger button-fwd')
+            .addClass('rap-notes-trigger btn btn--block btn--forward')
             .html(translation_strings.how_to_send)
             .insertBefore($rapSidebar)
             .on('click', function(){
                 $rapSidebar.slideToggle(100);
-                $(this).toggleClass('clicked');
+                $(this).toggleClass('btn--forward btn--cancel');
             });
     }
 
diff --git a/web/cobrands/fixmystreet/images/button-icons.png b/web/cobrands/fixmystreet/images/button-icons.png
new file mode 100644
index 000000000..3808ba558
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/button-icons.png
diff --git a/web/cobrands/fixmystreet/images/button-icons.svg b/web/cobrands/fixmystreet/images/button-icons.svg
new file mode 100644
index 000000000..216d2e89a
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/button-icons.svg
@@ -0,0 +1 @@
+<svg width="112" height="16" viewBox="0 0 112 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#000" fill-rule="nonzero" d="M18 0h6.5L31 8l-6.5 8H18l6.5-8M14 0H7.5L1 8l6.5 8H14L7.5 8"/><path d="M109 8.5a5 5 0 0 1-4.5 4.4v-3h-1v3A5 5 0 0 1 99 8.5h3v-1h-3a5 5 0 0 1 4.5-4.5v3h1V3a5 5 0 0 1 4.5 4.5h-3v1h3zm1-1a6 6 0 0 0-5.5-5.5V0h-1v2A6 6 0 0 0 98 7.5h-2v1h2a6 6 0 0 0 5.5 5.4V16h1v-2a6 6 0 0 0 5.5-5.5h2v-1h-2zM95.3 0h-.2L80.3 7a.6.6 0 0 0 0 1.2l5.4 2 2.1 5.4c.1.2.3.4.6.4.2 0 .4-.1.5-.3L96 .9V.3a.6.6 0 0 0-.6-.3zm-2.8 2.6l-6.4 6.5-4-1.6 10.4-4.9zm.9.9l-5 10.4-1.5-4 6.5-6.4zM40 4.5L35.5 0 32 3.5 36.5 8 32 12.5l3.5 3.5 4.5-4.5 4.5 4.5 3.5-3.5L43.5 8 48 3.5 44.5 0 40 4.5" fill="#000"/><path d="M67.4 15.2l-.2-.4 4.8-2.6 4.8 2.6-.2.4-.3-.4a7.8 7.8 0 0 0 .5-.4l.4.4-.5.1-1-5.4 4-3.8.3.4-.5.1a7.7 7.7 0 0 0-.2-.6l.5-.2V6l-5.5-.8-2.3-5 .4-.2v.5a8 8 0 0 0-.6 0V0l.4.2-2.4 5-5.4.7v-.5l.4.2a7.7 7.7 0 0 0-.2.6l-.5-.1.3-.4 4 3.8-1 5.4h-.5l.4-.5a7.8 7.8 0 0 0 .5.4l-.3.4z" stroke="#000"/><path d="M51.4 15.2l4.6-2.4 4.6 2.4.6-.4-1-5.1L64 6.1l-.2-.7-5.2-.7L56.3 0a8.4 8.4 0 0 0-.6 0l-2.3 4.7-5.2.7-.2.7 3.7 3.6-.9 5.1.6.4z" fill="#00BD08"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/chevron-grey-left.svg b/web/cobrands/fixmystreet/images/chevron-grey-left.svg
deleted file mode 100644
index 522a6f920..000000000
--- a/web/cobrands/fixmystreet/images/chevron-grey-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="27" height="33"><path fill="#d1d1d1" d="M26 0H13L0 16l13 16h13L13 16"/></svg>
diff --git a/web/cobrands/fixmystreet/images/chevron-grey-right.svg b/web/cobrands/fixmystreet/images/chevron-grey-right.svg
deleted file mode 100644
index 4715a03f8..000000000
--- a/web/cobrands/fixmystreet/images/chevron-grey-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="27" height="33"><path fill="#d1d1d1" d="M0 0h13l13 16-13 16H0l13-16"/></svg>
diff --git a/web/cobrands/fixmystreet/images/crosshairs.png b/web/cobrands/fixmystreet/images/crosshairs.png
deleted file mode 100644
index e3f216814..000000000
--- a/web/cobrands/fixmystreet/images/crosshairs.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/crosshairs.svg b/web/cobrands/fixmystreet/images/crosshairs.svg
deleted file mode 100644
index 80b5172c6..000000000
--- a/web/cobrands/fixmystreet/images/crosshairs.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-crosshairs</title><path d="M13.013 8.48c-.242 2.344-2.117 4.204-4.475 4.445V9.977H7.534v2.953c-2.375-.225-4.268-2.095-4.512-4.45h3.005v-.997H3.02C3.246 5.113 5.146 3.227 7.533 3v2.986h1.004V3.003c2.37.243 4.25 2.12 4.478 4.48h-2.97v.998h2.967zm1.008-.997c-.232-2.91-2.558-5.232-5.482-5.48V0H7.534v2.002c-2.942.233-5.285 2.56-5.52 5.48H0v1h2.017c.25 2.904 2.587 5.214 5.517 5.446V16h1.004v-2.074c2.912-.247 5.232-2.55 5.48-5.445H16v-.997h-1.98z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-mini.png b/web/cobrands/fixmystreet/images/icon-shortlist-mini.png
deleted file mode 100644
index 730dd49df..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-mini.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-mini.svg b/web/cobrands/fixmystreet/images/icon-shortlist-mini.svg
deleted file mode 100644
index 98b89ab2e..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-mini.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icon-shortlist</title><defs><path d="M3.4 15.22L8 12.804l4.6 2.418c.19-.126.377-.262.557-.405l-.88-5.12L16 6.067c-.062-.222-.133-.44-.212-.654l-5.144-.747-2.3-4.66C8.232.003 8.117 0 8 0c-.116 0-.23.002-.345.007l-2.3 4.66-5.143.746c-.08.214-.15.432-.212.654l3.722 3.628-.88 5.12c.18.143.367.28.56.406z" id="a"/><mask id="b" x="0" y="0" width="16" height="15.221" fill="#fff"><use xlink:href="#a"/></mask></defs><use mask="url(#b)" xlink:href="#a" stroke-width="2" stroke="#000" fill="none" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/icon-shortlisted-mini.png b/web/cobrands/fixmystreet/images/icon-shortlisted-mini.png
deleted file mode 100644
index 94cdd14fb..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlisted-mini.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlisted-mini.svg b/web/cobrands/fixmystreet/images/icon-shortlisted-mini.svg
deleted file mode 100644
index 1df25d7e7..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlisted-mini.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-shortlisted</title><path d="M3.4 15.22L8 12.804l4.6 2.418c.19-.126.377-.262.557-.405l-.88-5.12L16 6.067c-.062-.222-.133-.44-.212-.654l-5.144-.747-2.3-4.66C8.232.003 8.117 0 8 0c-.116 0-.23.002-.345.007l-2.3 4.66-5.143.746c-.08.214-.15.432-.212.654l3.722 3.628-.88 5.12c.18.143.367.28.56.406z" fill="#00BD08" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/navigate.png b/web/cobrands/fixmystreet/images/navigate.png
deleted file mode 100644
index c37331e0d..000000000
--- a/web/cobrands/fixmystreet/images/navigate.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/navigate.svg b/web/cobrands/fixmystreet/images/navigate.svg
deleted file mode 100644
index a00b08825..000000000
--- a/web/cobrands/fixmystreet/images/navigate.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-navigate</title><path d="M15.348.002c-.072.007-.142.026-.206.057L.342 7.057c-.216.103-.35.324-.342.562.008.24.158.45.38.538l5.356 2.106 2.106 5.356c.088.222.3.372.538.38.238.008.46-.126.562-.342l7-14.8c.092-.194.074-.423-.05-.6-.122-.177-.33-.274-.544-.256zm-2.82 2.62L6.055 9.095 2.11 7.546 12.53 2.62zm.857.836l-4.937 10.43-1.55-3.942 6.487-6.488z" 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 85b42729b..6625ab910 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -766,6 +766,9 @@ input.final-submit {
     }
 }
 
+.btn--back,
+.btn--forward,
+.btn--cancel,
 .btn--navigate,
 .btn--geolocate,
 .btn--shortlist,
@@ -776,28 +779,60 @@ input.final-submit {
         width: 16px;
         height: 16px;
         background-repeat: no-repeat;
-        @include svg-background-image('/cobrands/fixmystreet/images/navigate');
-        background-size: 16px 16px;
+        background-size: 112px 16px;
+        @include svg-background-image('/cobrands/fixmystreet/images/button-icons');
         margin-#{$right}: 0.5em;
         vertical-align: -0.1em; // vertically centre icon in button
     }
 }
 
+.btn--back {
+    &:before {
+        @if ($right == 'right') {
+            background-position: 0 0;
+        } @else  {
+            background-position: -16px 0;
+        }
+    }
+}
+
+.btn--forward {
+    &:before {
+        @if ($right == 'right') {
+            background-position: -16px 0;
+        } @else  {
+            background-position: 0 0;
+        }
+    }
+}
+
+.btn--cancel {
+    &:before {
+        background-position: -32px 0;
+    }
+}
+
+.btn--navigate {
+    &:before {
+        background-position: -80px 0;
+    }
+}
+
 .btn--geolocate {
     &:before {
-        @include svg-background-image('/cobrands/fixmystreet/images/crosshairs');
+        background-position: -96px 0;
     }
 }
 
 .btn--shortlist {
     &:before {
-        @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-mini');
+        background-position: -64px 0;
     }
 }
 
 .btn--shortlisted {
     &:before {
-        @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlisted-mini');
+        background-position: -48px 0;
     }
 }
 
@@ -826,56 +861,6 @@ input.final-submit {
     display: none;
 }
 
-.button-fwd {
-  padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em);
-  background: inline-image("../fixmystreet/images/chevron-grey-#{$right}.svg") $right 50% no-repeat;
-}
-.button-back {
-  padding: flip(1em 1em 1em 3em, 1em 3em 1em 1em);
-  background: inline-image("../fixmystreet/images/chevron-grey-#{$left}.svg") $left 50% no-repeat;
-}
-.button-fwd,
-.button-back {
-  @include inline-block;
-  cursor:pointer;
-  font-size: 1em;
-  line-height: 1;
-  margin:0;
-  border:1px solid #999;
-  color:#333;
-  background-color: #eee;
-  background-size: 20px+16px 25px;
-  @include border-radius(4px);
-  &:hover{
-    color:#fff;
-    background-color: #777;
-    text-decoration: none;
-    border:1px solid #666;
-  }
-}
-.iel8 {
-  .button-fwd, .button-back {
-    background-image: url($image-sprite);
-    background-repeat: no-repeat;
-  }
-  .button-fwd {
-    background-position: right -686px;
-  }
-  .button-back {
-    background-position: -18px -802px;
-  }
-}
-
-.rap-notes-trigger {
-  &.clicked {
-    background-image: inline-image("../fixmystreet/images/cross-grey.svg");
-
-    .iel8 & {
-      background-image: url("../fixmystreet/images/cross-grey.png");
-    }
-  }
-}
-
 .banner {
   position: relative;
   p {
@@ -1673,10 +1658,7 @@ img.pin {
     height: 64px;
 }
 
-// only on mobile
-a.rap-notes-trigger,
-a:hover.rap-notes-trigger {
-  display: block;
+.rap-notes-trigger {
   margin-bottom: 1em;
 }
 
diff --git a/web/cobrands/sass/_dashboard.scss b/web/cobrands/sass/_dashboard.scss
index e9f473243..fe35df8e3 100644
--- a/web/cobrands/sass/_dashboard.scss
+++ b/web/cobrands/sass/_dashboard.scss
@@ -176,8 +176,9 @@
         width: 16px;
         height: 16px;
         background-repeat: no-repeat;
-        @include svg-background-image('/cobrands/fixmystreet/images/crosshairs');
-        background-size: 16px 16px;
+        background-size: 112px 16px;
+        @include svg-background-image('/cobrands/fixmystreet/images/button-icons');
+        background-position: -96px 0;
         margin-#{$right}: 0.5em;
         vertical-align: -0.1em;
     }