Display: Fix skeleton styles

AngelFQC · AngelFQC · commit 9f247747e1d3 · 2024-09-17T01:57:03.000-05:00
diff --git a/assets/css/scss/atoms/_skeleton.scss b/assets/css/scss/atoms/_skeleton.scss
@@ -1,7 +1,7 @@
 .p-skeleton {
-  @apply bg-gray-30 rounded-lg w-full;
+  @apply overflow-hidden bg-gray-25 rounded-lg animate-pulse;
 
-  &:after {
-    @apply bg-gradient-to-r from-transparent via-gray-15 to-transparent;
+  &-circle {
+    @apply rounded-full;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -47,14 +47,14 @@ module.exports = {
         15: "#f7f8f9",
         20: "#edf0f2",
         25: "#e4e9ed",
-        30: "rgba(98, 98, 98, 0.5)",
+        30: "rgba(0, 0, 0, 0.12)",
         50: "#a2a6b0",
         90: "#333333",
       },
       support: {
-        1: "#eff4f8",
+        1: "rgba(46, 117, 163, 0.08)",
         2: "#f5f8fa",
-        3: "#97bad1",
+        3: "rgba(46, 117, 163, 0.5)",
         4: "#244d67",
         5: "#e06410",
         6: "#faf7f5",

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`.p-skeleton {`
`2`		`- @apply bg-gray-30 rounded-lg w-full;`
	`2`	`+ @apply overflow-hidden bg-gray-25 rounded-lg animate-pulse;`
`3`	`3`
`4`		`- &:after {`
`5`		`- @apply bg-gradient-to-r from-transparent via-gray-15 to-transparent;`
	`4`	`+ &-circle {`
	`5`	`+ @apply rounded-full;`
`6`	`6`	`}`
`7`	`7`	`}`