add modifier to header when search is ooen to be able to change header icon colours

opentech/static_src/src/javascript/components/search.js

@@ -23,6 +23,9 @@ class Search {
 
         // add modifier to header__inner when the menu is open to style search element
         document.querySelector('.header__inner--menu-open').classList.toggle('header__inner--search-open');
+
+        // add modifier to header to be able to change header icon colours
+        document.querySelector('.header').classList.toggle('search-open');
     }
 }
 

opentech/static_src/src/sass/components/_icon.scss

@@ -36,8 +36,8 @@
         width: 15px;
         height: 15px;
         margin-right: 5px;
-        fill: $color--white;
         transition: fill $transition;
+        fill: $color--white;
 
         .button:hover & {
             fill: $color--dark-blue;
@@ -46,5 +46,9 @@
         .header--has-bg-image & {
             fill: $color--dark-blue;
         }
+
+        .search-open & {
+            fill: $color--white;
+        }
     }
 }