@fluido/react-components
Version:
Fluido webapp components
71 lines (70 loc) • 2.13 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollButton = exports.ScrollableWrapper = void 0;
const styled_components_1 = __importDefault(require("styled-components"));
exports.ScrollableWrapper = styled_components_1.default.div `
--gap: 0.5rem;
--start: calc(var(--gap) * 2);
--end: calc(var(--gap) * 4);
--padding: calc(var(--gap) * 2);
--padding-top: var(--padding);
--padding-bottom: var(--padding);
position: relative;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
ul,
ol {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: var(--gap);
list-style: none;
overflow-x: auto;
overflow-y: visible;
cursor: grab;
padding-inline-start: var(--start);
padding-inline-end: var(--end);
padding-top: var(--padding-top);
padding-bottom: var(--padding-bottom);
margin-block-start: unset;
margin-block-end: unset;
white-space: nowrap;
width: 100%;
scroll-behavior: smooth;
scroll-snap-type: x ${(props) => props.snapType};
scroll-padding-left: ${(props) => props.snap === 'start' && 'var(--start)'};
&:active {
cursor: grabbing;
}
&[data-drag] > * {
user-select: none;
pointer-events: none;
}
& > * {
scroll-snap-align: ${(props) => props.snap};
&:last-child {
padding-inline-end: var(--end);
}
}
}
`;
exports.ScrollButton = styled_components_1.default.button `
padding: 0.5rem;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
appearance: none;
border: 2px solid black;
border-radius: 9999px;
background-color: white;
position: absolute;
z-index: 1;
left: ${(props) => (props.position === 'left' ? 'var(--padding)' : 'auto')};
right: ${(props) => (props.position === 'right' ? 'var(--padding)' : 'auto')};
`;