30 lines
728 B
JavaScript
30 lines
728 B
JavaScript
import styled, { css } from "styled-components";
|
|
import Base from "../themes/base";
|
|
|
|
const StyledBackdrop = styled.div`
|
|
background-color: ${(props) =>
|
|
props.needBackground
|
|
? props.theme.backdrop.backgroundColor
|
|
: props.theme.backdrop.unsetBackgroundColor};
|
|
${(props) =>
|
|
props.needBackground &&
|
|
css`
|
|
backdrop-filter: blur(3px);
|
|
`};
|
|
display: ${(props) => (props.visible ? "block" : "none")};
|
|
height: 100vh;
|
|
position: fixed;
|
|
width: 100vw;
|
|
z-index: ${(props) => props.zIndex};
|
|
left: 0;
|
|
top: 0;
|
|
cursor: ${(props) =>
|
|
props.needBackground && !props.isModalDialog ? "pointer" : "default"}; ;
|
|
`;
|
|
|
|
StyledBackdrop.defaultProps = {
|
|
theme: Base,
|
|
};
|
|
|
|
export default StyledBackdrop;
|