menu.less: Make caret appear connected to main viewport

(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

View File

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