@idds/styles 1.2.11 → 1.2.13

package/src/components/drawer.css

@@ -1,752 +0,0 @@
-/**
- * Drawer Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-"
- */
-
-.ina-drawer {
-  /* Base overlay container */
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  animation: overlayFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes overlayFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Position variants */
-.ina-drawer--position-top {
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.ina-drawer--position-bottom {
-  align-items: flex-end;
-  justify-content: center;
-}
-
-.ina-drawer--position-left {
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.ina-drawer--position-right {
-  align-items: center;
-  justify-content: flex-end;
-}
-
-/* Mobile override position adjustments - left/right become bottom-like */
-@media (max-width: 640px) {
-  .ina-drawer--position-right,
-  .ina-drawer--position-left {
-    align-items: flex-end;
-    justify-content: center;
-  }
-}
-
-/* Backdrop with smooth fade animation */
-.ina-drawer__backdrop {
-  position: absolute;
-  inset: 0;
-  background-color: rgba(31, 31, 31, 0.48);
-  backdrop-filter: blur(2px);
-  animation: backdropFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes backdropFadeIn {
-  from {
-    opacity: 0;
-    backdrop-filter: blur(0px);
-  }
-  to {
-    opacity: 1;
-    backdrop-filter: blur(2px);
-  }
-}
-
-@keyframes backdropFadeOut {
-  0% {
-    opacity: 1;
-    backdrop-filter: blur(2px);
-  }
-  100% {
-    opacity: 0;
-    backdrop-filter: blur(0px);
-  }
-}
-
-/* Backdrop closing animation */
-.ina-drawer--closing .ina-drawer__backdrop {
-  animation: backdropFadeOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-/* Main panel */
-.ina-drawer__panel {
-  position: relative;
-  background-color: var(--ina-background-primary);
-  border-radius: var(--ina-radius-lg);
-  box-shadow: var(--ina-shadow-xl);
-  display: flex;
-  flex-direction: column;
-  z-index: 10;
-  transform-origin: center;
-  transition: transform var(--ina-transition-duration-300) ease-in-out;
-}
-
-/* Position-specific animations with smooth easing */
-.ina-drawer--position-right .ina-drawer__panel {
-  animation: panelSlideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.ina-drawer--position-left .ina-drawer__panel {
-  animation: panelSlideInLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.ina-drawer--position-top .ina-drawer__panel {
-  animation: panelSlideInTop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.ina-drawer--position-bottom .ina-drawer__panel {
-  animation: panelSlideInBottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes panelSlideIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/* Position-specific slide-in animations with smooth easing */
-@keyframes panelSlideInRight {
-  0% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes panelSlideInLeft {
-  0% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes panelSlideInTop {
-  0% {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes panelSlideInBottom {
-  0% {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Position-specific panel styling */
-.ina-drawer--position-top .ina-drawer__panel {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ina-drawer--position-bottom .ina-drawer__panel {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.ina-drawer--position-left .ina-drawer__panel {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ina-drawer--position-right .ina-drawer__panel {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-/* Panel sizes */
-/* Removed old size classes - now using width variants */
-
-/* Mobile size adjustments */
-@media (max-width: 640px) {
-  .ina-drawer__panel {
-    border-radius: var(--ina-radius-lg) var(--ina-radius-lg) 0 0;
-  }
-
-  .ina-drawer__title {
-    font-size: var(--ina-font-base); /* Turun dari lg ke base */
-  }
-
-  /* Position bottom: min 280-320px (40-45%), max 90vh */
-  .ina-drawer--position-bottom .ina-drawer__panel {
-    width: 100vw;
-    min-height: 280px;
-    height: 45vh;
-    max-height: 90vh;
-    margin: 0;
-  }
-
-  /* Position top: same as bottom for mobile */
-  .ina-drawer--position-top .ina-drawer__panel {
-    width: 100vw;
-    min-height: 280px;
-    height: 45vh;
-    max-height: 90vh;
-    margin: 0;
-    border-radius: 0 0 var(--ina-radius-lg) var(--ina-radius-lg);
-  }
-
-  /* Position left/right: behave like bottom on mobile */
-  .ina-drawer--position-left .ina-drawer__panel,
-  .ina-drawer--position-right .ina-drawer__panel {
-    width: 100vw;
-    min-height: 280px;
-    height: 45vh;
-    max-height: 90vh;
-    margin: 0;
-    border-radius: var(--ina-radius-lg) var(--ina-radius-lg) 0 0;
-  }
-
-  /* Override animations for left/right to use bottom animation on mobile */
-  .ina-drawer--position-left .ina-drawer__panel,
-  .ina-drawer--position-right .ina-drawer__panel {
-    animation: panelSlideInBottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-}
-
-/* Desktop size adjustments */
-@media (min-width: 641px) {
-  /* Position top/bottom: min 40vh, max 80vh */
-  .ina-drawer--position-top .ina-drawer__panel,
-  .ina-drawer--position-bottom .ina-drawer__panel {
-    width: 100vw;
-    min-height: 40vh;
-    height: 60vh;
-    max-height: 80vh;
-  }
-
-  /* Position left/right: min 420px, max 520px (default) */
-  .ina-drawer--position-left .ina-drawer__panel,
-  .ina-drawer--position-right .ina-drawer__panel {
-    /* Default width for panels without specific width variant */
-    min-width: 420px;
-    max-width: 520px;
-    /* Full height for side panels */
-    height: 100vh;
-    max-height: 100vh;
-  }
-
-  /* Width variants for desktop - Side panels (left/right) */
-  .ina-drawer--position-left .ina-drawer__panel--width-sm,
-  .ina-drawer--position-right .ina-drawer__panel--width-sm {
-    width: 420px !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  }
-
-  .ina-drawer--position-left .ina-drawer__panel--width-md,
-  .ina-drawer--position-right .ina-drawer__panel--width-md {
-    width: 520px !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  }
-
-  /* .ina-drawer--position-left .ina-drawer__panel--width-lg,
-  .ina-drawer--position-right .ina-drawer__panel--width-lg {
-    width: 500px !important;
-    min-width: 500px !important;
-    max-width: 600px !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  }
-
-  .ina-drawer--position-left .ina-drawer__panel--width-xl,
-  .ina-drawer--position-right .ina-drawer__panel--width-xl {
-    width: 600px !important;
-    min-width: 600px !important;
-    max-width: 700px !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  }
-
-  .ina-drawer--position-left .ina-drawer__panel--width-2xl,
-  .ina-drawer--position-right .ina-drawer__panel--width-2xl {
-    width: 700px !important;
-    min-width: 700px !important;
-    max-width: 800px !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  } */
-
-  /* .ina-drawer--position-left .ina-drawer__panel--width-full,
-  .ina-drawer--position-right .ina-drawer__panel--width-full {
-    width: 80vw !important;
-    min-width: 80vw !important;
-    max-width: 80vw !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  } */
-
-  /* Width variants for desktop - Top/Bottom panels (always 100vw) */
-  .ina-drawer--position-top .ina-drawer__panel--width-sm,
-  .ina-drawer--position-top .ina-drawer__panel--width-md,
-  .ina-drawer--position-top .ina-drawer__panel--width-lg,
-  .ina-drawer--position-top .ina-drawer__panel--width-xl,
-  .ina-drawer--position-top .ina-drawer__panel--width-2xl,
-  .ina-drawer--position-top .ina-drawer__panel--width-full,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-sm,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-md,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-lg,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-xl,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-2xl,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-full {
-    width: 100vw !important;
-    min-width: 100vw !important;
-    max-width: 100vw !important;
-    height: 60vh !important;
-    max-height: 60vh !important;
-  }
-
-  /* Custom width support - for values like '40vw', '500px', etc. - Side panels */
-  /* .ina-drawer--position-left .ina-drawer__panel--width-40vw,
-  .ina-drawer--position-right .ina-drawer__panel--width-40vw {
-    width: 40vw !important;
-    min-width: 40vw;
-    max-width: 40vw;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  }
-
-  .ina-drawer--position-left .ina-drawer__panel--width-50vw,
-  .ina-drawer--position-right .ina-drawer__panel--width-50vw {
-    width: 50vw !important;
-    min-width: 50vw;
-    max-width: 50vw;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  }
-
-  .ina-drawer--position-left .ina-drawer__panel--width-60vw,
-  .ina-drawer--position-right .ina-drawer__panel--width-60vw {
-    width: 60vw !important;
-    min-width: 60vw;
-    max-width: 60vw;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  }
-
-  .ina-drawer--position-left .ina-drawer__panel--width-70vw,
-  .ina-drawer--position-right .ina-drawer__panel--width-70vw {
-    width: 70vw !important;
-    min-width: 70vw;
-    max-width: 70vw;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  } */
-
-  /* .ina-drawer--position-left .ina-drawer__panel--width-80vw,
-  .ina-drawer--position-right .ina-drawer__panel--width-80vw {
-    width: 80vw !important;
-    min-width: 80vw;
-    max-width: 80vw;
-    height: 100vh !important;
-    max-height: 100vh !important;
-  } */
-
-  /* Custom width support - Top/Bottom panels (always 100vw) */
-  /* .ina-drawer--position-top .ina-drawer__panel--width-40vw,
-  .ina-drawer--position-top .ina-drawer__panel--width-50vw,
-  .ina-drawer--position-top .ina-drawer__panel--width-60vw,
-  .ina-drawer--position-top .ina-drawer__panel--width-70vw,
-  .ina-drawer--position-top .ina-drawer__panel--width-80vw,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-40vw,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-50vw,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-60vw,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-70vw,
-  .ina-drawer--position-bottom .ina-drawer__panel--width-80vw {
-    width: 100vw !important;
-    min-width: 100vw !important;
-    max-width: 100vw !important;
-    height: 60vh !important;
-    max-height: 60vh !important;
-  } */
-}
-
-/* Header */
-.ina-drawer__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--ina-spacing-4);
-  border-bottom: 1px solid var(--ina-stroke-primary);
-  flex-shrink: 0;
-}
-
-.ina-drawer--position-top .ina-drawer__header {
-  order: 1;
-}
-
-/* Header title */
-.ina-drawer__title {
-  font-size: var(--ina-font-lg);
-  font-weight: var(--ina-font-semibold);
-  color: var(--ina-content-primary);
-  margin: 0;
-}
-
-/* Close button */
-.ina-drawer__close-button {
-  padding: var(--ina-spacing-1);
-  border: none;
-  background: none;
-  border-radius: var(--ina-radius-base);
-  cursor: pointer;
-  color: var(--ina-content-secondary);
-  transition: all var(--ina-transition-base);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-}
-
-.ina-drawer__close-button:hover {
-  background-color: var(--ina-neutral-100);
-  color: var(--ina-content-primary);
-}
-
-.ina-drawer__close-button:focus-visible {
-  outline: 2px solid var(--ina-primary-500);
-  outline-offset: 2px;
-  background-color: var(--ina-neutral-100);
-}
-
-.ina-drawer__close-icon {
-  width: 20px;
-  height: 20px;
-}
-
-/* Content area */
-.ina-drawer__content {
-  padding: var(--ina-spacing-4);
-  overflow: auto;
-  flex: 1;
-  scrollbar-width: thin;
-  scrollbar-color: var(--ina-neutral-400) var(--ina-neutral-100);
-}
-
-.ina-drawer__content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.ina-drawer__content::-webkit-scrollbar-track {
-  background: var(--ina-neutral-100);
-}
-
-.ina-drawer__content::-webkit-scrollbar-thumb {
-  background-color: var(--ina-neutral-400);
-  border-radius: var(--ina-radius-full);
-}
-
-.ina-drawer__content::-webkit-scrollbar-thumb:hover {
-  background-color: var(--ina-neutral-500);
-}
-
-/* Footer */
-.ina-drawer__footer {
-  padding: var(--ina-spacing-4);
-  border-top: 1px solid var(--ina-stroke-primary);
-  flex-shrink: 0;
-}
-
-.ina-drawer--position-top .ina-drawer__footer {
-  order: 2;
-}
-
-/* Footer positioning */
-.ina-drawer__footer--position-left {
-  display: flex;
-  justify-content: flex-start;
-  gap: var(--ina-spacing-2);
-}
-
-.ina-drawer__footer--position-right {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--ina-spacing-2);
-}
-
-.ina-drawer__footer--position-center {
-  display: flex;
-  justify-content: center;
-  gap: var(--ina-spacing-2);
-}
-
-.ina-drawer__footer--position-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* Animation states */
-.ina-drawer--closing {
-  animation: overlayFadeOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-@keyframes overlayFadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-/* Position-specific closing animations with smooth easing */
-.ina-drawer--closing.ina-drawer--position-right .ina-drawer__panel {
-  animation: panelSlideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.ina-drawer--closing.ina-drawer--position-left .ina-drawer__panel {
-  animation: panelSlideOutLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.ina-drawer--closing.ina-drawer--position-top .ina-drawer__panel {
-  animation: panelSlideOutTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.ina-drawer--closing.ina-drawer--position-bottom .ina-drawer__panel {
-  animation: panelSlideOutBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-/* Mobile: left/right use bottom closing animation */
-@media (max-width: 640px) {
-  .ina-drawer--closing.ina-drawer--position-left .ina-drawer__panel,
-  .ina-drawer--closing.ina-drawer--position-right .ina-drawer__panel {
-    animation: panelSlideOutBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-}
-
-@keyframes panelSlideOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-/* Position-specific slide-out animations with smooth easing */
-@keyframes panelSlideOutRight {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-
-@keyframes panelSlideOutLeft {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
-
-@keyframes panelSlideOutTop {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes panelSlideOutBottom {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-}
-
-/* Position-specific animations - Fixed positioning */
-.ina-drawer--position-right .ina-drawer__panel {
-  /* Panel should be visible by default, not hidden */
-  transform: translateX(0);
-}
-
-.ina-drawer--position-left .ina-drawer__panel {
-  /* Panel should be visible by default, not hidden */
-  transform: translateX(0);
-}
-
-.ina-drawer--position-top .ina-drawer__panel {
-  /* Panel should be visible by default, not hidden */
-  transform: translateY(0);
-}
-
-.ina-drawer--position-bottom .ina-drawer__panel {
-  /* Panel should be visible by default, not hidden */
-  transform: translateY(0);
-}
-
-/* Mobile: left/right use bottom transform */
-@media (max-width: 640px) {
-  .ina-drawer--position-left .ina-drawer__panel,
-  .ina-drawer--position-right .ina-drawer__panel {
-    transform: translateY(0);
-  }
-}
-
-/* Variant styles */
-.ina-drawer--variant-glass .ina-drawer__panel {
-  background-color: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-}
-
-.ina-drawer--variant-floating .ina-drawer__panel {
-  margin: var(--ina-spacing-8);
-  border-radius: var(--ina-radius-xl);
-  box-shadow: var(--ina-shadow-2xl);
-}
-
-.ina-drawer--variant-minimal .ina-drawer__panel {
-  box-shadow: none;
-  border: 1px solid var(--ina-stroke-primary);
-}
-
-/* Size variants with max-width */
-.ina-drawer__panel--fullscreen {
-  width: 100vw !important;
-  height: 100vh !important;
-  max-width: 100vw !important;
-  max-height: 100vh !important;
-  margin: 0 !important;
-  border-radius: 0 !important;
-}
-
-/* Dark mode support */
-/* @media (prefers-color-scheme: dark) {
-  .ina-drawer__backdrop {
-    background-color: rgba(0, 0, 0, 0.7);
-  }
-
-  .ina-drawer__panel {
-    background-color: var(--ina-background-dark-primary);
-    border-color: var(--ina-stroke-primary-dark);
-  }
-
-  .ina-drawer__header {
-    border-color: var(--ina-stroke-primary-dark);
-  }
-
-  .ina-drawer__title {
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-drawer__close-button {
-    color: var(--ina-content-dark-secondary);
-  }
-
-  .ina-drawer__close-button:hover {
-    background-color: var(--ina-neutral-800);
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-drawer__footer {
-    border-color: var(--ina-stroke-primary-dark);
-  }
-
-  .ina-drawer--variant-glass .ina-drawer__panel {
-    background-color: rgba(0, 0, 0, 0.95);
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  .ina-drawer--variant-minimal .ina-drawer__panel {
-    border-color: var(--ina-stroke-primary-dark);
-  }
-} */
-
-/* Accessibility improvements */
-.ina-drawer__close-button:focus-visible {
-  outline: 2px solid var(--ina-primary-500);
-  outline-offset: 2px;
-}
-
-/* High contrast mode */
-@media (prefers-contrast: high) {
-  .ina-drawer__panel {
-    border: 2px solid var(--ina-content-primary);
-  }
-
-  .ina-drawer__header,
-  .ina-drawer__footer {
-    border-width: 2px;
-  }
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .ina-drawer,
-  .ina-drawer__backdrop,
-  .ina-drawer__panel,
-  .ina-drawer__close-button {
-    animation: none;
-    transition: none;
-  }
-
-  .ina-drawer__panel {
-    transform: none !important;
-  }
-}
-
-/* Print styles */
-@media print {
-  .ina-drawer {
-    display: none;
-  }
-}