@keenmate/pure-admin-core 2.3.0 → 2.3.2

package/src/scss/core-components/_loaders.scss

@@ -1,277 +1,277 @@
-/* ========================================
-   Loader Components
-   Spinners, dots, bars, pulse, ring, wave loaders and animations
-   ======================================== */
-@use '../variables' as *;
-
-// Spinner animation
-@keyframes pa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-// Standalone Spinners
-.pa-spinner {
-  display: inline-block;
-  width: $spinner-size;
-  height: $spinner-size;
-  border: $spinner-border-width solid transparent;
-  border-top: $spinner-border-width solid currentColor;
-  border-radius: 50%;
-  animation: pa-spin $animation-spin-duration linear infinite;
-
-  // Size variants
-  &--xs {
-    width: $loader-dot-size;
-    height: $loader-dot-size;
-  }
-
-  // Color variants
-  &--primary {
-    border-top-color: $btn-primary-bg;
-  }
-
-  &--secondary {
-    border-top-color: $btn-secondary-bg;
-  }
-
-  &--success {
-    border-top-color: $btn-success-bg;
-  }
-
-  &--danger {
-    border-top-color: $btn-danger-bg;
-  }
-
-  &--warning {
-    border-top-color: $btn-warning-bg;
-  }
-
-  &--info {
-    border-top-color: $btn-info-bg;
-  }
-}
-
-// Dots Loader
-.pa-loader-dots {
-  display: inline-flex;
-  gap: $spacing-sm;
-  align-items: center;
-
-  span {
-    width: $loader-dot-size;
-    height: $loader-dot-size;
-    border-radius: 50%;
-    background-color: currentColor;
-    animation: pa-bounce 1.4s infinite ease-in-out both;
-
-    &:nth-child(1) {
-      animation-delay: $loader-dots-delay-1;
-    }
-
-    &:nth-child(2) {
-      animation-delay: $loader-dots-delay-2;
-    }
-  }
-
-  &--lg span {
-    width: $loader-dot-size;
-    height: $loader-dot-size;
-  }
-}
-
-@keyframes pa-bounce {
-  0%, 80%, 100% {
-    transform: scale(0);
-    opacity: $opacity-muted;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-// Bars Loader
-.pa-loader-bars {
-  display: inline-flex;
-  gap: $spacing-xs;
-  align-items: center;
-  height: $loader-bar-height;
-
-  span {
-    width: $loader-bar-width;
-    height: 100%;
-    background-color: currentColor;
-    animation: pa-stretch 1.2s infinite ease-in-out;
-
-    &:nth-child(1) {
-      animation-delay: $loader-bars-delay-1;
-    }
-
-    &:nth-child(2) {
-      animation-delay: $loader-bars-delay-2;
-    }
-
-    &:nth-child(3) {
-      animation-delay: $loader-bars-delay-3;
-    }
-
-    &:nth-child(4) {
-      animation-delay: $loader-bars-delay-4;
-    }
-
-    &:nth-child(5) {
-      animation-delay: $loader-bars-delay-5;
-    }
-  }
-
-  &--lg {
-    height: $spinner-size;
-
-    span {
-      width: $loader-bar-width;
-    }
-  }
-}
-
-@keyframes pa-stretch {
-  0%, 40%, 100% {
-    transform: scaleY(0.4);
-  }
-  20% {
-    transform: scaleY(1);
-  }
-}
-
-// Pulse Loader
-.pa-loader-pulse {
-  display: inline-block;
-  width: $spinner-size;
-  height: $spinner-size;
-  border-radius: 50%;
-  background-color: currentColor;
-  animation: pa-pulse $loader-pulse-duration infinite $loader-pulse-easing;
-
-  &--lg {
-    width: $stat-icon-size;
-    height: $stat-icon-size;
-  }
-}
-
-@keyframes pa-pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(0);
-  }
-  50% {
-    opacity: $opacity-muted;
-    transform: scale(1);
-  }
-}
-
-// Ring Loader
-.pa-loader-ring {
-  display: inline-block;
-  width: $spinner-size;
-  height: $spinner-size;
-  position: relative;
-
-  &::after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: $loader-border-width solid currentColor;
-    border-color: currentColor transparent currentColor transparent;
-    animation: pa-spin 1.2s linear infinite;
-  }
-
-  &--lg {
-    width: $stat-icon-size;
-    height: $stat-icon-size;
-
-    &::after {
-      border-width: $loader-border-width;
-    }
-  }
-}
-
-// Wave Loader
-.pa-loader-wave {
-  display: inline-flex;
-  gap: $badge-padding-v;
-  align-items: center;
-  height: $loader-bar-height;
-
-  span {
-    width: $loader-bar-width;
-    height: 100%;
-    background-color: currentColor;
-    animation: pa-wave 1.2s infinite ease-in-out;
-
-    &:nth-child(1) {
-      animation-delay: $loader-bars-delay-1;
-    }
-
-    &:nth-child(2) {
-      animation-delay: $loader-bars-delay-2;
-    }
-
-    &:nth-child(3) {
-      animation-delay: $loader-bars-delay-3;
-    }
-
-    &:nth-child(4) {
-      animation-delay: $loader-bars-delay-4;
-    }
-
-    &:nth-child(5) {
-      animation-delay: $loader-bars-delay-5;
-    }
-  }
-
-  &--lg {
-    height: $spinner-size;
-
-    span {
-      width: $loader-bar-width;
-    }
-  }
-}
-
-@keyframes pa-wave {
-  0%, 40%, 100% {
-    transform: scaleY(0.4);
-  }
-  20% {
-    transform: scaleY(1);
-  }
-}
-
-// Loader utilities
-.pa-loader-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--pa-loader-overlay-bg);
-  z-index: $z-index-loader;
-}
-
-.pa-loader-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
+/* ========================================
+   Loader Components
+   Spinners, dots, bars, pulse, ring, wave loaders and animations
+   ======================================== */
+@use '../variables' as *;
+
+// Spinner animation
+@keyframes pa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// Standalone Spinners
+.pa-spinner {
+  display: inline-block;
+  width: $spinner-size;
+  height: $spinner-size;
+  border: $spinner-border-width solid transparent;
+  border-top: $spinner-border-width solid currentColor;
+  border-radius: 50%;
+  animation: pa-spin $animation-spin-duration linear infinite;
+
+  // Size variants
+  &--xs {
+    width: $loader-dot-size;
+    height: $loader-dot-size;
+  }
+
+  // Color variants
+  &--primary {
+    border-top-color: $btn-primary-bg;
+  }
+
+  &--secondary {
+    border-top-color: $btn-secondary-bg;
+  }
+
+  &--success {
+    border-top-color: $btn-success-bg;
+  }
+
+  &--danger {
+    border-top-color: $btn-danger-bg;
+  }
+
+  &--warning {
+    border-top-color: $btn-warning-bg;
+  }
+
+  &--info {
+    border-top-color: $btn-info-bg;
+  }
+}
+
+// Dots Loader
+.pa-loader-dots {
+  display: inline-flex;
+  gap: $spacing-sm;
+  align-items: center;
+
+  span {
+    width: $loader-dot-size;
+    height: $loader-dot-size;
+    border-radius: 50%;
+    background-color: currentColor;
+    animation: pa-bounce 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: $loader-dots-delay-1;
+    }
+
+    &:nth-child(2) {
+      animation-delay: $loader-dots-delay-2;
+    }
+  }
+
+  &--lg span {
+    width: $loader-dot-size;
+    height: $loader-dot-size;
+  }
+}
+
+@keyframes pa-bounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: $opacity-muted;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// Bars Loader
+.pa-loader-bars {
+  display: inline-flex;
+  gap: $spacing-xs;
+  align-items: center;
+  height: $loader-bar-height;
+
+  span {
+    width: $loader-bar-width;
+    height: 100%;
+    background-color: currentColor;
+    animation: pa-stretch 1.2s infinite ease-in-out;
+
+    &:nth-child(1) {
+      animation-delay: $loader-bars-delay-1;
+    }
+
+    &:nth-child(2) {
+      animation-delay: $loader-bars-delay-2;
+    }
+
+    &:nth-child(3) {
+      animation-delay: $loader-bars-delay-3;
+    }
+
+    &:nth-child(4) {
+      animation-delay: $loader-bars-delay-4;
+    }
+
+    &:nth-child(5) {
+      animation-delay: $loader-bars-delay-5;
+    }
+  }
+
+  &--lg {
+    height: $spinner-size;
+
+    span {
+      width: $loader-bar-width;
+    }
+  }
+}
+
+@keyframes pa-stretch {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+  }
+}
+
+// Pulse Loader
+.pa-loader-pulse {
+  display: inline-block;
+  width: $spinner-size;
+  height: $spinner-size;
+  border-radius: 50%;
+  background-color: currentColor;
+  animation: pa-pulse $loader-pulse-duration infinite $loader-pulse-easing;
+
+  &--lg {
+    width: $stat-icon-size;
+    height: $stat-icon-size;
+  }
+}
+
+@keyframes pa-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(0);
+  }
+  50% {
+    opacity: $opacity-muted;
+    transform: scale(1);
+  }
+}
+
+// Ring Loader
+.pa-loader-ring {
+  display: inline-block;
+  width: $spinner-size;
+  height: $spinner-size;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: $loader-border-width solid currentColor;
+    border-color: currentColor transparent currentColor transparent;
+    animation: pa-spin 1.2s linear infinite;
+  }
+
+  &--lg {
+    width: $stat-icon-size;
+    height: $stat-icon-size;
+
+    &::after {
+      border-width: $loader-border-width;
+    }
+  }
+}
+
+// Wave Loader
+.pa-loader-wave {
+  display: inline-flex;
+  gap: $badge-padding-v;
+  align-items: center;
+  height: $loader-bar-height;
+
+  span {
+    width: $loader-bar-width;
+    height: 100%;
+    background-color: currentColor;
+    animation: pa-wave 1.2s infinite ease-in-out;
+
+    &:nth-child(1) {
+      animation-delay: $loader-bars-delay-1;
+    }
+
+    &:nth-child(2) {
+      animation-delay: $loader-bars-delay-2;
+    }
+
+    &:nth-child(3) {
+      animation-delay: $loader-bars-delay-3;
+    }
+
+    &:nth-child(4) {
+      animation-delay: $loader-bars-delay-4;
+    }
+
+    &:nth-child(5) {
+      animation-delay: $loader-bars-delay-5;
+    }
+  }
+
+  &--lg {
+    height: $spinner-size;
+
+    span {
+      width: $loader-bar-width;
+    }
+  }
+}
+
+@keyframes pa-wave {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+  }
+}
+
+// Loader utilities
+.pa-loader-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--pa-loader-overlay-bg);
+  z-index: $z-index-loader;
+}
+
+.pa-loader-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+