@idds/styles 1.2.11 → 1.2.12

package/src/components/skeleton.css

@@ -1,488 +0,0 @@
-/**
- * Skeleton Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-"
- */
-
-.ina-skeleton {
-  /* Base skeleton styling */
-  position: relative;
-  overflow: hidden;
-  background-color: var(--ina-neutral-200);
-  animation: skeletonPulse 2s ease-in-out infinite;
-}
-
-@keyframes skeletonPulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* Width variants */
-.ina-skeleton--width-xs {
-  width: 32px;
-}
-
-.ina-skeleton--width-sm {
-  width: 64px;
-}
-
-.ina-skeleton--width-md {
-  width: 128px;
-}
-
-.ina-skeleton--width-lg {
-  width: 256px;
-}
-
-.ina-skeleton--width-xl {
-  width: 512px;
-}
-
-.ina-skeleton--width-full {
-  width: 100%;
-}
-
-/* Height variants */
-.ina-skeleton--height-xs {
-  height: 8px;
-}
-
-.ina-skeleton--height-sm {
-  height: 16px;
-}
-
-.ina-skeleton--height-md {
-  height: 32px;
-}
-
-.ina-skeleton--height-lg {
-  height: 64px;
-}
-
-.ina-skeleton--height-xl {
-  height: 128px;
-}
-
-.ina-skeleton--height-full {
-  height: 100%;
-}
-
-/* Border radius variants */
-.ina-skeleton--rounded-none {
-  border-radius: 0;
-}
-
-.ina-skeleton--rounded-xs {
-  border-radius: var(--ina-radius-xs);
-}
-
-.ina-skeleton--rounded-sm {
-  border-radius: var(--ina-radius-sm);
-}
-
-.ina-skeleton--rounded-md {
-  border-radius: var(--ina-radius-md);
-}
-
-.ina-skeleton--rounded-lg {
-  border-radius: var(--ina-radius-lg);
-}
-
-.ina-skeleton--rounded-full {
-  border-radius: var(--ina-radius-full);
-}
-
-/* Color variants */
-.ina-skeleton--color-gray {
-  background-color: var(--ina-neutral-200);
-}
-
-.ina-skeleton--color-blue {
-  background-color: var(--ina-primary-100);
-}
-
-.ina-skeleton--color-green {
-  background-color: var(--ina-positive-100);
-}
-
-.ina-skeleton--color-red {
-  background-color: var(--ina-negative-100);
-}
-
-.ina-skeleton--color-yellow {
-  background-color: var(--ina-warning-100);
-}
-
-/* Animation styles */
-.ina-skeleton--animation-pulse {
-  animation: skeletonPulse 2s ease-in-out infinite;
-}
-
-.ina-skeleton--animation-wave {
-  animation: skeletonWave 1.5s ease-in-out infinite;
-}
-
-@keyframes skeletonWave {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-.ina-skeleton--animation-fade {
-  animation: skeletonFade 1.8s ease-in-out infinite;
-}
-
-@keyframes skeletonFade {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-
-/* Wave effect overlay */
-.ina-skeleton__wave {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.6) 50%,
-    transparent 100%
-  );
-  animation: skeletonWave 1.5s ease-in-out infinite;
-}
-
-.ina-skeleton--animation-wave .ina-skeleton__wave {
-  display: block;
-}
-
-/* Glow effect */
-.ina-skeleton--effect-glow {
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
-}
-
-/* Gradient variants */
-.ina-skeleton--gradient-linear {
-  background: linear-gradient(
-    90deg,
-    var(--ina-neutral-200) 25%,
-    var(--ina-neutral-300) 50%,
-    var(--ina-neutral-200) 75%
-  );
-  background-size: 200% 100%;
-  animation: skeletonGradient 1.5s infinite ease-out;
-}
-
-@keyframes skeletonGradient {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.ina-skeleton--gradient-radial {
-  background: radial-gradient(
-    circle at center,
-    var(--ina-neutral-200) 40%,
-    var(--ina-neutral-300) 100%
-  );
-}
-
-/* Shape variants */
-.ina-skeleton--shape-circle {
-  border-radius: var(--ina-radius-full);
-}
-
-.ina-skeleton--shape-rectangle {
-  border-radius: var(--ina-radius-md);
-}
-
-.ina-skeleton--shape-square {
-  border-radius: var(--ina-radius-base);
-}
-
-/* Text skeleton specific styling */
-.ina-skeleton--text {
-  border-radius: var(--ina-radius-base);
-  height: 1em;
-  width: 100%;
-}
-
-.ina-skeleton--text--sm {
-  height: 0.875em;
-}
-
-.ina-skeleton--text--base {
-  height: 1em;
-}
-
-.ina-skeleton--text--lg {
-  height: 1.125em;
-}
-
-/* Block skeleton for rectangular shapes */
-.ina-skeleton--block {
-  border-radius: var(--ina-radius-md);
-}
-
-/* Avatar skeleton */
-.ina-skeleton--avatar {
-  border-radius: var(--ina-radius-full);
-  aspect-ratio: 1;
-}
-
-.ina-skeleton--avatar--sm {
-  width: 32px;
-  height: 32px;
-}
-
-.ina-skeleton--avatar--md {
-  width: 48px;
-  height: 48px;
-}
-
-.ina-skeleton--avatar--lg {
-  width: 64px;
-  height: 64px;
-}
-
-/* Button skeleton */
-.ina-skeleton--button {
-  border-radius: var(--ina-radius-md);
-  height: 40px;
-  width: 120px;
-}
-
-.ina-skeleton--button--sm {
-  height: 32px;
-  width: 100px;
-}
-
-.ina-skeleton--button--lg {
-  height: 48px;
-  width: 140px;
-}
-
-/* Card skeleton */
-.ina-skeleton--card {
-  border-radius: var(--ina-radius-lg);
-  width: 300px;
-  height: 200px;
-}
-
-/* Loading state */
-.ina-skeleton--loading {
-  pointer-events: none;
-  user-select: none;
-}
-
-/* Skeleton group/spinner */
-.ina-skeleton__group {
-  display: flex;
-  gap: var(--ina-spacing-3);
-  align-items: center;
-}
-
-.ina-skeleton__spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--ina-neutral-300);
-  border-top-color: var(--ina-primary-500);
-  border-radius: var(--ina-radius-full);
-  animation: skeletonSpin 1s linear infinite;
-}
-
-@keyframes skeletonSpin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Compound skeletons */
-.ina-skeleton-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ina-spacing-3);
-}
-
-.ina-skeleton-group--horizontal {
-  flex-direction: row;
-  align-items: center;
-}
-
-.ina-skeleton-group__item {
-  flex-shrink: 0;
-}
-
-.ina-skeleton-group__item--flex {
-  flex: 1;
-}
-
-/* Custom sizes with CSS variables */
-.ina-skeleton--custom-size {
-  width: var(--skeleton-width, 100%);
-  height: var(--skeleton-height, auto);
-}
-
-/* Responsive behavior */
-@media (max-width: 640px) {
-  .ina-skeleton--responsive-full {
-    width: 100%;
-  }
-
-  .ina-skeleton-group--horizontal {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .ina-skeleton--avatar--lg {
-    width: 48px;
-    height: 48px;
-  }
-
-  .ina-skeleton--card {
-    width: 100%;
-    max-width: 300px;
-  }
-}
-
-/* Dark mode support */
-/* @media (prefers-color-scheme: dark) {
-  .ina-skeleton {
-    background-color: var(--ina-neutral-700);
-  }
-
-  .ina-skeleton--color-gray {
-    background-color: var(--ina-neutral-700);
-  }
-
-  .ina-skeleton--color-blue {
-    background-color: var(--ina-primary-900);
-  }
-
-  .ina-skeleton--color-green {
-    background-color: var(--ina-positive-900);
-  }
-
-  .ina-skeleton--color-red {
-    background-color: var(--ina-negative-900);
-  }
-
-  .ina-skeleton--color-yellow {
-    background-color: var(--ina-warning-900);
-  }
-
-  .ina-skeleton--gradient-linear {
-    background: linear-gradient(
-      90deg,
-      var(--ina-neutral-700) 25%,
-      var(--ina-neutral-600),
-      var(--ina-neutral-700) 75%
-    );
-    background-size: 200% 100%;
-  }
-
-  .ina-skeleton--gradient-radial {
-    background: radial-gradient(
-      circle at center,
-      var(--ina-neutral-700) 40%,
-      var(--ina-neutral-600) 100%
-    );
-  }
-
-  .ina-skeleton__wave {
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.1) 50%,
-      transparent 100%
-    );
-  }
-
-  .ina-skeleton__spinner {
-    border-color: var(--ina-neutral-600);
-    border-top-color: var(--ina-primary-400);
-  }
-} */
-
-/* High contrast mode */
-@media (prefers-contrast: high) {
-  .ina-skeleton {
-    border: 1px solid var(--ina-content-primary);
-  }
-
-  .ina-skeleton--animation-pulse,
-  .ina-skeleton--animation-wave,
-  .ina-skeleton--animation-fade {
-    animation-duration: 0.1s;
-  }
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .ina-skeleton,
-  .ina-skeleton--animation-pulse,
-  .ina-skeleton--animation-wave,
-  .ina-skeleton--animation-fade,
-  .ina-skeleton__wave,
-  .ina-skeleton__spinner,
-  .ina-skeleton--gradient-linear {
-    animation: none;
-  }
-
-  .ina-skeleton {
-    opacity: 0.7;
-  }
-
-  .ina-skeleton__wave {
-    display: none;
-  }
-}
-
-/* Accessibility improvements */
-.ina-skeleton[aria-hidden='true'] {
-  visibility: hidden;
-}
-
-/* Print styles */
-@media print {
-  .ina-skeleton {
-    display: none;
-  }
-}
-
-/* Custom shimmer implementation */
-.ina-skeleton--shimmer {
-  background: linear-gradient(
-    270deg,
-    var(--ina-neutral-100) 0%,
-    var(--ina-neutral-300) 50%,
-    var(--ina-neutral-100) 100%
-  );
-  background-size: 200% 100%;
-  animation: skeletonShimmer 1.8s ease-in-out infinite;
-}
-
-@keyframes skeletonShimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}