480 lines
8.8 KiB
Plaintext
480 lines
8.8 KiB
Plaintext
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
|
|
|
|
#menu [class^="icon-"],
|
|
#menu [class*=" icon-"] {
|
|
&:before {
|
|
width: 1.5em;
|
|
}
|
|
}
|
|
|
|
@icon-width: 1.7em; // 1.5em width + 0.2em right margin
|
|
|
|
#menu-container {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
#menu {
|
|
background-color: @menu-bg-color;
|
|
box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3);
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: absolute;
|
|
}
|
|
|
|
#layout:not(.minimal-layout) #menu {
|
|
// Space for the #toggle-sidebar button
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
padding-bottom: 2.25em;
|
|
}
|
|
}
|
|
|
|
#menu .nav-item {
|
|
vertical-align: middle;
|
|
|
|
> a {
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#layout:not(.sidebar-collapsed) #menu .nav-item > a {
|
|
// Respect overflowing content
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item > a {
|
|
// Clip overflowing content
|
|
overflow: hidden;
|
|
width: 4em;
|
|
}
|
|
|
|
#menu .nav-level-1 > .nav-item {
|
|
line-height: 2.167em; // 26 px
|
|
color: @menu-color;
|
|
|
|
&.active {
|
|
> a > .badge {
|
|
display: none;
|
|
}
|
|
|
|
background-color: @menu-active-bg-color;
|
|
}
|
|
|
|
&.no-icon > a {
|
|
padding-left: @icon-width + .75em;
|
|
}
|
|
|
|
> a {
|
|
padding: 0.5em 0.5em 0.5em .75em;
|
|
}
|
|
|
|
&.active:not(.selected) > a:focus,
|
|
&.active:not(.selected) > a:hover {
|
|
background-color: mix(#000, @menu-active-bg-color, 20);
|
|
}
|
|
|
|
&:not(.selected) > a:hover,
|
|
&:not(.selected) > a:focus {
|
|
background-color: mix(#000, @menu-bg-color, 20);
|
|
}
|
|
|
|
// Balance icon weight for non active menu items
|
|
&:not(.active) > a > i {
|
|
opacity: .8;
|
|
}
|
|
|
|
& > a > .icon-letter:before {
|
|
content: attr(data-letter);
|
|
font-family: @font-family;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
ul:not(.nav-level-2) > .selected > a {
|
|
background-color: @menu-highlight-color;
|
|
color: @text-color-inverted;
|
|
|
|
|
|
&:hover {
|
|
color: @text-color-inverted;
|
|
}
|
|
|
|
&:after {
|
|
.transform(rotate(45deg));
|
|
|
|
position: absolute;
|
|
right: -.75em;
|
|
|
|
background-color: #fff;
|
|
box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
|
|
content: "";
|
|
display: block;
|
|
height: 1.25em;
|
|
margin-top: -1.75em;
|
|
width: 1.25em;
|
|
}
|
|
}
|
|
|
|
#menu .nav-level-2 > .nav-item {
|
|
// Collapse menu by default
|
|
display: none;
|
|
line-height: 1.833em; // 22px
|
|
|
|
> a {
|
|
color: @menu-2ndlvl-color;
|
|
font-size: @font-size-small;
|
|
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 {
|
|
background-color: mix(#000, @menu-active-bg-color, 20);
|
|
color: @menu-2ndlvl-highlight-color;
|
|
}
|
|
|
|
&.active {
|
|
background-color: @menu-highlight-color;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
// Little caret on active level-2 item
|
|
&.active:after {
|
|
.transform(rotate(45deg));
|
|
|
|
background-color: @body-bg-color;
|
|
box-shadow: 0 0 1em 0 rgba(0,0,0,.6);
|
|
content: "";
|
|
display: block;
|
|
height: 1.25em;
|
|
width: 1.25em;
|
|
position: absolute;
|
|
top: .5em;
|
|
right: -.75em;
|
|
}
|
|
|
|
&.active > a {
|
|
color: @menu-color;
|
|
}
|
|
}
|
|
|
|
.no-js #menu .nav-level-2 > .nav-item {
|
|
// Expand menu if JavaScript is disabled
|
|
display: block;
|
|
}
|
|
|
|
#layout:not(.sidebar-collapsed) {
|
|
#menu .nav-level-1 > .nav-item {
|
|
&.active {
|
|
.nav-level-2 > li {
|
|
// Expand menu if active
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#menu img.icon {
|
|
line-height: 1;
|
|
margin: 0 0.5em -.05em 0.25em;
|
|
width: 1em;
|
|
}
|
|
|
|
#menu img[src*="/img/icons/"] {
|
|
&:not([src$="tux.png"]):not([src$="win.png"]):not([src$="_white.png"]) {
|
|
-webkit-filter: invert(100%);
|
|
-moz-filter: invert(100%);
|
|
-ms-filter: invert(100%);
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
.nav-item:hover img.icon {
|
|
opacity: .6;
|
|
}
|
|
|
|
#menu input.search {
|
|
background: transparent url('../img/icons/search_white.png') no-repeat 0.7em center;
|
|
background-size: 1em auto;
|
|
border: none;
|
|
border-left: 5px solid transparent;
|
|
color: @menu-color;
|
|
line-height: 2.167em;
|
|
padding-left: @icon-width + 0.5em;
|
|
width: 100%;
|
|
|
|
&.active {
|
|
background-color: @menu-active-bg-color;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: mix(#000, @menu-bg-color, 20);
|
|
}
|
|
}
|
|
|
|
// Badge offset correction
|
|
#menu > nav > .nav-level-1 > .badge-nav-item > a > .badge {
|
|
margin-top: 0.2em;
|
|
}
|
|
|
|
#menu .nav-level-2 > .badge-nav-item > a > .badge {
|
|
margin-top: 0.2em;
|
|
margin-right: .5em
|
|
}
|
|
|
|
// Hovered menu
|
|
#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover,
|
|
#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
|
|
> .nav-level-2 {
|
|
background-color: @menu-flyout-bg-color;
|
|
border: 1px solid @gray-light;
|
|
border-radius: .25em;
|
|
box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
|
|
padding: @vertical-padding 0;
|
|
width: 14em;
|
|
position: fixed;
|
|
|
|
&:after {
|
|
.transform(rotate(45deg));
|
|
|
|
background-color: @body-bg-color;
|
|
border-bottom: 1px solid @gray-light;
|
|
border-left: 1px solid @gray-light;
|
|
content: "";
|
|
display: block;
|
|
height: 1.1em;
|
|
width: 1.1em;
|
|
position: absolute;
|
|
top: 1em;
|
|
left: -.6em;
|
|
z-index: -1;
|
|
}
|
|
> .nav-item {
|
|
display: block;
|
|
padding-left: 0;
|
|
position: relative;
|
|
|
|
> a {
|
|
color: @menu-flyout-color;
|
|
padding-left: 1.5em;
|
|
|
|
&:hover, &:focus {
|
|
background-color: @tr-active-color;
|
|
}
|
|
}
|
|
|
|
&.active > a {
|
|
color: @menu-color;
|
|
|
|
&:focus, &:hover {
|
|
background-color: @menu-highlight-color;
|
|
}
|
|
}
|
|
|
|
// Hide activity caret when displayed as flyout
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
> a > .badge {
|
|
display: none;
|
|
}
|
|
|
|
img.icon {
|
|
opacity: .6;
|
|
}
|
|
}
|
|
|
|
#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
|
|
> .nav-level-2 {
|
|
// Position relative to parent
|
|
margin-left: 16em;
|
|
margin-top: -3.167em;
|
|
}
|
|
}
|
|
|
|
#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover {
|
|
> .nav-level-2 {
|
|
// Position relative to parent
|
|
margin-left: 4em;
|
|
margin-top: -3.333em;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
border: none;
|
|
left: -999px;
|
|
padding: @vertical-padding @horizontal-padding;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 1;
|
|
&:focus {
|
|
left: 0;
|
|
outline-offset: -3px;
|
|
}
|
|
}
|
|
button[type="submit"] {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#sidebar.expanded {
|
|
bottom: 0 !important;
|
|
height: auto !important;
|
|
|
|
#mobile-menu-toggle .icon-menu {
|
|
display: none;
|
|
}
|
|
|
|
#mobile-menu-toggle .icon-cancel {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.search-control {
|
|
position: relative;
|
|
}
|
|
|
|
.search-input:focus ~ .search-reset:hover {
|
|
background-color: mix(#000, @menu-active-bg-color, 20);
|
|
}
|
|
|
|
.search-reset {
|
|
background: none;
|
|
border: 0;
|
|
color: @menu-color;
|
|
cursor: pointer;
|
|
display: none;
|
|
height: 100%;
|
|
padding: 0;
|
|
user-select: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
background-color: mix(#000, @menu-bg-color, 20);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// Override forms.less
|
|
input[type=text].search-input {
|
|
padding-right: 1.4em;
|
|
text-overflow: ellipsis;
|
|
transition: none;
|
|
}
|
|
|
|
.search-input:focus:-moz-placeholder { // FF 18-
|
|
color: @gray-light;
|
|
}
|
|
|
|
.search-input:focus::-moz-placeholder { // FF 19+
|
|
color: @gray-light;
|
|
}
|
|
|
|
.search-input:focus:-ms-input-placeholder {
|
|
color: @gray-light;
|
|
}
|
|
|
|
.search-input:focus::-webkit-input-placeholder {
|
|
color: @gray-light;
|
|
}
|
|
|
|
.search-input:valid ~ .search-reset {
|
|
animation-duration: .4s;
|
|
animation-name: search-reset-in;
|
|
display: block;
|
|
}
|
|
|
|
.search-input:invalid,
|
|
.search-input:-moz-submit-invalid,
|
|
.search-input:-moz-ui-invalid {
|
|
// Disable glow
|
|
box-shadow: none;
|
|
}
|
|
|
|
@keyframes search-reset-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(-20%, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
// Toggle sidebar button
|
|
#toggle-sidebar {
|
|
// Reset button styles
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
color: @gray-light;
|
|
position: absolute;
|
|
bottom: 0.2em;
|
|
right: 0;
|
|
|
|
i {
|
|
background-color: @body-bg-color;
|
|
border-radius: .25em 0 0 .25em;
|
|
font-size: 1.125em;
|
|
width: 2em;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:hover, &:focus {
|
|
i {
|
|
color: @menu-highlight-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
#layout.minimal-layout #toggle-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
#open-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
#open-sidebar:before,
|
|
#close-sidebar:before {
|
|
width: 1.4em;
|
|
margin-right: 0;
|
|
}
|