menu.less: Align .badge-nav-item with flexbox

This commit is contained in:
Florian Strohmaier 2019-11-28 14:55:43 +01:00 committed by Johannes Meyer
parent ca02547bf6
commit 2b2f0cf48f
1 changed files with 47 additions and 2 deletions

View File

@ -149,8 +149,8 @@ ul:not(.nav-level-2) > .selected > a {
padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small;
}
&:not(.selected):not(.active) > a:hover,
&:not(.selected):not(.active) > a:focus {
&:not(.selected):not(.active) > a:not(.badge):hover,
&:not(.selected):not(.active) > a:not(.badge):focus {
background-color: mix(#000, @menu-active-bg-color, 20);
color: @menu-2ndlvl-highlight-color;
}
@ -479,3 +479,48 @@ input[type=text].search-input {
width: 1.4em;
margin-right: 0;
}
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li,
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
&.badge-nav-item {
display: flex;
align-items: center;
}
&.badge-nav-item a:not(.badge) {
flex: 1 1 auto;
width: 0;
}
&.badge-nav-item a.badge {
color: white;
flex: 0 1 auto;
margin-right: 1em;
padding: .25em;
width: auto;
&:hover {
opacity: .6;
}
}
}
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
&.badge-nav-item:not(.selected) {
&:hover {
background-color: darken(@menu-bg-color, 20);
a {
color: white;
}
}
}
}
#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
&.badge-nav-item {
&:hover {
background-color: lighten(@icinga-blue, 80);
}
}
}