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

Categories styles done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-16 20:12:59 -03:00
parent 844f0f6673
commit a933035ef3
11 changed files with 338 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
public/css/index.css
View File

@@ -82,6 +82,121 @@ header h2 {
user-select: none;
}
.categories-container {
overflow-y: hidden;
}
.categories-container .categories {
position: absolute;
top: 15vh;
left: 0;
height: 85vh;
width: 100vw;
background-color: #e1e1e1;
transition: opacity 0.4s ease-in-out;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
padding-top: 10vh;
padding-bottom: 10vh;
}
.categories-container .categories button, .categories-container .categories select {
height: 10vh;
width: 50vw;
font-family: Arial, Helvetica, sans-serif;
font-size: 22pt;
border: none;
border-radius: 10px;
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
}
.categories-container .categories button.Select, .categories-container .categories select.Select {
background-color: #E96363;
border: #e16363 solid 2px;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Select:hover, .categories-container .categories select.Select:hover {
background-color: #ef9090;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Cities, .categories-container .categories select.Cities {
background-color: #5f9ea0;
border: #5f9798 solid 2px;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Cities:hover, .categories-container .categories select.Cities:hover {
background-color: #7fb1b3;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Pokemons, .categories-container .categories select.Pokemons {
background-color: #ffcb05;
border: #f7c505 solid 2px;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Pokemons:hover, .categories-container .categories select.Pokemons:hover {
background-color: #ffd638;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Programming.Languages, .categories-container .categories select.Programming.Languages {
background-color: #e46f01;
border: #dc6b01 solid 2px;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Programming.Languages:hover, .categories-container .categories select.Programming.Languages:hover {
background-color: #fe881a;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Animals, .categories-container .categories select.Animals {
background-color: #efa482;
border: #e7a282 solid 2px;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Animals:hover, .categories-container .categories select.Animals:hover {
background-color: #f5c5af;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Countries, .categories-container .categories select.Countries {
background-color: #9f0000;
border: #970000 solid 2px;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Countries:hover, .categories-container .categories select.Countries:hover {
background-color: #d20000;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Random, .categories-container .categories select.Random {
background-color: #4285f4;
border: #4282ec solid 2px;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Random:hover, .categories-container .categories select.Random:hover {
background-color: #72a4f7;
transition: 0.4s ease-in-out;
}
.categories-container .categories.hidden {
opacity: 0%;
top: 0;
height: 85vh;
}
.categories-container .categories.hidden button, .categories-container .categories.hidden select {
height: 5vh;
}
.categories-container .categories.show {
opacity: 100%;
}
.categories-container .categories.stretch {
height: auto;
width: 100%;
}
.categories-container .categories.stretch button, .categories-container .categories.stretch select {
margin-bottom: 5vh;
}
.categories-container .categories.stretch:last-child {
margin-bottom: 0vh !important;
}
.defeat, .victory {
position: absolute;
left: 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/_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;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;;AAgBA;EAbI,kBAcc;EAbd;EAEA;;AAEA;EACI;EACA;;AAYR;EAnBI,kBAoBc;EAnBd;EAEA;;AAEA;EACI;EACA;;AAkBR;EAzBI,kBA0Bc;EAzBd;EAEA;;AAEA;EACI;EACA;;AAwBR;EA/BI,kBAgCc;EA/Bd;EAEA;;AAEA;EACI;EACA;;AA8BR;EArCI,kBAsCc;EArCd;EAEA;;AAEA;EACI;EACA;;AAoCR;EA3CI,kBA4Cc;EA3Cd;EAEA;;AAEA;EACI;EACA;;AA0CR;EAjDI,kBAkDc;EAjDd;EAEA;;AAEA;EACI;EACA;;AAiDZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;AC/HhB;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"}

5
public/sass/_app.scss
View File

@@ -13,10 +13,11 @@
display: flex;
flex-direction: column;
justify-content: space-between
justify-content: space-between;
}
}
@import 'hangman';
@import 'puzzleWord';
@import 'current-score';
@import 'current-score';
@import 'categories';

132
public/sass/_categories.scss Normal file
View File

@@ -0,0 +1,132 @@
.categories-container {
overflow-y: hidden;
.categories {
position: absolute;
top: 15vh;
left: 0;
height: 85vh;
width: 100vw;
background-color: rgb(225, 225, 225);
transition: opacity 0.4s ease-in-out;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
padding-top: 10vh;
padding-bottom: 10vh;
button, select {
height: 10vh;
width: 50vw;
font-family: Arial, Helvetica, sans-serif;
font-size: 22pt;
border: none;
border-radius: 10px;
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
@mixin backgroundAndHoverDefiner($buttonColor) {
background-color: $buttonColor;
border: adjust-color($color: $buttonColor, $blackness: 3%, $alpha: 1.0) solid 2px;
transition: 0.4s ease-in-out;
&:hover {
background-color: adjust-color($color: $buttonColor, $lightness: 10%, );
transition: 0.4s ease-in-out;
}
}
&.Select {
$buttonColor: #E96363;
@include backgroundAndHoverDefiner($buttonColor);
}
&.Cities {
$buttonColor: #5f9ea0;
@include backgroundAndHoverDefiner($buttonColor);
}
&.Pokemons {
$buttonColor: #ffcb05;
@include backgroundAndHoverDefiner($buttonColor);
}
&.Programming.Languages {
$buttonColor: #e46f01;
@include backgroundAndHoverDefiner($buttonColor);
}
&.Animals {
$buttonColor: #efa482;
@include backgroundAndHoverDefiner($buttonColor)
}
&.Countries {
$buttonColor: #9f0000;
@include backgroundAndHoverDefiner($buttonColor);
}
&.Random {
$buttonColor: #4285f4;
@include backgroundAndHoverDefiner($buttonColor);
}
}
&.hidden {
opacity: 0%;
top: 0;
height: 85vh;
button, select {
height: 5vh;
}
}
&.show {
opacity: 100%;
}
&.stretch {
height: auto;
width: 100%;
button, select {
margin-bottom: 5vh;
}
&:last-child {
margin-bottom: 0vh !important;
}
}
}
}