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:
parent
0b5e26e5c9
commit
c65c488bd4
@ -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 {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user