Replace Modernizr .no-js with .js-enabled

alphagov · Mar 1, 2023 · 6987fda · 6987fda
1 parent 2763471
commit 6987fda
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 31 deletions.
diff --git a/src/stylesheets/components/_navigation.scss b/src/stylesheets/components/_navigation.scss
@@ -2,22 +2,12 @@
   border-bottom: 1px solid $govuk-border-colour;
   background-color: $app-light-grey;
 
-  @include govuk-media-query($from: tablet) {
-    display: block;
-  }
-
   [hidden],
   &[hidden] {
     display: none;
   }
 }
 
-.no-js .app-navigation {
-  @include govuk-media-query($until: tablet) {
-    display: block;
-  }
-}
-
 .app-navigation__list {
   margin: 0;
   padding: 0;
@@ -134,8 +124,4 @@
   top: auto;
   right: govuk-spacing(1);
   bottom: govuk-spacing(5);
-
-  &[hidden] {
-    display: none;
-  }
 }
diff --git a/src/stylesheets/components/_site-search.scss b/src/stylesheets/components/_site-search.scss
@@ -13,13 +13,18 @@
 $icon-size: 40px;
 
 .app-site-search {
+  display: none;
   position: relative;
   width: 100%;
   max-width: calc(100% - 75px);
   margin-top: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
   float: left;
 
+  .js-enabled & {
+    display: block;
+  }
+
   @include govuk-media-query($from: tablet) {
     width: 300px;
     max-width: 100%;
@@ -30,18 +35,15 @@ $icon-size: 40px;
     margin: 0;
     margin-top: -5px; // negative margin to vertically align search in header
     float: right;
-  }
+    text-align: right;
 
-  .no-js & {
-    display: none;
-
-    @include govuk-media-query($from: tablet) {
-      display: block;
+    .js-enabled & {
+      text-align: left;
     }
+  }
 
-    @include govuk-media-query($from: desktop) {
-      text-align: right;
-    }
+  @include govuk-media-query($from: tablet) {
+    display: block;
   }
 }
 
@@ -187,16 +189,24 @@ $icon-size: 40px;
 
 .app-site-search__link {
   display: none;
+  margin-top: 10px;
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: govuk-colour("white");
+  }
 
-  .no-js & {
-    @include govuk-media-query($from: tablet) {
-      display: inline-block;
-      margin-top: 10px;
-      color: govuk-colour("white");
+  &:focus {
+    color: govuk-colour("black");
+  }
+
+  @include govuk-media-query($from: tablet) {
+    display: inline-block;
 
-      &:focus {
-        color: govuk-colour("black");
-      }
+    .js-enabled & {
+      display: none;
     }
   }
 }