From eae2a32731ca8bac718b998e7fcea77d1fb9cae6 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Wed, 10 Jan 2018 15:03:57 +0000
Subject: [PATCH] add modifier to header when search is ooen to be able to
change header icon colours
---
opentech/static_src/src/javascript/components/search.js | 3 +++
opentech/static_src/src/sass/components/_icon.scss | 6 +++++-
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/opentech/static_src/src/javascript/components/search.js b/opentech/static_src/src/javascript/components/search.js
index 0941b9eb7..b36fff10f 100644
--- a/opentech/static_src/src/javascript/components/search.js
+++ b/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');
}
}
diff --git a/opentech/static_src/src/sass/components/_icon.scss b/opentech/static_src/src/sass/components/_icon.scss
index bff84f08e..7db3b1eae 100644
--- a/opentech/static_src/src/sass/components/_icon.scss
+++ b/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;
+ }
}
}
--
GitLab