39 lines
828 B
JavaScript
39 lines
828 B
JavaScript
import Backdrop from "../../backdrop";
|
|
|
|
import React from "react";
|
|
import styled from "styled-components";
|
|
|
|
const StyledModalBackdrop = styled.div.attrs((props) => ({
|
|
style: {
|
|
backdropFilter: `${
|
|
props.modalSwipeOffset
|
|
? `blur(${18 - props.modalSwipeOffset * -0.15}px)`
|
|
: "blur(18px)"
|
|
}`,
|
|
|
|
background: `${
|
|
props.modalSwipeOffset
|
|
? `rgba(6, 22, 38, ${0.2 - props.modalSwipeOffset * -0.0016})`
|
|
: `rgba(6, 22, 38, 0.2)`
|
|
}`,
|
|
},
|
|
}))`
|
|
display: block;
|
|
height: 100vh;
|
|
position: fixed;
|
|
width: 100vw;
|
|
z-index: 310;
|
|
left: 0;
|
|
top: 0;
|
|
`;
|
|
|
|
const ModalBackdrop = ({ zIndex, modalSwipeOffset, children }) => {
|
|
return (
|
|
<StyledModalBackdrop modalSwipeOffset={modalSwipeOffset}>
|
|
{children}
|
|
</StyledModalBackdrop>
|
|
);
|
|
};
|
|
|
|
export default ModalBackdrop;
|