UNPKG

@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
"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