From 7190ea2dedf01a097de326f3645ed2bb23a5f918 Mon Sep 17 00:00:00 2001 From: Danila Fedorin Date: Sun, 3 Jun 2018 13:09:20 -0700 Subject: [PATCH] Make cell change color on corner hover. --- public/css/main.css | 35 ++++++++++++++++------------------- public/scss/main.scss | 8 ++++---- 2 files changed, 20 insertions(+), 23 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index 16654ce..8f29cab 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -22,40 +22,37 @@ body { margin: auto; border-radius: 10px; } -.black-player .overlay:hover { - background-image: url("../svg/black.svg"); } +.black-player .board-cell:hover .overlay { + background-color: black; } -.white-player .overlay:hover { - background-image: url("../svg/white.svg"); } +.white-player .board-cell:hover .overlay { + background-color: white; } .board-cell { display: inline-block; position: relative; - background-image: url("../svg/cross.svg"); - background-size: 100%; - padding: 5.5555555556%; } + padding: 5.55556%; } .board-cell .overlay { position: absolute; box-sizing: border-box; - top: 0%; - left: 0%; - width: 100%; - height: 100%; - background-image: url("../svg/cross.svg"); - transition: background-image .25s; - background-size: 100%; } + top: 10%; + left: 10%; + width: 80%; + height: 80%; + border-radius: 50%; + transition: background-color .25s; } .board-cell.small { - padding: 5.5555555556%; } + padding: 5.55556%; } .board-cell.medium { - padding: 3.8461538462%; } + padding: 3.84615%; } .board-cell.large { - padding: 2.6315789474%; } + padding: 2.63158%; } .black-cell .overlay { - background-image: url("../svg/black.svg"); } + background-color: black; } .white-cell .overlay { - background-image: url("../svg/white.svg"); } + background-color: white; } .split-wrapper { display: flex; diff --git a/public/scss/main.scss b/public/scss/main.scss index 7b7e020..7ed5231 100644 --- a/public/scss/main.scss +++ b/public/scss/main.scss @@ -33,14 +33,14 @@ body { border-radius: 10px; } -.black-player .overlay { - &:hover { +.black-player { + .board-cell:hover .overlay { background-color: black; } } -.white-player .overlay { - &:hover { +.white-player { + .board-cell:hover .overlay { background-color: white; } }