fix(skeleton): use opacity instead of background-color (#571)

square · Dec 5, 2023 · b853e20 · b853e20
1 parent 47a5057
commit b853e20
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/Skeleton/src/SkeletonBlock.vue b/src/components/Skeleton/src/SkeletonBlock.vue
@@ -42,14 +42,15 @@ export default {
 .SkeletonBlock {
 	width: 100%;
 	height: 100%;
+	background-color: $maker-color-neutral-20;
 
 	&.loading {
 		animation: pulsing 0.5s ease-in-out infinite alternate;
 	}
 }
 
 @keyframes pulsing {
-	0% { background-color: $maker-color-neutral-10; }
-	100% { background-color: $maker-color-neutral-20; }
+	0% { opacity: 0.4; }
+	100% { opacity: 1; }
 }
 </style>
diff --git a/src/components/Skeleton/src/SkeletonText.vue b/src/components/Skeleton/src/SkeletonText.vue
@@ -76,6 +76,7 @@ export default {
 		top: 50%;
 		width: 100%;
 		height: 75%;
+		background-color: $maker-color-neutral-20;
 		border-radius: $maker-shape-default-border-radius;
 		transform: translateY(-50%);
 		animation: pulsing 0.5s ease-in-out infinite alternate;
@@ -84,7 +85,7 @@ export default {
 }
 
 @keyframes pulsing {
-	0% { background-color: $maker-color-neutral-10; }
-	100% { background-color: $maker-color-neutral-20; }
+	0% { opacity: 0.4; }
+	100% { opacity: 1; }
 }
 </style>