33 lines
825 B
TypeScript
33 lines
825 B
TypeScript
import styled, { css } from "styled-components";
|
|
import { Base } from "../../themes";
|
|
import { BackdropProps } from "./Backdrop.types";
|
|
|
|
const StyledBackdrop = styled.div<BackdropProps & { needBackground: boolean }>`
|
|
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;
|