1
0
mirror of https://github.com/danbee/chess synced 2025-03-04 08:39:06 +00:00

Tweak board styling and remove unneeded styles

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

View File

@ -52,22 +52,17 @@ $board-size: 90vmin;
width: 100%; width: 100%;
} }
.board-border-top,
.board-border-bottom {
height: $board-size / 20;
}
%black-square { %black-square {
background-color: $black-square-color; background-color: $black-square-color;
&.selected { &.selected {
background-color: mix($black-square-color, $selected-square-color, 60%); 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 { &.available {
background-color: mix($black-square-color, $available-square-color, 80%); 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 { &.selected {
background-color: mix($white-square-color, $selected-square-color, 60%); 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 { &.available {
background-color: mix($white-square-color, $available-square-color, 80%); 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) { @media (min-width: 480px) {
.board-square { .board-body {
margin: 1px; grid-gap: 1px;
} }
.board-label { .board-label {
@ -150,8 +137,8 @@ $board-size: 90vmin;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.board-square { .board-body {
margin: 1.5px; grid-gap: 1.5px;
} }
.board-label { .board-label {