105 lines
2.1 KiB
TypeScript
105 lines
2.1 KiB
TypeScript
import { css } from "lit";
|
|
|
|
export const styles = css`
|
|
@media screen {
|
|
:host {
|
|
touch-action: pan-x;
|
|
}
|
|
|
|
.full-screen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.full-height {
|
|
position: fixed;
|
|
top: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
.peek {
|
|
left: 0;
|
|
width: var(--hy-drawer-peek-width, 0px);
|
|
visibility: hidden;
|
|
z-index: calc(var(--hy-drawer-z-index, 100) - 1);
|
|
}
|
|
|
|
.scrim {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 10vh;
|
|
width: 10vw;
|
|
transform: scale(10);
|
|
transform-origin: top left;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
background: var(--hy-drawer-scrim-background, rgba(0, 0, 0, 0.5));
|
|
z-index: var(--hy-drawer-z-index, 100);
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.range {
|
|
position: fixed;
|
|
top: 0;
|
|
height: 100vh;
|
|
z-index: calc(var(--hy-drawer-z-index, 100) + 1);
|
|
}
|
|
|
|
.grabbing-screen {
|
|
cursor: grabbing;
|
|
z-index: calc(var(--hy-drawer-z-index, 100) + 2);
|
|
}
|
|
|
|
.wrapper {
|
|
width: var(--hy-drawer-width, 300px);
|
|
background: var(--hy-drawer-background, inherit);
|
|
box-shadow: var(--hy-drawer-box-shadow, 0 0 15px rgba(0, 0, 0, 0.25));
|
|
z-index: calc(var(--hy-drawer-z-index, 100) + 3);
|
|
contain: strict;
|
|
}
|
|
|
|
.wrapper.left {
|
|
left: calc(-1 * var(--hy-drawer-width, 300px) + var(--hy-drawer-peek-width, 0px));
|
|
}
|
|
|
|
.wrapper.right {
|
|
right: calc(-1 * var(--hy-drawer-width, 300px) + var(--hy-drawer-peek-width, 0px));
|
|
}
|
|
|
|
.wrapper > .overflow {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.grab {
|
|
cursor: move;
|
|
cursor: grab;
|
|
}
|
|
|
|
.grabbing {
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.scrim {
|
|
display: none !important;
|
|
}
|
|
|
|
.wrapper {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
`;
|