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

Clean up SCSS

Browse Source
This commit is contained in:
Daniel Barber 2018-03-01 08:53:35 -05:00
parent a8bb242385
commit b24a485f4e
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assets/css/_board.scss
View File

@ -13,7 +13,7 @@
border-collapse: unset; border-collapse: unset;
border-radius: 2vmin; border-radius: 2vmin;
border-spacing: 1px; border-spacing: 1px;
box-shadow: 0 0.5vmin 3vmin rgba(0, 0, 0, 0.4); box-shadow: 0 0.5vmin 3vmin $board-shadow-color;
color: $white-square-color; color: $white-square-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -22,23 +22,23 @@
table-layout: fixed; table-layout: fixed;
width: 90vmin; width: 90vmin;
&.white-to-move:before { &.white-to-move::before {
@include move-indicator; @include move-indicator;
background: #fff; background: $white;
} }
&.black-to-move:before { &.black-to-move::before {
@include move-indicator; @include move-indicator;
background: #000; background: $black;
} }
&.player-is-white.white-to-move:before, &.player-is-white.white-to-move::before,
&.player-is-black.black-to-move:before { &.player-is-black.black-to-move::before {
bottom: 2vmin; bottom: 2vmin;
} }
&.player-is-white.black-to-move:before, &.player-is-white.black-to-move::before,
&.player-is-black.white-to-move:before { &.player-is-black.white-to-move::before {
top: 2vmin; top: 2vmin;
} }
} }
@ -54,9 +54,9 @@
} }
.board-body { .board-body {
flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1;
.board-border-left, .board-border-left,
.board-border-right { .board-border-right {
@ -65,14 +65,14 @@
} }
.board-ranks { .board-ranks {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
} }
.board-rank { .board-rank {
flex: 1;
display: flex; display: flex;
flex: 1;
} }
.board-border-left, .board-border-left,
@ -95,8 +95,9 @@
// This is to ensure the squares can be clicked on in PhantomJS // This is to ensure the squares can be clicked on in PhantomJS
// TODO: Figure out why we need this // TODO: Figure out why we need this
min-width: 2vmin;
min-height: 2vmin; min-height: 2vmin;
min-width: 2vmin;
@each $colour in $colours { @each $colour in $colours {
@each $piece in $pieces { @each $piece in $pieces {

4
assets/css/_variables.scss
View File

@ -1,9 +1,13 @@
$black: #000;
$white: #fff;
$background-color: #1e3f51; $background-color: #1e3f51;
$foreground-color: white; $foreground-color: white;
$link-color: #ffdd00; $link-color: #ffdd00;
$board-border-color: #000; $board-border-color: #000;
$board-shadow-color: rgba(0, 0, 0, 0.4);
$board-square-size: 9vmin; $board-square-size: 9vmin;
$base-font-size: 16px; $base-font-size: 16px;