danbarber/chess
1
0
Fork 0
mirror of https://github.com/danbee/chess synced 2025-03-04 08:39:06 +00:00
Code Issues Releases Wiki Activity

Tweak board styling and remove unneeded styles

Browse Source
This commit is contained in:
Daniel Barber 2018-04-05 23:06:31 -04:00
parent 0b5e26e5c9
commit c65c488bd4
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
1 changed files with 8 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/css/_board.scss
View File

@ -52,22 +52,17 @@ $board-size: 90vmin;
width: 100%;
}
.board-border-top,
.board-border-bottom {
height: $board-size / 20;
}
%black-square {
background-color: $black-square-color;
&.selected {
background-color: mix($black-square-color, $selected-square-color, 60%);
box-shadow: 0 0 0 ($board-size / 400) $selected-outline-color;
box-shadow: inset 0 0 0 ($board-size / 400) $selected-outline-color;
}
&.available {
background-color: mix($black-square-color, $available-square-color, 80%);
box-shadow: 0 0 0 ($board-size / 400) $available-outline-color;
box-shadow: inset 0 0 0 ($board-size / 400) $available-outline-color;
}
}
@ -76,12 +71,12 @@ $board-size: 90vmin;
&.selected {
background-color: mix($white-square-color, $selected-square-color, 60%);
box-shadow: 0 0 0 ($board-size / 400) $selected-outline-color;
box-shadow: inset 0 0 0 ($board-size / 400) $selected-outline-color;
}
&.available {
background-color: mix($white-square-color, $available-square-color, 80%);
box-shadow: 0 0 0 ($board-size / 400) $available-outline-color;
box-shadow: inset 0 0 0 ($board-size / 400) $available-outline-color;
}
}
@ -131,17 +126,9 @@ $board-size: 90vmin;
}
}
// .board-square:nth-child(even) {
// @include black-square;
// }
// .board-square:nth-child(odd) {
// @include white-square;
// }
@media (min-width: 480px) {
.board-square {
margin: 1px;
.board-body {
grid-gap: 1px;
}
.board-label {
@ -150,8 +137,8 @@ $board-size: 90vmin;
}
@media (min-width: 768px) {
.board-square {
margin: 1.5px;
.board-body {
grid-gap: 1.5px;
}
.board-label {