TelegramPWA/src/components/middle/MiddleHeaderPanes.module.scss

37 lines
836 B
SCSS

.root {
position: absolute;
top: 3.5rem;
left: 0;
width: 100%;
z-index: var(--z-middle-header);
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: width var(--layer-transition);
@media (min-width: 1276px) {
:global(#Main.right-column-open) & {
width: calc(100% - var(--right-column-width));
}
}
/* stylelint-disable-next-line plugin/selector-tag-no-without-class */
> div:last-child {
box-shadow: 0 2px 2px var(--color-light-shadow);
}
// In case if there are no children, we need to have a shadow
&::before {
content: '';
position: absolute;
pointer-events: none;
top: -2px;
height: 2px;
left: 0;
right: 0;
box-shadow: 0 2px 2px var(--color-light-shadow);
z-index: -100; // Hide behind the children
}
}