tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-26 23:34:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

css: Expect additional nav anchors to have styled content

Browse Source 
anchors are part of the layout in the menu, they shouldn't
be styled. Instead they're now expected to have content that
is styled instead.
This commit is contained in:
Johannes Meyer 2021-07-05 17:29:18 +02:00
parent 54acf35c69
commit e4a39cf0e1
1 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
public/css/icinga/menu.less
View File

@ -46,7 +46,7 @@
} }
} }
#layout:not(.sidebar-collapsed) #menu .nav-item > a { #layout:not(.sidebar-collapsed) #menu .nav-item > a:first-of-type {
// Respect overflowing content // Respect overflowing content
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -141,7 +141,11 @@
> a { > a {
.var(color, menu-2ndlvl-color); .var(color, menu-2ndlvl-color);
font-size: @font-size-small; font-size: @font-size-small;
padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small; padding: 0.364em 0.545em 0.364em 0.545em;
&:first-of-type {
padding-left: (@icon-width + .75em)/@font-size-small;
}
} }
&.active { &.active {
@ -170,11 +174,14 @@
.var(background-color, menu-2ndlvl-active-bg-color); .var(background-color, menu-2ndlvl-active-bg-color);
&:hover, &:focus { &:hover, &:focus {
&:first-of-type,
&:first-of-type ~ a {
.var(color, menu-2ndlvl-active-hover-color); .var(color, menu-2ndlvl-active-hover-color);
.var(background-color, menu-2ndlvl-active-hover-bg-color); .var(background-color, menu-2ndlvl-active-hover-bg-color);
} }
} }
} }
}
.no-js #menu .nav-level-2 > .nav-item { .no-js #menu .nav-level-2 > .nav-item {
// Expand menu if JavaScript is disabled // Expand menu if JavaScript is disabled
@ -286,14 +293,20 @@
> a { > a {
.var(color, menu-flyout-color); .var(color, menu-flyout-color);
&:first-of-type {
padding-left: 1.5em; padding-left: 1.5em;
} }
}
&:not(.active) { &:not(.active) {
a:hover, a:focus { a:hover, a:focus {
&:first-of-type,
&:first-of-type ~ a {
.var(background-color, menu-2ndlvl-highlight-bg-color); .var(background-color, menu-2ndlvl-highlight-bg-color);
} }
} }
}
&.active > a { &.active > a {
.var(color, menu-color); .var(color, menu-color);
@ -333,25 +346,25 @@
display: flex; display: flex;
align-items: center; align-items: center;
a:not(.badge) { a:first-of-type {
flex: 1 1 auto; flex: 1 1 auto;
width: 0; width: 0;
} }
a.badge { a:first-of-type ~ a {
.var(color, text-color-inverted); flex: 0;
flex: 0 1 auto;
margin-right: 1em;
padding: .25em;
width: auto; width: auto;
&:hover { &:hover,
&:focus {
.badge {
opacity: .6; opacity: .6;
} }
} }
} }
} }
} }
}
// Accessibility skip links // Accessibility skip links
.skip-links { .skip-links {
@ -527,29 +540,32 @@ html.no-js #toggle-sidebar {
align-items: center; align-items: center;
} }
&.badge-nav-item a:not(.badge) { &.badge-nav-item a:first-of-type {
flex: 1 1 auto; flex: 1 1 auto;
width: 0; width: 0;
} }
&.badge-nav-item a.badge { &.badge-nav-item a:first-of-type ~ a {
.var(color, text-color-inverted); flex: 0;
flex: 0 1 auto;
margin-right: 1em;
padding: .25em;
width: auto; width: auto;
&:hover { &:hover,
&:focus {
.badge {
opacity: .6; opacity: .6;
} }
} }
} }
}
#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.active .nav-level-2 > li {
&.badge-nav-item:not(.selected) { &.badge-nav-item:not(.selected) {
a:hover, a:hover,
a:focus { a:focus {
&:first-of-type,
&:first-of-type ~ a {
.var(background-color, menu-2ndlvl-highlight-bg-color); .var(background-color, menu-2ndlvl-highlight-bg-color);
} }
} }
} }
}