Skip to content

Commit

Permalink
more style fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@kentcdodds
kentcdodds committed Jun 28, 2024
1 parent 7dca270 commit 8a9f98c
Show file tree
Hide file tree
Showing 16 changed files with 288 additions and 0 deletions.
18 changes: 18 additions & 0 deletions exercises/01.use-state/01.problem.initial-state/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ div:has(.counter) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 100%;
padding: 20px;
height: 100%;

Expand All @@ -29,6 +31,18 @@ div:has(.counter) {
border-radius: 3px;
cursor: pointer;

/* matches the enable/disable button when that one shows up in the exercises */
&:first-of-type {
flex: 1;
max-width: 100px;
}

/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
&:last-of-type {
flex: unset;
max-width: unset;
}

&:hover,
&:focus {
background-color: lch(40% 100 220);
Expand All @@ -38,5 +52,9 @@ div:has(.counter) {
background-color: lch(50% 100 220);
border-color: lch(30% 100 220);
}
&:disabled {
background-color: lch(30% 20 220);
border-color: lch(10% 20 200);
}
}
}
18 changes: 18 additions & 0 deletions exercises/01.use-state/01.solution.initial-state/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ div:has(.counter) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 100%;
padding: 20px;
height: 100%;

Expand All @@ -29,6 +31,18 @@ div:has(.counter) {
border-radius: 3px;
cursor: pointer;

/* matches the enable/disable button when that one shows up in the exercises */
&:first-of-type {
flex: 1;
max-width: 100px;
}

/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
&:last-of-type {
flex: unset;
max-width: unset;
}

&:hover,
&:focus {
background-color: lch(40% 100 220);
Expand All @@ -38,5 +52,9 @@ div:has(.counter) {
background-color: lch(50% 100 220);
border-color: lch(30% 100 220);
}
&:disabled {
background-color: lch(30% 20 220);
border-color: lch(10% 20 200);
}
}
}
18 changes: 18 additions & 0 deletions exercises/01.use-state/02.problem.update-state/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ div:has(.counter) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 100%;
padding: 20px;
height: 100%;

Expand All @@ -29,6 +31,18 @@ div:has(.counter) {
border-radius: 3px;
cursor: pointer;

/* matches the enable/disable button when that one shows up in the exercises */
&:first-of-type {
flex: 1;
max-width: 100px;
}

/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
&:last-of-type {
flex: unset;
max-width: unset;
}

&:hover,
&:focus {
background-color: lch(40% 100 220);
Expand All @@ -38,5 +52,9 @@ div:has(.counter) {
background-color: lch(50% 100 220);
border-color: lch(30% 100 220);
}
&:disabled {
background-color: lch(30% 20 220);
border-color: lch(10% 20 200);
}
}
}
18 changes: 18 additions & 0 deletions exercises/01.use-state/02.solution.update-state/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ div:has(.counter) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 100%;
padding: 20px;
height: 100%;

Expand All @@ -29,6 +31,18 @@ div:has(.counter) {
border-radius: 3px;
cursor: pointer;

/* matches the enable/disable button when that one shows up in the exercises */
&:first-of-type {
flex: 1;
max-width: 100px;
}

/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
&:last-of-type {
flex: unset;
max-width: unset;
}

&:hover,
&:focus {
background-color: lch(40% 100 220);
Expand All @@ -38,5 +52,9 @@ div:has(.counter) {
background-color: lch(50% 100 220);
border-color: lch(30% 100 220);
}
&:disabled {
background-color: lch(30% 20 220);
border-color: lch(10% 20 200);
}
}
}
18 changes: 18 additions & 0 deletions exercises/01.use-state/03.problem.re-render/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ div:has(.counter) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 100%;
padding: 20px;
height: 100%;

Expand All @@ -29,6 +31,18 @@ div:has(.counter) {
border-radius: 3px;
cursor: pointer;

/* matches the enable/disable button when that one shows up in the exercises */
&:first-of-type {
flex: 1;
max-width: 100px;
}

/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
&:last-of-type {
flex: unset;
max-width: unset;
}

&:hover,
&:focus {
background-color: lch(40% 100 220);
Expand All @@ -38,5 +52,9 @@ div:has(.counter) {
background-color: lch(50% 100 220);
border-color: lch(30% 100 220);
}
&:disabled {
background-color: lch(30% 20 220);
border-color: lch(10% 20 200);
}
}
}
18 changes: 18 additions & 0 deletions exercises/01.use-state/03.solution.re-render/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ div:has(.counter) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 100%;
padding: 20px;
height: 100%;

