mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-04-08 17:15:08 +02:00
Add configmenu.less
This commit is contained in:
Florian Strohmaier
parent
d63f645bd8
commit
1d2d37791f
303
public/css/icinga/configmenu.less
Normal file
303
public/css/icinga/configmenu.less
Normal file
@ -0,0 +1,303 @@
|
||||
#menu {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.sidebar-collapsed #menu {
|
||||
margin-bottom: 8em;
|
||||
}
|
||||
|
||||
#menu .config-menu {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: @menu-bg-color;
|
||||
margin-top: auto;
|
||||
|
||||
> ul {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
padding: 0.5em 0.5em 0.5em 0.75em;
|
||||
line-height: 2.167em;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
&:hover .nav-level-1 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
li.active a:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-nav-item {
|
||||
width: 100%;
|
||||
overflow: hidden; // necessary for .text-ellipsis of <a>
|
||||
|
||||
> a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:not(.active):hover a,
|
||||
&:not(.active) a:focus {
|
||||
background: @menu-hover-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.config-nav-item {
|
||||
line-height: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
> button {
|
||||
background: none;
|
||||
border: none;
|
||||
display: block;
|
||||
.rounded-corners();
|
||||
|
||||
> .state-badge {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
opacity: .8;
|
||||
font-size: 1.25em;
|
||||
|
||||
&:before {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > button {
|
||||
background: fade(@menu-hover-bg-color, 25);
|
||||
|
||||
> .state-badge {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
button:focus {
|
||||
background: fade(@menu-hover-bg-color, 25);
|
||||
}
|
||||
|
||||
&.active > button {
|
||||
color: @text-color-inverted;
|
||||
background: @icinga-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.state-badge {
|
||||
line-height: 1.2;
|
||||
padding: .25em;
|
||||
font-family: @font-family-wide;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-level-1 li {
|
||||
&.badge-nav-item > a {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
|
||||
.state-badge {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item-logout {
|
||||
color: @color-critical;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
}
|
||||
|
||||
.user-ball {
|
||||
.ball();
|
||||
.ball-size-l();
|
||||
.ball-solid(@icinga-blue);
|
||||
|
||||
// icingadb-web/public/css/common.less: .user-ball
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
|
||||
// compensate border vertically and add space to the right;
|
||||
margin: -1px .2em -2px 0;
|
||||
border: 1px solid @text-color-inverted;
|
||||
font-style: normal;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
#layout:not(.sidebar-collapsed) #menu .config-menu {
|
||||
.user-nav-item {
|
||||
> a {
|
||||
padding-right: 4.75em;
|
||||
}
|
||||
|
||||
&.active.selected + .config-nav-item {
|
||||
> button {
|
||||
color: @text-color-inverted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-nav-item {
|
||||
position: absolute;
|
||||
right: 2.5em;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
|
||||
.state-badge {
|
||||
left: -1em;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flyout {
|
||||
bottom: 100%;
|
||||
right: -2em;
|
||||
width: 15em;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-collapsed #menu .config-menu {
|
||||
ul {
|
||||
flex-direction: column;
|
||||
|
||||
.user-ball {
|
||||
margin-left: .25em * 1.5/2;
|
||||
margin-right: .5em + .25em * 1.5/2;
|
||||
width: 2em * 1.5/2 ;
|
||||
height: 2em * 1.5/2;
|
||||
font-size: 2/1.5em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.config-nav-item {
|
||||
padding-right: 0;
|
||||
margin-bottom: 3em;
|
||||
|
||||
.icon {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
width: 3em;
|
||||
margin: .125em .5em;
|
||||
padding: .5em .75em;
|
||||
|
||||
.state-badge {
|
||||
right: -.25em;
|
||||
bottom: -.25em;
|
||||
font-size: .75em;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flyout {
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
width: 14em;
|
||||
|
||||
&:before {
|
||||
left: -.6em;
|
||||
bottom: 1em;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flyout {
|
||||
display: none;
|
||||
position: absolute;
|
||||
border: 1px solid @gray-lighter;
|
||||
background: @body-bg-color;
|
||||
box-shadow: 0 0 1em 0 rgba(0,0,0,.25);
|
||||
z-index: 1;
|
||||
.rounded-corners();
|
||||
|
||||
a {
|
||||
font-size: 11/12em;
|
||||
padding: 0.364em 0.545em 0.364em 2em;
|
||||
line-height: 2;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: @menu-2ndlvl-highlight-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 10/12em;
|
||||
color: @text-color-light;
|
||||
letter-spacing: .1px;
|
||||
padding: 0.364em 0.545em 0.364em 0.545em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.flyout-content {
|
||||
overflow: auto;
|
||||
// Partially escape to have ems calculated
|
||||
max-height: calc(~"100vh - " 50/12em);
|
||||
padding: .5em 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Caret
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
background: @body-bg-color;
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
border-right: 1px solid @gray-lighter;
|
||||
height: 1.1em;
|
||||
width: 1.1em;
|
||||
bottom: -.6em;
|
||||
right: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent flyout to vanish on autorefresh
|
||||
#layout.config-flyout-open .config-nav-item {
|
||||
.flyout {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> button > .state-badge {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#layout.minimal-layout .config-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#layout.minimal-layout #menu {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#layout:not(.minimal-layout) #menu .primary-nav {
|
||||
.user-nav-item,
|
||||
.configuration-nav-item,
|
||||
.system-nav-item {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user