@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
33 lines (31 loc) • 1.26 kB
JSX
import { styled } from 'styled-components';
export const SwipeArea = styled.div `
position: absolute;
width: 100%;
height: ${({ $area }) => $area * 2}em !important;
top: ${({ $area }) => `-${$area}`}em;
`;
const Style = styled.div `
font-size: ${({ $scale }) => $scale}em;
background: rgba(var(--black), var(--o09));
position: absolute;
bottom: 0;
display: flex;
width: -webkit-fill-available;
height: ${({ $height }) => (typeof $height === 'number' ? `${$height}em` : $height === 'string' && `${$height}`) || 'max-content'};
margin: 0 !important;
text-align: center;
pointer-events: ${({ $active }) => ($active ? 'initial' : 'none')};
transform: translateY(100%);
transform: translateY(${({ $active }) => $active && '0'});
transition: 0.3s ease;
${({ $height }) => typeof $height === 'object' &&
`min-height: ${typeof $height?.min === 'number' ? `${$height?.min}em` : typeof $height?.min === 'string' && `${$height?.min}`}`};
${({ $height }) => typeof $height === 'object' &&
`max-height: ${typeof $height?.max === 'number' ? `${$height?.max}em` : typeof $height?.max === 'string' && `${$height?.max}`}`};
input {
color: white;
}
`;
export default Style;
//# sourceMappingURL=BottomSheet.styled.jsx.map