oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style Kifu to hover 'show menu' text

Browse source
This commit is contained in:
sorrelbri 2020-06-21 17:34:03 -07:00
parent d803f55f5b
commit f14c0ce087
2 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/play-node-go/src/components/GameUI/Kifu/Kifu.js
View file

@ -2,8 +2,15 @@ import React from "react";
import "./Kifu.scss"; import "./Kifu.scss";
const Kifu = () => { const Kifu = () => {
const handleClick = (e) => {
console.log("clicked");
};
return ( return (
<div className="Kifu"> <div className="Kifu">
<p className="Kifu__show-menu" onClick={handleClick}>
Show Menu?
</p>
<div className="Kifu__board"></div> <div className="Kifu__board"></div>
</div> </div>
); );

17
packages/play-node-go/src/components/GameUI/Kifu/Kifu.scss
View file

@ -1,9 +1,26 @@
@import '../../../../public/stylesheets/partials/mixins';
div.Kifu { div.Kifu {
order: 0; order: 0;
height: 10vh; height: 10vh;
width: 8vh; width: 8vh;
background-color: #FFF; background-color: #FFF;
transform: rotate(-20deg); transform: rotate(-20deg);
p.Kifu__show-menu {
display: none;
position: absolute;
transform: rotate(20deg);
width: fit-content;
}
&:hover {
p.Kifu__show-menu {
@include gameViewLabel;
cursor: pointer;
display: inline-block;
}
}
div.Kifu__board { div.Kifu__board {
border: 0.25vh solid #444; border: 0.25vh solid #444;
width: 5vh; width: 5vh;