From 6c7d322457cf9d1705b6925a9832e4d6f1223f75 Mon Sep 17 00:00:00 2001
From: khawkins98 <khawkins98@gmail.com>
Date: Mon, 9 Oct 2017 16:56:32 +0100
Subject: [PATCH] Highlight embl button when active
---
css/ebi-css-build/_embl_selector.scss | 11 +++++++++++
.../script/4_ebiFrameworkContent.js | 3 +++
2 files changed, 14 insertions(+)
diff --git a/css/ebi-css-build/_embl_selector.scss b/css/ebi-css-build/_embl_selector.scss
index a3f18323..bc3eb439 100644
--- a/css/ebi-css-build/_embl_selector.scss
+++ b/css/ebi-css-build/_embl_selector.scss
@@ -98,6 +98,17 @@
margin-left: 55px;
}
}
+ .embl-selector.active {
+ background-color: #ddd;
+ padding-right: 1rem;
+ .button,
+ .button.hover,
+ .button:focus,
+ .button:hover {
+ background-image: url(https://embl-design-language.github.io/Framework-for-Websites/assets/logos/EMBL-black.svg);
+ }
+ }
+
// begin to hide bits of dropdown toggle as screen shrinks
@media screen and (max-width: 53em) {
.embl-selector .button { width: 0px; padding-right:0; overflow: hidden;}
diff --git a/js/ebi-global-includes/script/4_ebiFrameworkContent.js b/js/ebi-global-includes/script/4_ebiFrameworkContent.js
index ac85ea44..fbcad8e0 100644
--- a/js/ebi-global-includes/script/4_ebiFrameworkContent.js
+++ b/js/ebi-global-includes/script/4_ebiFrameworkContent.js
@@ -192,13 +192,16 @@ function ebiFrameworkInsertEMBLdropdown() {
// toggle the .embl-bar
var emblBar = document.querySelectorAll(".embl-bar")[0];
+ var emblBarButton = document.querySelectorAll(".embl-selector")[0];
var emblSelector = document.querySelectorAll(".embl-selector")[0].addEventListener("click", function( event ) {
ebiToggleClass(emblBar,'active');
+ ebiToggleClass(emblBarButton,'active');
window.scrollTo(0, 0);
}, false);
var emblSelectorClose = document.querySelectorAll(".embl-bar .close-button")[0].addEventListener("click", function( event ) {
ebiToggleClass(emblBar,'active');
+ ebiToggleClass(emblBarButton,'active');
window.scrollTo(0, 0);
}, false);
--
GitLab