diff --git a/.changeset/moody-coats-sparkle.md b/.changeset/moody-coats-sparkle.md new file mode 100644 index 0000000000..5995b6d6e7 --- /dev/null +++ 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 index 723fb25ebd..18d9d6a4fb 100644 --- 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 index f5049f95fe..230392da00 100644 --- 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,