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

menu.less: Make caret appear connected to main viewport

Browse Source 
(cherry picked from commit d56757f20f37c2c435476f8e726416930009c647)
This commit is contained in:
Florian Strohmaier 2024-11-04 10:35:25 +01:00 committed by Johannes Meyer
parent 8655bffe87
commit 3ed613b1d2
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -123,6 +123,7 @@
height: 1.25em; height: 1.25em;
width: 1.25em; width: 1.25em;
top: ~"calc(50% - (1.25em / 2))"; top: ~"calc(50% - (1.25em / 2))";
z-index: 10;
} }
} }
@ -130,6 +131,7 @@
// Collapse menu by default // Collapse menu by default
display: none; display: none;
line-height: 1.833em; // 22px line-height: 1.833em; // 22px
z-index: 12;
> a { > a {
color: @menu-2ndlvl-color; color: @menu-2ndlvl-color;
@ -263,10 +265,12 @@
padding: @vertical-padding 0; padding: @vertical-padding 0;
width: 14em; width: 14em;
position: fixed; position: fixed;
z-index: 1; z-index: 11;
margin-top: -1px; // Align content with the menu item, not its border margin-top: -1px; // Align content with the menu item, not its border
&::after { &::after {
--caretSide: 1.25em;
.transform(rotate(45deg)); .transform(rotate(45deg));
background-color: @body-bg-color; background-color: @body-bg-color;
@ -274,12 +278,11 @@
border-left: 1px solid @gray-light; border-left: 1px solid @gray-light;
content: ""; content: "";
display: block; display: block;
height: 1.1em; height: var(--caretSide);
width: 1.1em; width: var(--caretSide);
position: absolute; position: absolute;
top: ~"calc((@{nav-item-height} / 2) - (1.1em / 2))"; top: ~"calc(@{nav-item-height} / 2 - var(--caretSide) / 2)";
left: -.6em; left: ~"calc(-1 * var(--caretSide) / 2 - 1px)";
z-index: -1;
} }
&.bottom-up { &.bottom-up {
@ -287,7 +290,7 @@
margin-top: 1px; margin-top: 1px;
&::after { &::after {
top: ~"calc(var(--caretY) - (@{nav-item-height} / 2) - (1.1em / 2))"; top: ~"calc(var(--caretY) - (@{nav-item-height} / 2) - (var(--caretSide) / 2))";
} }
} }