Merge pull request #1087 from alphagov/fix-tour-opacity-ie8

Fix highlighted step on tour in IE8

app/assets/stylesheets/components/banner.scss

@@ -167,6 +167,18 @@
 
   }
 
+  .greyed-out-step {
+
+    $opacity: 0.6;
+
+    opacity: $opacity;
+
+    @include ie-lte(8) {
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + ($opacity * 100) + ")";
+    }
+
+  }
+
 }
 
 .banner-warning {

app/templates/main_nav.html

@@ -3,7 +3,7 @@
 {% if help %}
   {% call banner_wrapper(type='tour') %}
       <p class="heading-medium">Try sending yourself this example</p>
-      <div class="grid-row bottom-gutter" {% if help != '1' %}style="opacity: 0.6"{% endif %}>
+      <div class="grid-row bottom-gutter {% if help != '1' %}greyed-out-step{% endif %}">
         <div class="column-one-sixth">
           <p class="heading-large" style="float: left;">1.</p>
         </div>
@@ -13,7 +13,7 @@
           </p>
         </div>
       </div>
-      <div class="grid-row bottom-gutter" {% if help != '2' %}style="opacity: 0.6"{% endif %}>
+      <div class="grid-row bottom-gutter {% if help != '2' %}greyed-out-step{% endif %}">
         <div class="column-one-sixth">
           <p class="heading-large">2.</p>
         </div>
@@ -23,7 +23,7 @@
           </p>
         </div>
       </div>
-      <div class="grid-row bottom-gutter" {% if help != '3' %}style="opacity: 0.6"{% endif %}>
+      <div class="grid-row bottom-gutter {% if help != '3' %}greyed-out-step{% endif %}">
         <div class="column-one-sixth">
           <p class="heading-large">3.</p>
         </div>