fix(theme): skeleton overflow issue (#3217)

nextui-org · Aug 29, 2024 · 9d6bcb5 · 9d6bcb5
1 parent 97f233b
commit 9d6bcb5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/moody-coats-sparkle.md b/.changeset/moody-coats-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+Fix skeleton overflow issue (#3214 #3670)
diff --git a/packages/core/theme/src/components/skeleton.ts b/packages/core/theme/src/components/skeleton.ts
@@ -44,7 +44,7 @@ const skeleton = tv({
       "data-[loaded=true]:pointer-events-auto",
       "data-[loaded=true]:overflow-visible",
       "data-[loaded=true]:!bg-transparent",
-      "data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none",
+      "data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:-z-10 data-[loaded=true]:before:animate-none",
       "data-[loaded=true]:after:opacity-0",
     ],
     content: ["opacity-0", "group-data-[loaded=true]:opacity-100"],
@@ -56,7 +56,7 @@ const skeleton = tv({
         content: "transition-none",
       },
       false: {
-        base: "transition-background !duration-300 before:transition-opacity before:!duration-300",
+        base: "transition-background !duration-300",
         content: "transition-opacity motion-reduce:transition-none !duration-300",
       },
     },

diff --git a/packages/core/theme/src/utilities/transition.ts b/packages/core/theme/src/utilities/transition.ts
@@ -46,13 +46,13 @@ export default {
     "transition-duration": DEFAULT_TRANSITION_DURATION,
   },
   ".transition-transform-colors": {
-    " transition-property":
+    "transition-property":
       "transform, color, background, background-color, border-color, text-decoration-color, fill, stroke",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION,
   },
   ".transition-transform-colors-opacity": {
-    " transition-property":
+    "transition-property":
       "transform, color, background, background-color, border-color, text-decoration-color, fill, stroke, opacity",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION,