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

Jump to bottom

#06: Custom Hooks #7

Open
wants to merge 14 commits into
base: 02
Choose a base branch
from
+254 −86
Open

#06: Custom Hooks #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
77aa8ac
complete refactor to custom hook
Oct 24, 2019
8aebaad
resolve compound components
Oct 24, 2019
20489e8
compound components - expose state via callback
Oct 24, 2019
cf2cd45
complete reusable styles
Oct 24, 2019
2e6f898
resolve control props with improvements
Oct 24, 2019
bba7682
complete custom hook implementation
Oct 24, 2019
feb7b14
complete refactor to hooks + cleanup prev patterns
Oct 24, 2019
ae20dbd
update usage for custom hook
Oct 24, 2019
84dadb0
remove component changes
Jan 25, 2020
e548ac5
cleanups
Jan 25, 2020
6fc6d58
update missing style
Jan 25, 2020
4ec42e3
Merge branch '02' into 06
ohansemmanuel Jan 25, 2020
f32b6d7
quick updates
Jan 25, 2020
20cfcdc
Merge branch '06' of github.com:ohansemmanuel/advanced-react-patterns…
Jan 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
120 changes: 60 additions & 60 deletions showcase/src/patterns/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,81 @@
/* Clap button */
Copy link
Owner Author

Choose a reason for hiding this comment

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

Ignore white space changes in this file :)

.clap {
position: relative;
outline: 1px solid transparent;
border-radius: 50%;
border: 1px solid #bdc3c7;
width: 80px;
height: 80px;
background: none;
user-select: none;
}
position: relative;
outline: 1px solid transparent;
border-radius: 50%;
border: 1px solid #bdc3c7;
width: 80px;
height: 80px;
background: none;
user-select: none;
}
.clap:after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 50%;
width: 79px;
height: 79px;
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 50%;
width: 79px;
height: 79px;
}
.clap:hover {
cursor: pointer;
border: 1px solid #27ae60;
transition: border-color 0.3s ease-in;
cursor: pointer;
border: 1px solid #27ae60;
transition: border-color 0.3s ease-in;
}
.clap:hover:after {
animation: shockwave 1s ease-in infinite;
animation: shockwave 1s ease-in infinite;
}

@keyframes shockwave {
0% {
transform: scale(1);
box-shadow: 0 0 2px #27ae60;
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
box-shadow: 0 0 50px #145b32, inset 0 0 10px #27ae60;
}
0% {
transform: scale(1);
box-shadow: 0 0 2px #27ae60;
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
box-shadow: 0 0 50px #145b32, inset 0 0 10px #27ae60;
}
}

/* Count */
.count {
position: absolute;
top: -50px;
left: 20px;
font-size: 0.8rem;
color: white;
background: #27ae60;
border-radius: 50%;
height: 40px;
width: 40px;
line-height: 40px;
position: absolute;
top: -50px;
left: 20px;
font-size: 0.8rem;
color: white;
background: #27ae60;
border-radius: 50%;
height: 40px;
width: 40px;
line-height: 40px;
}

/* Count total */
.total {
position: absolute;
font-size: 0.8rem;
width: 80px;
text-align: center;
left: 0;
top: -22px;
color: #bdc3c7;
}
position: absolute;
font-size: 0.8rem;
width: 80px;
text-align: center;
left: 0;
top: -22px;
color: #bdc3c7;
}

/* Clap Icon */
.icon {
width: 40px;
fill: none;
stroke: #27ae60;
stroke-width: 2px;
}
width: 40px;
fill: none;
stroke: #27ae60;
stroke-width: 2px;
}

.icon.checked {
fill: #27ae60;
stroke: #fff;
stroke-width: 1px;
}
fill: #27ae60;
stroke: #fff;
stroke-width: 1px;
}