@paraboly/pwc-sliding-panel
Version:
A panel that slides open from the sides of the page when you click a handle.
31 lines (26 loc) • 733 B
CSS
:root {
--pwc-sliding-panel___content-width: 200px;
--pwc-sliding-panel___toggle-width: 30px;
--pwc-sliding-panel___toggle-height: 30px;
--pwc-sliding-panel___transition-duration: 0.25s;
}
pwc-sliding-panel {
display: block;
position: absolute;
transition: all var(--pwc-sliding-panel___transition-duration) ease;
box-sizing: border-box;
}
/** left **/
pwc-sliding-panel[anchor=left] {
left: calc(var(--pwc-sliding-panel___content-width) * -1);
}
pwc-sliding-panel[anchor=left].pwc-sliding-panel___active {
left: 0px;
}
/** right **/
pwc-sliding-panel[anchor=right] {
right: calc(var(--pwc-sliding-panel___content-width) * -1);
}
pwc-sliding-panel[anchor=right].pwc-sliding-panel___active {
right: 0px;
}