a new start

packages/hydecorp/drawer/src/styles.ts

@@ -0,0 +1,104 @@
+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;
+    }
+  }
+`;