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

Increase accessibility of our menu

Browse Source 
refs #5543
This commit is contained in:
Eric Lippmann 2015-11-04 14:02:35 +01:00
parent b9d09d2b66
commit b80128ced5
1 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,11 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
&:focus {
color: @icinga-blue;
outline-offset: -@vertical-padding / 2;
}
&:hover { &:hover {
color: @icinga-blue; color: @icinga-blue;
text-decoration: none; text-decoration: none;
@ -24,9 +29,13 @@
} }
#menu .nav-level-1 > .nav-item { #menu .nav-level-1 > .nav-item {
line-height: 2.429em; // 34 px line-height: 2.167em; // 26 px
&.active { &.active {
> a > .badge {
display: none;
}
.nav-level-2 > li { .nav-level-2 > li {
// Expand menu if active // Expand menu if active
display: block; display: block;
@ -39,16 +48,20 @@
&.no-icon > a { &.no-icon > a {
margin-left: @icon-width; margin-left: @icon-width;
} }
> a:active ~ .nav-level-2 > li {
display: block;
}
} }
#menu .nav-level-2 > .nav-item { #menu .nav-level-2 > .nav-item {
// Collapse menu by default // Collapse menu by default
display: none; display: none;
line-height: 1.857em; // 26px line-height: 1.833em; // 22px
margin-left: @icon-width; margin-left: @icon-width;
> a { > a {
font-size: @font-size-smaller; font-size: @font-size-small;
} }
} }
@ -67,6 +80,7 @@
background-color: @gray; background-color: @gray;
color: @text-color-inverted; color: @text-color-inverted;
> a:focus,
> a:hover { > a:hover {
background-color: @text-color-inverted; background-color: @text-color-inverted;
color: @gray; color: @gray;
@ -75,10 +89,9 @@
#menu input.search { #menu input.search {
background: transparent url('../img/icons/search.png') no-repeat @horizontal-padding + 0.2em center; background: transparent url('../img/icons/search.png') no-repeat @horizontal-padding + 0.2em center;
background-size: @font-size auto; background-size: 1em auto;
border: none; border: none;
line-height: 2.8em; line-height: 2.167em;
outline: none;
padding-left: @icon-width + @horizontal-padding; padding-left: @icon-width + @horizontal-padding;
width: 100%; width: 100%;
@ -91,11 +104,11 @@
// Badge offset correction // Badge offset correction
#menu > nav > .nav-level-1 > .badge-nav-item > a > .badge { #menu > nav > .nav-level-1 > .badge-nav-item > a > .badge {
margin-top: 0.6em; margin-top: 0.5em;
} }
#menu .nav-level-2 > .badge-nav-item > a > .badge { #menu .nav-level-2 > .badge-nav-item > a > .badge {
margin-top: 0.4em; margin-top: 0.5em;
} }
// Hovered menu // Hovered menu
@ -161,7 +174,7 @@
display: block; display: block;
a, button[type="submit"] { a, button[type="submit"] {
background-color: @body-bg-color; background-color: @body-bg-color;
left: -999em; left: -999px;
padding: @vertical-padding @horizontal-padding; padding: @vertical-padding @horizontal-padding;
position: absolute; position: absolute;
width: 100%; width: 100%;