/** @format */ import styled from 'styled-components'; const MainBlock = styled.div` z-index: 999; display: ${({ hidden }) => (hidden ? 'flex' : 'none')}; transition: 0.3s; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box; ${({ rollUp }) => rollUp ? { position: 'fixed', transition: '0.3s', width: '175px', height: '45px', bottom: '115px', left: '50px', borderRadius: '50px', display: 'flex', backgroundColor: '#37404bad', alignItems: 'center', padding: '10px', } : { transition: '0.3s', width: '100%', height: '100%', position: 'fixed', bottom: '0', left: '0', backgroundColor: '#00000061', justifyContent: 'center', alignItems: 'center', }} .rollUpVesion { display: ${({ rollUp }) => (!rollUp ? 'none' : 'flex')}; justify-content: space-between; width: 100%; } .close { background-color: #9d0f23; border-radius: 50px; padding: 7px 17px; font-size: 12px; color: #fff; font-weight: bold; } .rollUpUn { color: #d0d0d1; } `; const ModalContainer = styled.div` display: ${({ rollUp }) => (rollUp ? 'none' : 'block')}; background-color: #29303a; border-radius: 3px; width: 550px; hr { display: ${({ rollUp }) => (rollUp ? 'none' : 'block')}; height: 1px; border-top: 1px solid #4c515a; width: 93%; margin: auto; } `; ModalContainer.Top = styled.div` display: ${({ rollUp }) => (rollUp ? 'none' : 'flex')}; padding: 15px; align-items: center; justify-content: space-between; color: #bdc0c3; .rollUpButton { cursor: pointer; } `; ModalContainer.Head = styled.div` display: ${({ rollUp }) => (rollUp ? 'none' : 'flex')}; padding: 15px; gap: 10px; .round { width: 54px; height: 54px; border-radius: 250px; background-color: #ccc; } .name { color: #fff; font-size: 18px; } `; ModalContainer.Body = styled.div` display: ${({ rollUp }) => (rollUp ? 'none' : 'block')}; padding: 15px; margin: 15px; background-color: #232932; padding: 10px 12px; .title { } .description { } `; ModalContainer.Bottom = styled.div` margin: 15px; display: ${({ rollUp }) => (rollUp ? 'none' : 'block')}; `; ModalContainer.Footer = styled.div` justify-content: ${({ justify }) => (justify ? justify : 'center')}; align-items: center; padding: 15px; gap: 20px; color: #fff; .outcomingEventStyle { display: flex; align-items: center; justify-content: center; gap: 15px; > div { cursor: pointer; border: 1px solid #fff; border-radius: 250px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; } } .transferAreaIcon { position: relative; } .openNumpadAreaIcon { position: relative; } .redButton { background-color: #9d0f23; border-radius: 50px; padding: 10px 24px; font-size: 12; color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px; } .greenButton { background-color: green; border-radius: 50px; padding: 10px 24px; font-size: 12; color: #000; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px; } display: ${({ rollUp }) => (rollUp ? 'none' : 'flex')}; `; export { ModalContainer }; export default MainBlock;