Merged in chore/sw-3145-move-skeleton-shimmer (pull request #2509)

chore(SW-3145): Move SkeletonShimmer to design-system * Move SkeletonShimmer to design-system Approved-by: Joakim Jäderberg
2025-07-03 13:10:23 +00:00
parent 0ee6e8800d
commit 7ff8fee20e
60 changed files with 72 additions and 75 deletions
@@ -0,0 +1,54 @@
+.shimmer.dark {
+  --shimmer-background: rgba(255, 255, 255, 0.1);
+  --shimmer: linear-gradient(
+    120deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 0.1) 40%,
+    rgba(255, 255, 255, 0.1) 60%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+.shimmer.light {
+  --shimmer-background: rgba(217, 217, 217, 0.5);
+  --shimmer: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 0.2) 20%,
+    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0) 100%
+  );
+
+  background-color: var(--shimmer-background);
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+  border-radius: 4px;
+  min-height: 1em;
+  min-width: 2ch;
+}
+.shimmer::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: var(--shimmer);
+  animation: shimmer 3s infinite;
+  content: '';
+}
+.shimmer span {
+  visibility: hidden;
+}
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.block {
+  display: block;
+}
+.inlineBlock {
+  display: inline-block;
+}