tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-04-08 17:15:08 +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;
white-space: nowrap;
&:focus {
color: @icinga-blue;
outline-offset: -@vertical-padding / 2;
}
&:hover {
color: @icinga-blue;
text-decoration: none;
@ -24,9 +29,13 @@
}
#menu .nav-level-1 > .nav-item {
line-height: 2.429em; // 34 px
line-height: 2.167em; // 26 px
&.active {
> a > .badge {
display: none;
}
.nav-level-2 > li {
// Expand menu if active
display: block;
@ -39,16 +48,20 @@
&.no-icon > a {
margin-left: @icon-width;
}
> a:active ~ .nav-level-2 > li {
display: block;
}
}
#menu .nav-level-2 > .nav-item {
// Collapse menu by default
display: none;
line-height: 1.857em; // 26px
line-height: 1.833em; // 22px
margin-left: @icon-width;
> a {
font-size: @font-size-smaller;
font-size: @font-size-small;
}
}
@ -67,6 +80,7 @@
background-color: @gray;
color: @text-color-inverted;
> a:focus,
> a:hover {
background-color: @text-color-inverted;
color: @gray;
@ -75,10 +89,9 @@
#menu input.search {
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;
line-height: 2.8em;
outline: none;
line-height: 2.167em;
padding-left: @icon-width + @horizontal-padding;
width: 100%;
@ -91,11 +104,11 @@
// Badge offset correction
#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 {
margin-top: 0.4em;
margin-top: 0.5em;
}
// Hovered menu
@ -161,7 +174,7 @@
display: block;
a, button[type="submit"] {
background-color: @body-bg-color;
left: -999em;
left: -999px;
padding: @vertical-padding @horizontal-padding;
position: absolute;
width: 100%;