From 9e5529bea5a20781042ef75eef68878d04a48b03 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 23 Jan 2017 12:47:37 +0000
Subject: [PATCH] Fix highlighted step on tour in IE8
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We grey-out the non-current step in the tour so the user knows whether
they’re at step 1, 2, or 3.

This is done using CSS opacity.

IE8 doesn’t support the standard CSS opacity syntax. But it does support
the weird, old, Microsoft-specific `filter:` syntax. So this commit:

- makes the greying out a class rather than an inline style, to reduce
  duplication
- adds the filter syntax so the greying out works in IE8
---
 app/assets/stylesheets/components/banner.scss | 12 ++++++++++++
 app/templates/main_nav.html                   |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index 38fa4d8c0..7a976c6c3 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/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 {
diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html
index 7305fb577..fcbd6ad10 100644
--- a/app/templates/main_nav.html
+++ b/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>