snice 1.14.3 → 2.1.0

package/components/drawer/snice-drawer.css

@@ -0,0 +1,476 @@
+:host {
+  --drawer-width-small: 15rem; /* 240px */
+  --drawer-width-medium: 20rem; /* 320px */
+  --drawer-width-large: 30rem; /* 480px */
+  --drawer-width-xl: 40rem; /* 640px */
+  --drawer-width-xxl: 50rem; /* 800px */
+  --drawer-width-xxxl: 60rem; /* 960px */
+  --drawer-height-small: 12.5rem; /* 200px */
+  --drawer-height-medium: 25rem; /* 400px */
+  --drawer-height-large: 37.5rem; /* 600px */
+  --drawer-height-xl: 70vh;
+  --drawer-height-xxl: 80vh;
+  --drawer-height-xxxl: 90vh;
+  --drawer-bg: white;
+  --drawer-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  --drawer-backdrop: rgba(0, 0, 0, 0.5);
+  --drawer-transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --drawer-z-index: 1000;
+  
+  display: block;
+}
+
+.drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--drawer-backdrop);
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  z-index: var(--drawer-z-index);
+  pointer-events: none;
+  visibility: hidden;
+}
+
+:host([open]) .drawer-backdrop {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+}
+
+:host([no-backdrop]) .drawer-backdrop {
+  display: none;
+}
+
+.drawer {
+  position: fixed;
+  background: var(--drawer-bg);
+  box-shadow: var(--drawer-shadow);
+  transition: var(--drawer-transition);
+  z-index: calc(var(--drawer-z-index) + 1);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+:host([open]) .drawer {
+  visibility: visible;
+}
+
+/* Default styles when no position attribute (defaults to left) */
+:host(:not([position])) .drawer {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: var(--drawer-width-medium);
+  transform: translateX(-100%);
+}
+
+:host(:not([position])[open]) .drawer {
+  transform: translateX(0);
+}
+
+/* Position: Left */
+:host([position="left"]) .drawer {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: var(--drawer-width-medium); /* Default width */
+  transform: translateX(-100%);
+}
+
+:host([position="left"][size="small"]) .drawer {
+  width: var(--drawer-width-small);
+}
+
+:host([position="left"][size="medium"]) .drawer {
+  width: var(--drawer-width-medium);
+}
+
+:host([position="left"][size="large"]) .drawer {
+  width: var(--drawer-width-large);
+}
+
+:host([position="left"][size="xl"]) .drawer {
+  width: var(--drawer-width-xl);
+}
+
+:host([position="left"][size="xxl"]) .drawer {
+  width: var(--drawer-width-xxl);
+}
+
+:host([position="left"][size="xxxl"]) .drawer {
+  width: var(--drawer-width-xxxl);
+}
+
+:host([position="left"][size="full"]) .drawer {
+  width: 100%;
+}
+
+:host([position="left"][open]) .drawer {
+  transform: translateX(0);
+}
+
+/* Position: Right */
+:host([position="right"]) .drawer {
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--drawer-width-medium); /* Default width */
+  transform: translateX(100%);
+}
+
+:host([position="right"][size="small"]) .drawer {
+  width: var(--drawer-width-small);
+}
+
+:host([position="right"][size="medium"]) .drawer {
+  width: var(--drawer-width-medium);
+}
+
+:host([position="right"][size="large"]) .drawer {
+  width: var(--drawer-width-large);
+}
+
+:host([position="right"][size="xl"]) .drawer {
+  width: var(--drawer-width-xl);
+}
+
+:host([position="right"][size="xxl"]) .drawer {
+  width: var(--drawer-width-xxl);
+}
+
+:host([position="right"][size="xxxl"]) .drawer {
+  width: var(--drawer-width-xxxl);
+}
+
+:host([position="right"][size="full"]) .drawer {
+  width: 100%;
+}
+
+:host([position="right"][open]) .drawer {
+  transform: translateX(0);
+}
+
+/* Position: Top */
+:host([position="top"]) .drawer {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--drawer-height-medium); /* Default height */
+  transform: translateY(-100%);
+}
+
+:host([position="top"][size="small"]) .drawer {
+  height: var(--drawer-height-small);
+}
+
+:host([position="top"][size="medium"]) .drawer {
+  height: var(--drawer-height-medium);
+}
+
+:host([position="top"][size="large"]) .drawer {
+  height: var(--drawer-height-large);
+}
+
+:host([position="top"][size="xl"]) .drawer {
+  height: var(--drawer-height-xl);
+}
+
+:host([position="top"][size="xxl"]) .drawer {
+  height: var(--drawer-height-xxl);
+}
+
+:host([position="top"][size="xxxl"]) .drawer {
+  height: var(--drawer-height-xxxl);
+}
+
+:host([position="top"][size="full"]) .drawer {
+  height: 100%;
+}
+
+:host([position="top"][open]) .drawer {
+  transform: translateY(0);
+}
+
+/* Position: Bottom */
+:host([position="bottom"]) .drawer {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--drawer-height-medium); /* Default height */
+  transform: translateY(100%);
+}
+
+:host([position="bottom"][size="small"]) .drawer {
+  height: var(--drawer-height-small);
+}
+
+:host([position="bottom"][size="medium"]) .drawer {
+  height: var(--drawer-height-medium);
+}
+
+:host([position="bottom"][size="large"]) .drawer {
+  height: var(--drawer-height-large);
+}
+
+:host([position="bottom"][size="xl"]) .drawer {
+  height: var(--drawer-height-xl);
+}
+
+:host([position="bottom"][size="xxl"]) .drawer {
+  height: var(--drawer-height-xxl);
+}
+
+:host([position="bottom"][size="xxxl"]) .drawer {
+  height: var(--drawer-height-xxxl);
+}
+
+:host([position="bottom"][size="full"]) .drawer {
+  height: 100%;
+}
+
+:host([position="bottom"][open]) .drawer {
+  transform: translateY(0);
+}
+
+/* Drawer Header */
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem; /* 16px 20px */
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.drawer-header:has(.drawer-title:empty):not(:has(.drawer-close)) {
+  display: none;
+}
+
+.drawer-title {
+  font-size: 1.125rem; /* 18px */
+  font-weight: 600;
+  margin: 0;
+  color: #111827;
+}
+
+.drawer-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem; /* 32px */
+  height: 2rem; /* 32px */
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #6b7280;
+  transition: all 0.2s;
+}
+
+.drawer-close:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+.drawer-close:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+/* Drawer Body */
+.drawer-body {
+  flex: 1;
+  padding: 1.25rem; /* 20px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Drawer Footer */
+.drawer-footer {
+  padding: 1rem 1.25rem; /* 16px 20px */
+  border-top: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.drawer-footer:empty {
+  display: none;
+}
+
+/* Animations */
+@media (prefers-reduced-motion: reduce) {
+  .drawer,
+  .drawer-backdrop {
+    transition: none;
+  }
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  :host([position="left"][size="medium"]) .drawer,
+  :host([position="left"][size="large"]) .drawer,
+  :host([position="left"][size="xl"]) .drawer,
+  :host([position="left"][size="xxl"]) .drawer,
+  :host([position="left"][size="xxxl"]) .drawer,
+  :host([position="right"][size="medium"]) .drawer,
+  :host([position="right"][size="large"]) .drawer,
+  :host([position="right"][size="xl"]) .drawer,
+  :host([position="right"][size="xxl"]) .drawer,
+  :host([position="right"][size="xxxl"]) .drawer {
+    width: calc(100% - 2.5rem); /* 40px */
+  }
+}
+
+/* Focus trap styles */
+.focus-trap-start,
+.focus-trap-end {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Push content mode */
+:host([push-content]) {
+  --drawer-push-amount: 0px;
+}
+
+/* Left position push amounts */
+:host([push-content][position="left"][open][size="small"]) {
+  --drawer-push-amount: var(--drawer-width-small);
+}
+
+:host([push-content][position="left"][open][size="medium"]) {
+  --drawer-push-amount: var(--drawer-width-medium);
+}
+
+:host([push-content][position="left"][open][size="large"]) {
+  --drawer-push-amount: var(--drawer-width-large);
+}
+
+:host([push-content][position="left"][open][size="xl"]) {
+  --drawer-push-amount: var(--drawer-width-xl);
+}
+
+:host([push-content][position="left"][open][size="xxl"]) {
+  --drawer-push-amount: var(--drawer-width-xxl);
+}
+
+:host([push-content][position="left"][open][size="xxxl"]) {
+  --drawer-push-amount: var(--drawer-width-xxxl);
+}
+
+:host([push-content][position="left"][open][size="full"]) {
+  --drawer-push-amount: 100vw;
+}
+
+/* Also handle when no size is specified (defaults to medium) */
+:host([push-content][position="left"][open]:not([size])) {
+  --drawer-push-amount: var(--drawer-width-medium);
+}
+
+/* Right position push amounts */
+:host([push-content][position="right"][open][size="small"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-width-small));
+}
+
+:host([push-content][position="right"][open][size="medium"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-width-medium));
+}
+
+:host([push-content][position="right"][open][size="large"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-width-large));
+}
+
+:host([push-content][position="right"][open][size="xl"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-width-xl));
+}
+
+:host([push-content][position="right"][open][size="xxl"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-width-xxl));
+}
+
+:host([push-content][position="right"][open][size="xxxl"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-width-xxxl));
+}
+
+:host([push-content][position="right"][open][size="full"]) {
+  --drawer-push-amount: -100vw;
+}
+
+:host([push-content][position="right"][open]:not([size])) {
+  --drawer-push-amount: calc(-1 * var(--drawer-width-medium));
+}
+
+/* Top position push amounts */
+:host([push-content][position="top"][open][size="small"]) {
+  --drawer-push-amount: var(--drawer-height-small);
+}
+
+:host([push-content][position="top"][open][size="medium"]) {
+  --drawer-push-amount: var(--drawer-height-medium);
+}
+
+:host([push-content][position="top"][open][size="large"]) {
+  --drawer-push-amount: var(--drawer-height-large);
+}
+
+:host([push-content][position="top"][open][size="xl"]) {
+  --drawer-push-amount: var(--drawer-height-xl);
+}
+
+:host([push-content][position="top"][open][size="xxl"]) {
+  --drawer-push-amount: var(--drawer-height-xxl);
+}
+
+:host([push-content][position="top"][open][size="xxxl"]) {
+  --drawer-push-amount: var(--drawer-height-xxxl);
+}
+
+:host([push-content][position="top"][open][size="full"]) {
+  --drawer-push-amount: 100vh;
+}
+
+:host([push-content][position="top"][open]:not([size])) {
+  --drawer-push-amount: var(--drawer-height-medium);
+}
+
+/* Bottom position push amounts */
+:host([push-content][position="bottom"][open][size="small"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-height-small));
+}
+
+:host([push-content][position="bottom"][open][size="medium"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-height-medium));
+}
+
+:host([push-content][position="bottom"][open][size="large"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-height-large));
+}
+
+:host([push-content][position="bottom"][open][size="xl"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-height-xl));
+}
+
+:host([push-content][position="bottom"][open][size="xxl"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-height-xxl));
+}
+
+:host([push-content][position="bottom"][open][size="xxxl"]) {
+  --drawer-push-amount: calc(-1 * var(--drawer-height-xxxl));
+}
+
+:host([push-content][position="bottom"][open][size="full"]) {
+  --drawer-push-amount: -100vh;
+}
+
+:host([push-content][position="bottom"][open]:not([size])) {
+  --drawer-push-amount: calc(-1 * var(--drawer-height-medium));
+}