179 lines
3.0 KiB
Plaintext
179 lines
3.0 KiB
Plaintext
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
|
|
|
|
@icon-width: 1.4em; // 1em width + 0.2em left margin + 0.2em right margin
|
|
|
|
#menu {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
#menu a {
|
|
overflow: hidden;
|
|
padding: @vertical-padding / 2 @horizontal-padding;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
color: @icinga-blue;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
#menu .active > a {
|
|
color: @icinga-blue;
|
|
}
|
|
|
|
#menu .nav-level-1 > .nav-item {
|
|
line-height: 2.429em; // 34 px
|
|
|
|
&.active {
|
|
.nav-level-2 > li {
|
|
// Expand menu if active
|
|
display: block;
|
|
}
|
|
|
|
background-color: @body-bg-color;
|
|
border-left: 5px solid @icinga-blue;
|
|
}
|
|
|
|
&.no-icon > a {
|
|
margin-left: @icon-width;
|
|
}
|
|
}
|
|
|
|
#menu .nav-level-2 > .nav-item {
|
|
// Collapse menu by default
|
|
display: none;
|
|
line-height: 1.857em; // 26px
|
|
margin-left: @icon-width;
|
|
|
|
> a {
|
|
font-size: @font-size-smaller;
|
|
}
|
|
}
|
|
|
|
.no-js #menu .nav-level-2 > .nav-item {
|
|
// Expand menu if JavaScript is disabled
|
|
display: block;
|
|
}
|
|
|
|
#menu img.icon {
|
|
line-height: 1;
|
|
margin: 0 0.2em;
|
|
width: 1em;
|
|
}
|
|
|
|
#menu .user-nav-item {
|
|
background-color: @gray;
|
|
color: @text-color-inverted;
|
|
|
|
> a:hover {
|
|
background-color: @text-color-inverted;
|
|
color: @gray;
|
|
}
|
|
}
|
|
|
|
#menu input.search {
|
|
background: transparent url('../img/icons/search.png') no-repeat @horizontal-padding + 0.2em center;
|
|
background-size: @font-size auto;
|
|
border: none;
|
|
line-height: 2.8em;
|
|
outline: none;
|
|
padding-left: @icon-width + @horizontal-padding;
|
|
width: 100%;
|
|
|
|
&.active {
|
|
background-color: @body-bg-color;
|
|
border-left: 5px solid @icinga-blue;
|
|
}
|
|
}
|
|
|
|
// Badge offset correction
|
|
|
|
#menu > nav > .nav-level-1 > .badge-nav-item > a > .badge {
|
|
margin-top: 0.6em;
|
|
}
|
|
|
|
#menu .nav-level-2 > .badge-nav-item > a > .badge {
|
|
margin-top: 0.4em;
|
|
}
|
|
|
|
// Hovered menu
|
|
|
|
#menu .nav-level-1 > .nav-item.hover {
|
|
position: relative;
|
|
|
|
&:before {
|
|
border: 0.5em solid rgba(0, 0, 0, 0);
|
|
border-right-color: @text-color;
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 30%;
|
|
}
|
|
|
|
> .nav-level-2 {
|
|
background-color: @text-color;
|
|
color: @text-color-inverted;
|
|
left: 100%;
|
|
padding: @vertical-padding 0;
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
> .nav-item {
|
|
display: block;
|
|
|
|
> a:hover {
|
|
color: @text-color-inverted;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
> a > .badge {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#layout.hoveredmenu {
|
|
#main {
|
|
z-index: 2;
|
|
}
|
|
|
|
#sidebar {
|
|
z-index: 3;
|
|
}
|
|
|
|
#menu {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
// Accessibility skip links
|
|
|
|
.skip-links {
|
|
position: relative;
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
li {
|
|
display: block;
|
|
a, button[type="submit"] {
|
|
background-color: @body-bg-color;
|
|
left: -999em;
|
|
padding: @vertical-padding @horizontal-padding;
|
|
position: absolute;
|
|
width: 100%;
|
|
&:focus {
|
|
left: 0;
|
|
outline: 1px dotted black;
|
|
}
|
|
}
|
|
button[type="submit"] {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|