Fix tabbed navigation not highlighting the nav-items correctly

This commit is contained in:
Jennifer Mourek 2019-03-19 13:02:31 +01:00
parent 9ca5382e55
commit cacfd9f1d9
2 changed files with 21 additions and 4 deletions

View File

@ -60,7 +60,7 @@ input.search {
&:focus {
background-color: @body-bg-color;
background-image: url('../img/icons/search_icinga_blue.png') !important;
background-image: url('../img/icons/search_icinga_blue.png');
}
}

View File

@ -102,6 +102,10 @@ ul:not(.nav-level-2) > .selected > a {
background-color: @menu-highlight-color;
color: @text-color-inverted;
&:focus {
background-color: mix(#000, @menu-highlight-color, 20);
}
&:hover {
color: @text-color-inverted;
}
@ -126,7 +130,6 @@ ul:not(.nav-level-2) > .selected > a {
// Collapse menu by default
display: none;
line-height: 1.833em; // 22px
padding-left: @icon-width;
> a {
color: @menu-2ndlvl-color;
@ -150,6 +153,10 @@ ul:not(.nav-level-2) > .selected > a {
}
}
&.active > a:focus {
background-color: mix(#000, @menu-highlight-color, 20);
}
// Little caret on active level-2 item
&.active:after {
.transform(rotate(45deg));
@ -218,6 +225,11 @@ ul:not(.nav-level-2) > .selected > a {
&.active {
background-color: @menu-active-bg-color;
}
&:hover,
&:focus {
background-color: mix(#000, @menu-bg-color, 20);
}
}
// Badge offset correction
@ -350,6 +362,10 @@ ul:not(.nav-level-2) > .selected > a {
position: relative;
}
.search-input:focus ~ .search-reset:hover {
background-color: mix(#000, @menu-active-bg-color, 20);
}
.search-reset {
background: none;
border: 0;
@ -363,8 +379,9 @@ ul:not(.nav-level-2) > .selected > a {
right: 0;
top: 0;
&:focus, &:hover {
color: @menu-highlight-color;
&:focus,
&:hover {
background-color: mix(#000, @menu-bg-color, 20);
outline: none;
}
}