Expand All @@ -29,6 +31,18 @@ div:has(.counter) {
border-radius: 3px;
cursor: pointer;

/* matches the enable/disable button when that one shows up in the exercises */
&:first-of-type {
flex: 1;
max-width: 100px;
}

/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
&:last-of-type {
flex: unset;
max-width: unset;
}

&:hover,
&:focus {
background-color: lch(40% 100 220);
Expand All @@ -38,5 +52,9 @@ div:has(.counter) {
background-color: lch(50% 100 220);
border-color: lch(30% 100 220);
}
&:disabled {
background-color: lch(30% 20 220);
border-color: lch(10% 20 200);
}
}
}
18 changes: 18 additions & 0 deletions exercises/01.use-state/04.problem.preserve-state/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ div:has(.counter) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 100%;
padding: 20px;
height: 100%;

Expand All @@ -29,6 +31,18 @@ div:has(.counter) {
border-radius: 3px;
cursor: pointer;

/* matches the enable/disable button when that one shows up in the exercises */
&:first-of-type {
flex: 1;
max-width: 100px;
}

/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
&:last-of-type {
flex: unset;
max-width: unset;
}

&:hover,
&:focus {
background-color: lch(40% 100 220);
Expand All @@ -38,5 +52,9 @@ div:has(.counter) {
background-color: lch(50% 100 220);
border-color: lch(30% 100 220);
}
&:disabled {
background-color: lch(30% 20 220);
border-color: lch(10% 20 200);
}
}
}
18 changes: 18 additions & 0 deletions exercises/01.use-state/04.solution.preserve-state/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ div:has(.counter) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 100%;
padding: 20px;
height: 100%;

Expand All @@ -29,6 +31,18 @@ div:has(.counter) {
border-radius: 3px;
cursor: pointer;

/* matches the enable/disable button when that one shows up in the exercises */
&:first-of-type {
flex: 1;
max-width: 100px;
}

/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
&:last-of-type {
flex: unset;
max-width: unset;
}

&:hover,
&:focus {
background-color: lch(40% 100 220);
Expand All @@ -38,5 +52,9 @@ div:has(.counter) {
background-color: lch(50% 100 220);
border-color: lch(30% 100 220);
}
&:disabled {
background-color: lch(30% 20 220);
border-color: lch(10% 20 200);
}
}
}
18 changes: 18 additions & 0 deletions exercises/02.multiple-hooks/01.problem.phase/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ div:has(.counter) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 100%;
padding: 20px;
height: 100%;

Expand All @@ -29,6 +31,18 @@ div:has(.counter) {
border-radius: 3px;
cursor: pointer;

/* matches the enable/disable button when that one shows up in the exercises */
&:first-of-type {
flex: 1;
max-width: 100px;
}

/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
&:last-of-type {
flex: unset;
max-width: unset;
}

&:hover,
&:focus {
background-color: lch(40% 100 220);
Expand All @@ -38,5 +52,9 @@ div:has(.counter) {
background-color: lch(50% 100 220);
border-color: lch(30% 100 220);
}
&:disabled {
background-color: lch(30% 20 220);
border-color: lch(10% 20 200);
}
}
}
18 changes: 18 additions & 0 deletions exercises/02.multiple-hooks/01.solution.phase/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ div:has(.counter) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
min-width: 100%;
padding: 20px;
height: 100%;

Expand All @@ -29,6 +31,18 @@ div:has(.counter) {
border-radius: 3px;
cursor: pointer;

/* matches the enable/disable button when that one shows up in the exercises */
&:first-of-type {
flex: 1;
max-width: 100px;
}

/* disables first-of-type if we haven't gotten to the exercise with the enable/disable button yet */
&:last-of-type {
flex: unset;
max-width: unset;
}

&:hover,
&:focus {
background-color: lch(40% 100 220);
Expand All @@ -38,5 +52,9 @@ div:has(.counter) {
background-color: lch(50% 100 220);
border-color: lch(30% 100 220);
}
&:disabled {
background-color: lch(30% 20 220);
border-color: lch(10% 20 200);
}
}
}
Loading

0 comments on commit 8a9f98c

Please sign in to comment.