@zengrid/core 1.2.1 → 1.3.0

package/dist/src/features/loading/loading.styles.css

@@ -1,342 +1,346 @@
-/**
- * Loading Indicator Styles
- *
- * Provides styles for 4 loading templates with animations:
- * 1. Simple - Basic text
- * 2. Animated - Rotating dots
- * 3. Modern - Circular loader
- * 4. Skeleton - Shimmer screen
- */
-
-/* ========================================
-   Base Loading Styles
-   ======================================== */
-
-.zg-loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  font-family: var(--zg-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
-  font-size: var(--zg-font-size, 14px);
-  color: var(--zg-text-primary, #333);
-  user-select: none;
-  pointer-events: all;
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.zg-loading-active {
-  opacity: 1;
-}
-
-.zg-loading-hiding {
-  opacity: 0;
-}
-
-/* Add backdrop to non-skeleton templates */
-.zg-loading:not(.zg-loading-skeleton)::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--zg-bg-primary, rgba(255, 255, 255, 0.85));
-  opacity: 0.85;
-  backdrop-filter: blur(3px);
-  z-index: -1;
-}
-
-/* Position variants */
-.zg-loading-top {
-  align-items: flex-start;
-  padding-top: 20px;
-}
-
-.zg-loading-center {
-  align-items: center;
-}
-
-.zg-loading-bottom {
-  align-items: flex-end;
-  padding-bottom: 20px;
-}
-
-.zg-loading-message {
-  margin-top: 12px;
-  text-align: center;
-  font-size: 14px;
-  color: var(--zg-text-secondary, #666);
-}
-
-/* ========================================
-   Template 1: Simple
-   ======================================== */
-
-.zg-loading-simple {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px 32px;
-  background: var(--zg-bg-primary, rgba(255, 255, 255, 0.95));
-  border-radius: 8px;
-  box-shadow: var(--zg-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
-  backdrop-filter: blur(4px);
-}
-
-.zg-loading-simple .zg-loading-message {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-/* ========================================
-   Template 2: Animated - Rotating Dots
-   ======================================== */
-
-.zg-loading-animated {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 24px 32px;
-  background: var(--zg-bg-primary, rgba(255, 255, 255, 0.95));
-  border-radius: 8px;
-  box-shadow: var(--zg-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
-  backdrop-filter: blur(4px);
-}
-
-.zg-loading-spinner {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-}
-
-.zg-loading-dot {
-  width: 12px;
-  height: 12px;
-  background: var(--zg-border-active, #2196f3);
-  border-radius: 50%;
-  animation: zg-dot-bounce 1.4s infinite ease-in-out both;
-}
-
-.zg-loading-dot:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.zg-loading-dot:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-.zg-loading-dot:nth-child(3) {
-  animation-delay: 0s;
-}
-
-@keyframes zg-dot-bounce {
-  0%, 80%, 100% {
-    transform: scale(0.6);
-    opacity: 0.5;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* ========================================
-   Template 3: Modern - Circular Loader
-   ======================================== */
-
-.zg-loading-modern {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 24px 32px;
-  background: var(--zg-bg-primary, rgba(255, 255, 255, 0.95));
-  border-radius: 8px;
-  box-shadow: var(--zg-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
-  backdrop-filter: blur(4px);
-}
-
-.zg-loading-spinner-circle {
-  width: 48px;
-  height: 48px;
-}
-
-.zg-loading-svg {
-  width: 100%;
-  height: 100%;
-  animation: zg-rotate 2s linear infinite;
-}
-
-.zg-loading-circle-path {
-  stroke: var(--zg-border-active, #2196f3);
-  stroke-width: 3;
-  stroke-linecap: round;
-  stroke-dasharray: 90, 150;
-  stroke-dashoffset: 0;
-  animation: zg-dash 1.5s ease-in-out infinite;
-}
-
-@keyframes zg-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes zg-dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
-
-/* ========================================
-   Template 4: Skeleton - Shimmer Screen
-   ======================================== */
-
-.zg-loading-skeleton {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: var(--zg-bg-secondary, rgba(248, 248, 248, 0.98));
-  padding: 0;
-  box-shadow: none;
-}
-
-.zg-loading-skeleton-grid {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.zg-loading-skeleton-row {
-  display: flex;
-  height: 32px;
-  border-bottom: 1px solid var(--zg-border-color, #e0e0e0);
-}
-
-.zg-loading-skeleton-cell {
-  flex: 1;
-  min-width: 100px;
-  background: var(--zg-bg-secondary, #f5f5f5);
-  border-right: 1px solid var(--zg-border-color, #e0e0e0);
-  overflow: hidden;
-  position: relative;
-  padding: 8px;
-}
-
-.zg-loading-skeleton-cell::before {
-  content: '';
-  display: block;
-  height: 12px;
-  background: var(--zg-border-color, #e0e0e0);
-  border-radius: 2px;
-  width: 80%;
-}
-
-.zg-loading-skeleton-shimmer {
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.8) 50%,
-    transparent 100%
-  );
-  animation: zg-shimmer 1.5s infinite;
-}
-
-@keyframes zg-shimmer {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-
-/* ========================================
-   Responsive Design
-   ======================================== */
-
-@media (max-width: 768px) {
-  .zg-loading-animated,
-  .zg-loading-modern,
-  .zg-loading-simple {
-    padding: 16px;
-  }
-
-  .zg-loading-message {
-    font-size: 13px;
-  }
-
-  .zg-loading-skeleton-grid {
-    padding: 12px;
-  }
-
-  .zg-loading-skeleton-row {
-    gap: 8px;
-  }
-
-  .zg-loading-skeleton-cell {
-    height: 32px;
-  }
-}
-
-/* ========================================
-   Accessibility
-   ======================================== */
-
-/* Screen reader only text */
-.zg-loading[aria-live="polite"]::before {
-  content: attr(aria-label);
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .zg-loading,
-  .zg-loading-dot,
-  .zg-loading-svg,
-  .zg-loading-circle-path,
-  .zg-loading-skeleton-shimmer,
-  .zg-loading-progress-fill {
-    animation: none !important;
-    transition: none !important;
-  }
-
-  .zg-loading-spinner-circle {
-    opacity: 0.7;
-  }
-}
+/**
+ * Loading Indicator Styles
+ *
+ * Provides styles for 4 loading templates with animations:
+ * 1. Simple - Basic text
+ * 2. Animated - Rotating dots
+ * 3. Modern - Circular loader
+ * 4. Skeleton - Shimmer screen
+ */
+
+/* ========================================
+   Base Loading Styles
+   ======================================== */
+
+.zg-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* Reset the small-box centering transform from the core overlays.css rule:
+     this stylesheet makes .zg-loading a full-size overlay, so the
+     translate(-50%, -50%) would otherwise shove it off the top-left. */
+  transform: none;
+  z-index: 1000;
+  font-family: var(--zg-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
+  font-size: var(--zg-font-size, 14px);
+  color: var(--zg-text-primary, #333);
+  user-select: none;
+  pointer-events: all;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.zg-loading-active {
+  opacity: 1;
+}
+
+.zg-loading-hiding {
+  opacity: 0;
+}
+
+/* Add backdrop to non-skeleton templates */
+.zg-loading:not(.zg-loading-skeleton)::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--zg-bg-primary, rgba(255, 255, 255, 0.85));
+  opacity: 0.85;
+  backdrop-filter: blur(3px);
+  z-index: -1;
+}
+
+/* Position variants */
+.zg-loading-top {
+  align-items: flex-start;
+  padding-top: 20px;
+}
+
+.zg-loading-center {
+  align-items: center;
+}
+
+.zg-loading-bottom {
+  align-items: flex-end;
+  padding-bottom: 20px;
+}
+
+.zg-loading-message {
+  margin-top: 12px;
+  text-align: center;
+  font-size: 14px;
+  color: var(--zg-text-secondary, #666);
+}
+
+/* ========================================
+   Template 1: Simple
+   ======================================== */
+
+.zg-loading-simple {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 32px;
+  background: var(--zg-bg-primary, rgba(255, 255, 255, 0.95));
+  border-radius: 8px;
+  box-shadow: var(--zg-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
+  backdrop-filter: blur(4px);
+}
+
+.zg-loading-simple .zg-loading-message {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* ========================================
+   Template 2: Animated - Rotating Dots
+   ======================================== */
+
+.zg-loading-animated {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 32px;
+  background: var(--zg-bg-primary, rgba(255, 255, 255, 0.95));
+  border-radius: 8px;
+  box-shadow: var(--zg-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
+  backdrop-filter: blur(4px);
+}
+
+.zg-loading-spinner {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.zg-loading-dot {
+  width: 12px;
+  height: 12px;
+  background: var(--zg-border-active, #2196f3);
+  border-radius: 50%;
+  animation: zg-dot-bounce 1.4s infinite ease-in-out both;
+}
+
+.zg-loading-dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.zg-loading-dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+.zg-loading-dot:nth-child(3) {
+  animation-delay: 0s;
+}
+
+@keyframes zg-dot-bounce {
+  0%, 80%, 100% {
+    transform: scale(0.6);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* ========================================
+   Template 3: Modern - Circular Loader
+   ======================================== */
+
+.zg-loading-modern {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 32px;
+  background: var(--zg-bg-primary, rgba(255, 255, 255, 0.95));
+  border-radius: 8px;
+  box-shadow: var(--zg-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
+  backdrop-filter: blur(4px);
+}
+
+.zg-loading-spinner-circle {
+  width: 48px;
+  height: 48px;
+}
+
+.zg-loading-svg {
+  width: 100%;
+  height: 100%;
+  animation: zg-rotate 2s linear infinite;
+}
+
+.zg-loading-circle-path {
+  stroke: var(--zg-border-active, #2196f3);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  animation: zg-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes zg-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes zg-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+/* ========================================
+   Template 4: Skeleton - Shimmer Screen
+   ======================================== */
+
+.zg-loading-skeleton {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--zg-bg-secondary, rgba(248, 248, 248, 0.98));
+  padding: 0;
+  box-shadow: none;
+}
+
+.zg-loading-skeleton-grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.zg-loading-skeleton-row {
+  display: flex;
+  height: 32px;
+  border-bottom: 1px solid var(--zg-border-color, #e0e0e0);
+}
+
+.zg-loading-skeleton-cell {
+  flex: 1;
+  min-width: 100px;
+  background: var(--zg-bg-secondary, #f5f5f5);
+  border-right: 1px solid var(--zg-border-color, #e0e0e0);
+  overflow: hidden;
+  position: relative;
+  padding: 8px;
+}
+
+.zg-loading-skeleton-cell::before {
+  content: '';
+  display: block;
+  height: 12px;
+  background: var(--zg-border-color, #e0e0e0);
+  border-radius: 2px;
+  width: 80%;
+}
+
+.zg-loading-skeleton-shimmer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.8) 50%,
+    transparent 100%
+  );
+  animation: zg-shimmer 1.5s infinite;
+}
+
+@keyframes zg-shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* ========================================
+   Responsive Design
+   ======================================== */
+
+@media (max-width: 768px) {
+  .zg-loading-animated,
+  .zg-loading-modern,
+  .zg-loading-simple {
+    padding: 16px;
+  }
+
+  .zg-loading-message {
+    font-size: 13px;
+  }
+
+  .zg-loading-skeleton-grid {
+    padding: 12px;
+  }
+
+  .zg-loading-skeleton-row {
+    gap: 8px;
+  }
+
+  .zg-loading-skeleton-cell {
+    height: 32px;
+  }
+}
+
+/* ========================================
+   Accessibility
+   ======================================== */
+
+/* Screen reader only text */
+.zg-loading[aria-live="polite"]::before {
+  content: attr(aria-label);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .zg-loading,
+  .zg-loading-dot,
+  .zg-loading-svg,
+  .zg-loading-circle-path,
+  .zg-loading-skeleton-shimmer,
+  .zg-loading-progress-fill {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .zg-loading-spinner-circle {
+    opacity: 0.7;
+  }
+}