franpcode/Hangman-game-with-React
1
0
Fork 0
mirror of https://github.com/FranP-code/Hangman-game-with-React.git synced 2025-10-13 00:42:32 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Icons to categories added. Categories section done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-18 17:07:20 -03:00
parent 292fce9562
commit 526fc9a0ab
13 changed files with 117 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/css/index.css
View File

@@ -112,6 +112,13 @@ header h2 {
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
display: flex;
justify-content: space-between;
align-items: center;
}
.categories-container .categories button img, .categories-container .categories button .blank-space, .categories-container .categories select img, .categories-container .categories select .blank-space {
height: 4vw;
width: 4vw;
}
.categories-container .categories button.Select, .categories-container .categories select.Select {
color: #000;
@@ -124,6 +131,10 @@ header h2 {
background-color: #ef9090;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Select:hover img, .categories-container .categories select.Select:hover img {
animation: bounce;
animation-duration: 0.5s;
}
.categories-container .categories button.Cities, .categories-container .categories button.Ciudades, .categories-container .categories select.Cities, .categories-container .categories select.Ciudades {
color: #000;
background-color: #5f9ea0;
@@ -135,6 +146,10 @@ header h2 {
background-color: #7fb1b3;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Cities:hover img, .categories-container .categories button.Ciudades:hover img, .categories-container .categories select.Cities:hover img, .categories-container .categories select.Ciudades:hover img {
animation: bounce;
animation-duration: 0.5s;
}
.categories-container .categories button.Pokemon, .categories-container .categories select.Pokemon {
color: #000;
background-color: #ffcb05;
@@ -146,8 +161,12 @@ header h2 {
background-color: #ffd638;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Pokemon:hover img, .categories-container .categories select.Pokemon:hover img {
animation: bounce;
animation-duration: 0.5s;
}
.categories-container .categories button.Programming.Languages, .categories-container .categories button.Lenguajes.De.Programación, .categories-container .categories select.Programming.Languages, .categories-container .categories select.Lenguajes.De.Programación {
color: #000;
color: #fff;
background-color: #e46f01;
border: #dc6b01 solid 2px;
cursor: pointer;
@@ -157,6 +176,10 @@ header h2 {
background-color: #fe881a;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Programming.Languages:hover img, .categories-container .categories button.Lenguajes.De.Programación:hover img, .categories-container .categories select.Programming.Languages:hover img, .categories-container .categories select.Lenguajes.De.Programación:hover img {
animation: bounce;
animation-duration: 0.5s;
}
.categories-container .categories button.Animals, .categories-container .categories button.Animales, .categories-container .categories select.Animals, .categories-container .categories select.Animales {
color: #000;
background-color: #efa482;
@@ -168,6 +191,10 @@ header h2 {
background-color: #f5c5af;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Animals:hover img, .categories-container .categories button.Animales:hover img, .categories-container .categories select.Animals:hover img, .categories-container .categories select.Animales:hover img {
animation: bounce;
animation-duration: 0.5s;
}
.categories-container .categories button.Countries, .categories-container .categories button.Países, .categories-container .categories select.Countries, .categories-container .categories select.Países {
color: #fff;
background-color: #9f0000;
@@ -179,6 +206,10 @@ header h2 {
background-color: #d20000;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Countries:hover img, .categories-container .categories button.Países:hover img, .categories-container .categories select.Countries:hover img, .categories-container .categories select.Países:hover img {
animation: bounce;
animation-duration: 0.5s;
}
.categories-container .categories button.Random, .categories-container .categories select.Random {
color: #000;
background-color: #4285f4;
@@ -190,6 +221,10 @@ header h2 {
background-color: #72a4f7;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Random:hover img, .categories-container .categories select.Random:hover img {
animation: bounce;
animation-duration: 0.5s;
}
.categories-container .categories.hidden {
opacity: 0%;
top: 0;

2
public/css/index.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_app.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA;;;AC9BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;;AAqBA;EAjBI,OAFuD;EAIvD,kBAgBc;EAfd;EAEA;EAEA;;AAEA;EACI;EACA;;AAYR;EAvBI,OAFuD;EAIvD,kBAsBc;EArBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAkBR;EA7BI,OAFuD;EAIvD,kBA4Bc;EA3Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAwBR;EAnCI,OAFuD;EAIvD,kBAkCc;EAjCd;EAEA;EAEA;;AAEA;EACI;EACA;;AA8BR;EAzCI,OAFuD;EAIvD,kBAwCc;EAvCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAoCR;EA/CI,OAiDY;EA/CZ,kBA8Cc;EA7Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AA2CR;EAtDI,OAFuD;EAIvD,kBAqDc;EApDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAkDZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACrIhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_app.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA;;;AC9BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACnJhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA","file":"index.css"}

16
public/sass/_categories.scss
View File

@@ -40,6 +40,15 @@
text-align-last: center;
-moz-text-align-last: center;
display: flex;
justify-content: space-between;
align-items: center;
img, .blank-space {
height: 4vw;
width: 4vw;
}
@mixin backgroundAndHoverDefiner($buttonColor, $textColor: #000) {
color: $textColor;
@@ -55,6 +64,10 @@
background-color: adjust-color($color: $buttonColor, $lightness: 10%, );
transition: 0.4s ease-in-out;
& img {
animation: bounce;
animation-duration: 0.5s;
}
}
}
@@ -79,8 +92,9 @@
&.Programming.Languages, &.Lenguajes.De.Programación {
$buttonColor: #e46f01;
$textColor: #fff;
@include backgroundAndHoverDefiner($buttonColor);
@include backgroundAndHoverDefiner($buttonColor, $textColor);
}
&.Animals, &.Animales {