style Kifu to hover 'show menu' text
This commit is contained in:
parent
d803f55f5b
commit
f14c0ce087
2 changed files with 24 additions and 0 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue