Add popup class

This commit is contained in:
André Wahlberg 2020-11-27 17:04:19 +01:00
parent 6eaa79493e
commit 7e841cfaeb
2 changed files with 51 additions and 0 deletions

32
src/components/Popup.js Normal file
View File

@ -0,0 +1,32 @@
import React, { Component } from 'react';
import './css/Popup.css';
class Popup extends Component {
state = {
visible: false
};
show = () => {
this.setState({
visible: true
});
};
hide = () => {
this.setState({
visible: false
});
};
render() {
return (
<div className={`${this.state.visible ? "visible" : ""}` + " popup"}>
{this.props.children}
</div>
);
}
}
export default Popup;

View File

@ -0,0 +1,19 @@
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transform-origin: center;
background: white;
width: 65vw;
height: 45vh;
box-shadow: var(--boxShadow);
border-radius: var(--borderRadius);
transition: .35s;
z-index: 11;
}
.visible {
pointer-events: all;
transform: translate(-50%, -50%) scale(1);
}