CS-290
/
GoServer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make cell change color on corner hover.

This commit is contained in:
Danila Fedorin 2018-06-03 13:09:20 -07:00
parent e1ecf2e0ac
commit 7190ea2ded
2 changed files with 20 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/css/main.css
View File

@ -22,40 +22,37 @@ body {
margin: auto; margin: auto;
border-radius: 10px; } border-radius: 10px; }
.black-player .overlay:hover { .black-player .board-cell:hover .overlay {
background-image: url("../svg/black.svg"); } background-color: black; }
.white-player .overlay:hover { .white-player .board-cell:hover .overlay {
background-image: url("../svg/white.svg"); } background-color: white; }
.board-cell { .board-cell {
display: inline-block; display: inline-block;
position: relative; position: relative;
background-image: url("../svg/cross.svg"); padding: 5.55556%; }
background-size: 100%;
padding: 5.5555555556%; }
.board-cell .overlay { .board-cell .overlay {
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
top: 0%; top: 10%;
left: 0%; left: 10%;
width: 100%; width: 80%;
height: 100%; height: 80%;
background-image: url("../svg/cross.svg"); border-radius: 50%;
transition: background-image .25s; transition: background-color .25s; }
background-size: 100%; }
.board-cell.small { .board-cell.small {
padding: 5.5555555556%; } padding: 5.55556%; }
.board-cell.medium { .board-cell.medium {
padding: 3.8461538462%; } padding: 3.84615%; }
.board-cell.large { .board-cell.large {
padding: 2.6315789474%; } padding: 2.63158%; }
.black-cell .overlay { .black-cell .overlay {
background-image: url("../svg/black.svg"); } background-color: black; }
.white-cell .overlay { .white-cell .overlay {
background-image: url("../svg/white.svg"); } background-color: white; }
.split-wrapper { .split-wrapper {
display: flex; display: flex;

8
public/scss/main.scss
View File

@ -33,14 +33,14 @@ body {
border-radius: 10px; border-radius: 10px;
} }
.black-player .overlay { .black-player {
&:hover { .board-cell:hover .overlay {
background-color: black; background-color: black;
} }
} }
.white-player .overlay { .white-player {
&:hover { .board-cell:hover .overlay {
background-color: white; background-color: white;
} }
} }