franpcode/Tic-Tac-Toe-Game
1
0
Fork 0
mirror of https://github.com/FranP-code/Tic-Tac-Toe-Game.git synced 2025-10-12 23:52:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added some style logic

Browse Source
This commit is contained in:
Francisco Pessano
2021-12-27 15:04:07 -03:00
parent 70e6ddcedb
commit 0102f9b106
14 changed files with 200 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
styles/game.scss
View File

@@ -72,6 +72,16 @@
}
}
.game.hidden {
opacity: 0%;
position: absolute;
top: -100%;
}
@media (max-width: 900px) {
.game {

26
styles/playerSelection.scss
View File

@@ -134,9 +134,14 @@
}
}
.emoji-picker-container {
.player-selection.hidden {
background-color: rgba(0, 0, 0, 0.404);
position: absolute;
top: -100%
}
.emoji-picker-container {
transition: 0.4s ease-in-out;
opacity: 100%;
@@ -149,6 +154,18 @@
display: flex;
justify-content: center;
align-items: center;
.emoji-picker-background {
position: absolute;
background-color: rgba(0, 0, 0, 0.404);
z-index: 10;
height: 100%;
width: 100%;
}
}
.emoji-picker-container.hidden {
@@ -159,4 +176,9 @@
background-color: rgb(221, 121, 121);
transition: 0.4s ease-in-out;
}
emoji-picker {
z-index: 100;
}

27
styles/styles.css
View File

@@ -81,8 +81,12 @@
box-shadow: none;
}
.player-selection.hidden {
position: absolute;
top: -100%;
}
.emoji-picker-container {
background-color: rgba(0, 0, 0, 0.404);
transition: 0.4s ease-in-out;
opacity: 100%;
height: 100%;
@@ -92,6 +96,13 @@
justify-content: center;
align-items: center;
}
.emoji-picker-container .emoji-picker-background {
position: absolute;
background-color: rgba(0, 0, 0, 0.404);
z-index: 10;
height: 100%;
width: 100%;
}
.emoji-picker-container.hidden {
opacity: 0%;
@@ -100,6 +111,10 @@
transition: 0.4s ease-in-out;
}
emoji-picker {
z-index: 100;
}
.game {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
@@ -142,6 +157,12 @@
border-right: 0px;
}
.game.hidden {
opacity: 0%;
position: absolute;
top: -100%;
}
@media (max-width: 900px) {
.game {
width: 80vw;
@@ -171,4 +192,8 @@ button {
cursor: pointer;
}
.animate__animated.animate__fadeOutDown {
--animate-duration: 1s;
}
/*# sourceMappingURL=styles.css.map */

2
styles/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["playerSelection.scss","game.scss","styles.scss"],"names":[],"mappings":"AAAA;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EAEG;;AAGH;EAEI;EAEA;;AAEA;EAKI;;AAEA;EAEI;EACA;EACA;EAEA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI;EACA;;AAIR;EAEI;EACA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;;AAKZ;EAEI;EACA;;AAII;EAEI;EACA;;AAMhB;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;;AAIR;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;EACA;EAEA;EAEA;;;AChKJ;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EAEA;EAEA;;;AAQA;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAOJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;;AAKZ;EAEI;IAEI;IACA;;EAEA;IAEI;IACA;;;ACjFZ;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["playerSelection.scss","game.scss","styles.scss"],"names":[],"mappings":"AAAA;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EAEG;;AAGH;EAEI;EAEA;;AAEA;EAKI;;AAEA;EAEI;EACA;EACA;EAEA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI;EACA;;AAIR;EAEI;EACA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;;AAKZ;EAEI;EACA;;AAII;EAEI;EACA;;AAMhB;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;;AAIR;EAEI;EAEA;;;AAGJ;EAEI;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EAEI;EAEA;EAEA;EAEA;EACA;;;AAIR;EAEI;EACA;EAEA;EAEA;;;AAGJ;EAEI;;;ACtLJ;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EAEA;EAEA;;;AAQA;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAOJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;;AAKZ;EAEI;EAEA;EAEA;;;AAIJ;EAEI;IAEI;IACA;;EAEA;IAEI;IACA;;;AC3FZ;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EACI","file":"styles.css"}

4
styles/styles.scss
View File

@@ -25,4 +25,8 @@ body {
button {
cursor: pointer;
}
.animate__animated.animate__fadeOutDown {
--animate-duration: 1s;
}