@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).
50 lines (47 loc) • 1.42 kB
JSX
"use client";
import { css, styled } from "styled-components";
export const Style = styled.div `
position: relative;
/* display: flex; */
/* flex-direction: column; */
width: 100%;
height: -webkit-fill-available;
/* min-height: max-content; */
overflow: hidden auto;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
transition: 0.3s ease;
opacity: 1;
${({ $vertical, $offset, $unit }) => {
const direction = $vertical ? "translateY" : "translateX";
return css `
&[data-active="false"] {
transform: ${direction}(-${$offset}${$unit});
}
&[data-active="true"] ~ &[data-active="false"] {
transform: ${direction}(${$offset}${$unit});
}
`;
}}
&[data-active="false"] {
transform: translate;
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
&[data-active="true"] {
transform: translateX(0);
pointer-events: inherit;
}
`;
export default Style;
//# sourceMappingURL=SlideContent.styled.jsx.map