Files
BetterSEQTA-Plus/src/css/injected/sidebar-animation.scss
T

54 lines
1.8 KiB
SCSS

#menu ul:has(li.hasChildren.active) li.hasChildren.active {
box-shadow: inset 0px 0 var(--item-colour, transparent) !important;
background: transparent !important;
}
#menu ul:not(:has(li.hasChildren.active)) {
overflow-y: scroll !important;
}
#menu > ul:has(li.hasChildren.active) > li::before,
#menu > ul ul:has(li.hasChildren.active) > li::before,
#menu > ul:has(li.hasChildren.active) > li > label,
#menu > ul:has(li.hasChildren.active) > li > svg,
#menu > ul ul:has(li.hasChildren.active) > li > label,
#menu > ul ul:has(li.hasChildren.active) > li > svg {
transform: translateX(-320px);
}
#menu li.hasChildren:not(.active) li .sub {
display: none; // improves performance
}
.sub .sub {
top: 0 !important;
padding-top: 2px;
}
.sub:has(ul > li.hasChildren.active) > .nav > .back {
display: none !important;
}
#menu ul > li > label,
#menu ul > li > svg {
transition: transform 0.3s ease;
}
#menu .sub {
transition: transform 0.3s ease, left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#menu > ul:has(li.hasChildren.active) > li.active {
background: transparent !important;
}
/* Icon-only collapsed: submenu slides over narrow icons */
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li::before,
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li::before,
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > label,
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > svg,
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > label,
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > svg {
transform: translateX(-70px);
}