Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add overlay/content example #966

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Conversation

arist0tl3
Copy link

Added an example I used to animate modal content in and apply an opacity transition to the overlay. If this is interesting I can look into adding to the /examples as well.

Acceptance Checklist:

  • The commit message follows the guidelines in CONTRIBUTING.md.
  • [n/a] Documentation (README.md) and examples have been updated as needed.
  • [n/a] If this is a code change, a spec testing the functionality has been added.
  • [n/a] If the commit message has [changed] or [removed], there is an upgrade path above.

@diasbruno
Copy link
Collaborator

LEGIT. Obrigado, @arist0tl3!

@diasbruno
Copy link
Collaborator

The style is the "default style" that we use on the examples, right?

@arist0tl3
Copy link
Author

@diasbruno

I think I understand what you were getting at -- just updated the example to use the default styles and note that transform will need to be removed in order for this example to work properly.

@diasbruno
Copy link
Collaborator

Great. Is there a bug on the styles of the examples?

@arist0tl3
Copy link
Author

No, but if I try to do this:

.ReactModal__Content {
  transform: translate(-50%, 150%);
  transition: transform 800ms ease-in-out;
}

.ReactModal__Content--after-open {
  transform: translate(-50%, -50%);
}

.ReactModal__Content--before-close {
  transform: translate(-50%, 150%);
}

the inline style will take precedence. It felt better to suggest removing that inline style and define it instead as a css rule vs keeping it as is and adding !important to the rules above.

@arist0tl3
Copy link
Author

Took a stab at wording it; lmk if it does/doesn't make sense lol

@diasbruno
Copy link
Collaborator

Everything looks good. Thanks so much for taking the time to help with the docs.
Grande Lavoro. 🎉
Grazie mille.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants