Add hover and active states for Kibana logo in side nav. (#16627)
* Add hover and active states for Kibana logo in side nav. * Use window.location to determine active state.
This commit is contained in:
parent
b932467784
commit
2484982a2e
|
@ -7,7 +7,12 @@
|
|||
|
||||
<!-- Logo -->
|
||||
<div class="global-nav__logo">
|
||||
<a href="{{ getHref('/app/kibana#/home') }}" data-test-subj="kibanaLogo">
|
||||
<a
|
||||
class="global_nav_logo"
|
||||
ng-class="{ active: isHomeActive() }"
|
||||
href="{{ getHref('/app/kibana#/home') }}"
|
||||
data-test-subj="kibanaLogo"
|
||||
>
|
||||
<li
|
||||
ng-if="!logoBrand && !smallLogoBrand"
|
||||
aria-label="{{ appTitle }} Logo"
|
||||
|
|
|
@ -50,6 +50,9 @@ module.directive('globalNav', (globalNavState, chrome) => {
|
|||
globalNavState.setOpen(!globalNavState.isOpen());
|
||||
};
|
||||
|
||||
scope.isHomeActive = () => {
|
||||
return window.location.hash.indexOf('#/home') === 0;
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
@ -36,7 +36,6 @@
|
|||
background-position: 10px 14px;
|
||||
background-size: 120px 42px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #005571;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,17 @@
|
|||
@import (reference) "~ui/styles/variables";
|
||||
|
||||
.global_nav_logo {
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@globalColorBlue, 15%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: @globalColorBlue;
|
||||
}
|
||||
}
|
||||
|
||||
.global-nav-link {
|
||||
position: relative;
|
||||
width: @global-nav-closed-width;
|
||||
|
|
Loading…
Reference in a new issue