Hide print link if JS not available

The print link relies on JS, so doesn't work if JS is not available. In this case, we should hide the link
alphagov · Jan 10, 2020 · 22d4bfe · 22d4bfe
1 parent fdfd812
commit 22d4bfe
Showing 1 changed file with 26 additions and 22 deletions.
diff --git a/app/assets/stylesheets/views/_brexit_checker_results_page.scss b/app/assets/stylesheets/views/_brexit_checker_results_page.scss
@@ -85,28 +85,32 @@
   }
 
   .brexit-checker__print-link {
-    @include govuk-font(19);
-    background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
-    padding: 0.5em 0.5em 0.5em 38px;
-    margin-left: -10px;
-    margin-top: govuk-spacing(3);
-    outline: 0;
-    border: 0;
-    cursor: pointer;
-    text-decoration: underline;
-    color: $govuk-link-colour;
-
-    @include govuk-device-pixel-ratio($ratio: 2) {
-      background-image: image-url("govuk_publishing_components/icon-print-2x.png");
-      background-size: 16px 18px;
-    }
-
-    &:hover {
-      color: $govuk-link-hover-colour;
-    }
-
-    &:focus {
-      @include govuk-focused-text;
+    display: none;
+
+    .js-enabled & {
+      @include govuk-font(19);
+      background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
+      padding: 0.5em 0.5em 0.5em 38px;
+      margin-left: -10px;
+      margin-top: govuk-spacing(3);
+      outline: 0;
+      border: 0;
+      cursor: pointer;
+      text-decoration: underline;
+      color: $govuk-link-colour;
+
+      @include govuk-device-pixel-ratio($ratio: 2) {
+        background-image: image-url("govuk_publishing_components/icon-print-2x.png");
+        background-size: 16px 18px;
+      }
+
+      &:hover {
+        color: $govuk-link-hover-colour;
+      }
+
+      &:focus {
+        @include govuk-focused-text;
+      }
     }
   }
 }