feat: :sparkles: add `styles` for `dialog` element & its `backdrop`

krypton225 commented 1 week ago

Description

This PR implements new styles to address an issue with heading elements inside the dialog HTML element.

The goal is to:

Ensure there is a beautiful design for the dialog HTML element.
Make additional styles for dialog header, content, and footer to improve the overall UI and UX.

Changes Made

Add new styles for the dialog HTML element using some custom CSS properties in the mvp.css file.
Add a style for the ::backdrop pseudo-element to make sense for the user with some background-color and opacity.
Add a new section in the index.html file to make an example for the dialog and its state in the open.

Screenshot

Additional Notes

If there are any specific design guidelines or additional functionality to consider, please let me know.
Feel free to reach out if you have any questions or need further clarification on the changes.

ChristopherBilg commented 1 week ago

Hey Krypton! I'm more than happy to review this and potentially add some of it; however, MVP.css is designed and intended to be an Out of the box CSS styling for HTML elements. No class names, no framework to learn. I see the majority of your proposed changes are in class names. If you'd like to refactor those into CSS combinators (and the like), then I would be happy to include these changes.

krypton225 commented 1 week ago

@ChristopherBilg

Thank you very much! I'm happy to read your awesome comment.

OK. As you said: MVP.css is designed and intended to be an Out-of-the-box CSS styling for HTML elements. No class names, no framework to learn..

Do you need to remove the classes only, with the example of course, and push a new commit?

andybrewer / mvp