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.

Sign up for GitHub

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

Allow the react component animation duration to be configurable. Related to #69. #93

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Allow the react component animation duration to be configurable. Related to #69. #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion docs/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2699,8 +2699,20 @@ button, .button {
padding-top: 0.5em;
padding-bottom: 0.5em;
min-height: 2em; }
.funnies-wrapper--input-container {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does the double dash signify? Personally I prefer single dashes for the whole thing (ie, funnies-wrapper-input-container) but I'd entertain alternatives if there's a compelling reason to use them.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's just a pattern (or a methodology) that i like to use because i think that it combines very well with SASS called BEM.

By the way, i used the wrong pattern. According to BEM, in this case, i should have used .funnies-wrapper__input-container instead of .funnies-wrapper--input-container

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, cool. I don't really mind it, was just curious. Thanks for the link!

margin-bottom: 0.8em;
border-bottom: 1px solid #f1f1f1;
padding-bottom: 0.8em; }
.funnies-wrapper--input-container--name {
font-size: 80%;
margin-right: 0.5em;
display: block;
margin-bottom: 0.5em; }
.funnies-wrapper .funnies {
margin-bottom: 0.5em; }
margin-bottom: 1.5em;
text-align: center;
background-color: #f7f7f7;
padding: 1em; }
.funnies-wrapper input[type=range] {
vertical-align: middle;
margin-right: 1em; }
Expand Down
Loading