src/styles/tictactoe.scss
/*******************************
* GAME
*******************************/
.app {
align-items: center;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
margin: auto;
max-width: 700px;
}
.progress {
background-color: black;
}
.progress .indeterminate {
background-color: grey;
}
.game-canvas {
border: 3px dotted #212121;
margin: 0;
width: 100%;
}
.joysticks {
display: flex;
margin-top: 1.5rem;
}
.canvas-container {
margin-bottom: 1.5rem;
}
.players-joystick {
padding: 0.5rem;
outline: 2px dotted #212121;
margin: 0 0.5rem;
transition: box-shadow 250ms ease;
.btn {
width: 2.4rem;
height: 2.4rem;
padding: 0;
}
.btn i {
line-height: 2.6rem;
font-size: 1.8rem;
}
.name {
font-size: 1.2rem;
margin: 0.5rem 0.2rem 0.8rem;
display: flex;
justify-content: flex-start;
align-items: center;
> i {
margin-right: 0.5rem;
}
.score {
text-align: right;
min-width: auto;
padding: 0;
}
}
}
.joystick-is-authorized {
transform: scale(1.05);
}
.grid {
display: grid;
grid-gap: 1px;
justify-items: center;
}