@qtalo/qt-ui-library 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qtalo/qt-ui-library",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/styles/styles.css

@@ -631,6 +631,36 @@ body {
   animation: tourFadeInUp 0.25s ease-out forwards;
 }
 
+/* Crossfade between two skeletons in the same place: a generic one fades out
+   while the specific one fades in, so the swap does not jump. */
+
+@keyframes skeletonCrossfadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes skeletonCrossfadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.skeleton-crossfade-in {
+  animation: skeletonCrossfadeIn 0.4s ease-in-out;
+}
+
+.skeleton-crossfade-out {
+  pointer-events: none;
+  animation: skeletonCrossfadeOut 0.4s ease-in-out forwards;
+}
+
 /* Skeleton block */
 
 .skeleton {
@@ -661,6 +691,15 @@ body {
     animation: none;
     background-image: none;
   }
+
+  .skeleton-crossfade-in {
+    animation: none;
+  }
+
+  .skeleton-crossfade-out {
+    animation: none;
+    opacity: 0;
+  }
 }
 
 /* Normalized content */