snice 2.1.5 → 2.2.1

package/components/drawer/snice-drawer.css

@@ -1,476 +0,0 @@
-: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));
-}