search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.13k stars 1.3k forks source link

bug: `drawer-end` cascades for nested drawers #3249

Closed willtcarey closed 3 weeks ago

willtcarey commented 4 weeks ago

What version of daisyUI are you using?

v4.12.13

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/C3gVcWnOy2?size=762x720

Describe your issue

When using nested drawers (one for the right and one for the left), if you try to put your drawer-end as the outside drawer, it cascades down and makes both of the drawers be a "right" drawer. You can see the behavior in the Tailwind Play up above. It's modified from an existing Tailwind Play that @saadeghi posted here https://github.com/saadeghi/daisyui/discussions/2278#discussioncomment-6927619.

That Play exhibits the correct behavior because the left drawer is the outside drawer and the right (drawer-end) drawer is the inside drawer.

github-actions[bot] commented 4 weeks ago

Thank you @willtcarey for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

willtcarey commented 4 weeks ago

https://github.com/saadeghi/daisyui/blob/dfec9ea0f91552ff348b1e7dc0c26432ae2064d3/src/components/unstyled/drawer.css#L36-L55

It looks like it's this styling. I think it could be fixed by adding a direct descendant selector to the .drawer-toggle class

& > .drawer-toggle {