zenkit-css 1.0.0

package/scss/components/_drawer.scss

@@ -0,0 +1,485 @@
+// ========================================
+// ZenKit - Drawer Component
+// Side panel / Sliding panel
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Drawer Wrapper
+// ----------------------------------------
+.drawer-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: $z-modal;
+  display: none;
+  pointer-events: none;
+
+  &.is-open {
+    display: block;
+    pointer-events: auto;
+  }
+}
+
+// ----------------------------------------
+// Drawer Mask / Backdrop
+// ----------------------------------------
+.drawer-mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+
+  .is-open & {
+    opacity: 1;
+  }
+}
+
+// ----------------------------------------
+// Drawer Content Wrapper
+// ----------------------------------------
+.drawer-content-wrapper {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  max-height: 100%;
+  background-color: var(--bg-primary);
+  box-shadow: $shadow-xl;
+  transition: transform 0.3s ease;
+}
+
+// ----------------------------------------
+// Drawer Placements
+// ----------------------------------------
+// Right (Default)
+.drawer-right {
+  .drawer-content-wrapper {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 378px;
+    transform: translateX(100%);
+  }
+
+  &.is-open .drawer-content-wrapper {
+    transform: translateX(0);
+  }
+}
+
+// Left
+.drawer-left {
+  .drawer-content-wrapper {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 378px;
+    transform: translateX(-100%);
+  }
+
+  &.is-open .drawer-content-wrapper {
+    transform: translateX(0);
+  }
+}
+
+// Top
+.drawer-top {
+  .drawer-content-wrapper {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 378px;
+    transform: translateY(-100%);
+  }
+
+  &.is-open .drawer-content-wrapper {
+    transform: translateY(0);
+  }
+}
+
+// Bottom
+.drawer-bottom {
+  .drawer-content-wrapper {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 378px;
+    transform: translateY(100%);
+  }
+
+  &.is-open .drawer-content-wrapper {
+    transform: translateY(0);
+  }
+}
+
+// ----------------------------------------
+// Drawer Header
+// ----------------------------------------
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.drawer-header-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.drawer-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.drawer-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: $border-radius-sm;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+
+  &:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
+  }
+}
+
+.drawer-extra {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+// ----------------------------------------
+// Drawer Body
+// ----------------------------------------
+.drawer-body {
+  flex: 1;
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+// ----------------------------------------
+// Drawer Footer
+// ----------------------------------------
+.drawer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  padding: 0.75rem 1.5rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.drawer-footer-left {
+  justify-content: flex-start;
+}
+
+.drawer-footer-center {
+  justify-content: center;
+}
+
+.drawer-footer-space-between {
+  justify-content: space-between;
+}
+
+// ----------------------------------------
+// Drawer Sizes
+// ----------------------------------------
+.drawer-sm {
+  .drawer-content-wrapper {
+    width: 280px;
+  }
+
+  &.drawer-top .drawer-content-wrapper,
+  &.drawer-bottom .drawer-content-wrapper {
+    width: auto;
+    height: 280px;
+  }
+}
+
+.drawer-lg {
+  .drawer-content-wrapper {
+    width: 560px;
+  }
+
+  &.drawer-top .drawer-content-wrapper,
+  &.drawer-bottom .drawer-content-wrapper {
+    width: auto;
+    height: 560px;
+  }
+}
+
+.drawer-xl {
+  .drawer-content-wrapper {
+    width: 800px;
+  }
+
+  &.drawer-top .drawer-content-wrapper,
+  &.drawer-bottom .drawer-content-wrapper {
+    width: auto;
+    height: 80vh;
+  }
+}
+
+.drawer-full {
+  .drawer-content-wrapper {
+    width: 100%;
+  }
+
+  &.drawer-top .drawer-content-wrapper,
+  &.drawer-bottom .drawer-content-wrapper {
+    height: 100%;
+  }
+}
+
+// ----------------------------------------
+// Drawer No Mask
+// ----------------------------------------
+.drawer-no-mask {
+  .drawer-mask {
+    display: none;
+  }
+}
+
+// ----------------------------------------
+// Drawer Push Mode
+// ----------------------------------------
+// The main content is pushed by JS/external styles
+
+// ----------------------------------------
+// Drawer Nested / Multi-level
+// ----------------------------------------
+.drawer-nested {
+  .drawer-content-wrapper {
+    box-shadow: -6px 0 16px -8px rgba(0, 0, 0, 0.08),
+                -9px 0 28px 0 rgba(0, 0, 0, 0.05),
+                -12px 0 48px 16px rgba(0, 0, 0, 0.03);
+  }
+}
+
+// ----------------------------------------
+// Drawer Form Layout
+// ----------------------------------------
+.drawer-form {
+  .drawer-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+.drawer-form-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.drawer-form-full {
+  grid-column: 1 / -1;
+}
+
+// ----------------------------------------
+// Drawer Section
+// ----------------------------------------
+.drawer-section {
+  margin-bottom: 1.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.drawer-section-title {
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.drawer-section-content {
+  padding-left: 0.5rem;
+}
+
+// ----------------------------------------
+// Drawer Tabs
+// ----------------------------------------
+.drawer-tabs {
+  display: flex;
+  gap: 0;
+  padding: 0 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+  margin: -1rem -1.5rem 1rem;
+}
+
+.drawer-tab {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  margin-bottom: -1px;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+
+  &.is-active {
+    color: var(--primary);
+    border-bottom-color: var(--primary);
+    font-weight: 500;
+  }
+}
+
+// ----------------------------------------
+// Drawer No Header
+// ----------------------------------------
+.drawer-no-header {
+  .drawer-header {
+    display: none;
+  }
+
+  .drawer-close {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 1;
+  }
+}
+
+// ----------------------------------------
+// Drawer Loading
+// ----------------------------------------
+.drawer-loading {
+  .drawer-body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.drawer-spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid var(--border-color);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+// ----------------------------------------
+// Drawer Bordered
+// ----------------------------------------
+.drawer-bordered {
+  .drawer-content-wrapper {
+    border-left: 1px solid var(--border-color);
+  }
+
+  &.drawer-left .drawer-content-wrapper {
+    border-left: none;
+    border-right: 1px solid var(--border-color);
+  }
+
+  &.drawer-top .drawer-content-wrapper {
+    border-left: none;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  &.drawer-bottom .drawer-content-wrapper {
+    border-left: none;
+    border-top: 1px solid var(--border-color);
+  }
+}
+
+// ----------------------------------------
+// Drawer Dark Theme
+// ----------------------------------------
+.drawer-dark {
+  .drawer-content-wrapper {
+    background-color: #1f1f1f;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .drawer-title {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .drawer-close {
+    color: rgba(255, 255, 255, 0.45);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.85);
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .drawer-header,
+  .drawer-footer {
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+// ----------------------------------------
+// Drawer Responsive
+// ----------------------------------------
+@media (max-width: 575.98px) {
+  .drawer-right .drawer-content-wrapper,
+  .drawer-left .drawer-content-wrapper {
+    width: 100% !important;
+  }
+
+  .drawer-responsive-bottom {
+    &.drawer-right,
+    &.drawer-left {
+      .drawer-content-wrapper {
+        top: auto;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 80vh;
+        transform: translateY(100%);
+        border-radius: $border-radius-lg $border-radius-lg 0 0;
+      }
+
+      &.is-open .drawer-content-wrapper {
+        transform: translateY(0);
+      }
+    }
+  }
+}
+
+// ----------------------------------------
+// Drawer Handle (for swipe)
+// ----------------------------------------
+.drawer-handle {
+  width: 32px;
+  height: 4px;
+  margin: 0.5rem auto;
+  background-color: var(--border-color);
+  border-radius: 2px;
+}