110 lines
2.0 KiB
TypeScript
110 lines
2.0 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
|
|
|
export const TimelineFloat = recipe({
|
|
base: [
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
zIndex: 1,
|
|
minWidth: 'max-content',
|
|
},
|
|
],
|
|
variants: {
|
|
position: {
|
|
Top: {
|
|
top: config.space.S400,
|
|
},
|
|
Bottom: {
|
|
bottom: config.space.S400,
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
position: 'Top',
|
|
},
|
|
});
|
|
|
|
export type TimelineFloatVariants = RecipeVariants<typeof TimelineFloat>;
|
|
|
|
export const CarouselScroller = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'flex',
|
|
gap: config.space.S200,
|
|
overflowX: 'auto',
|
|
overflowY: 'hidden',
|
|
paddingBottom: config.space.S100,
|
|
width: '100%',
|
|
cursor: 'grab',
|
|
userSelect: 'none',
|
|
},
|
|
]);
|
|
|
|
export const CarouselScrollerDragging = style([
|
|
DefaultReset,
|
|
{
|
|
cursor: 'grabbing',
|
|
},
|
|
]);
|
|
|
|
export const CarouselItem = style([
|
|
DefaultReset,
|
|
{
|
|
flex: '0 0 auto',
|
|
maxWidth: '100%',
|
|
},
|
|
]);
|
|
|
|
export const CarouselEdgeGradient = recipe({
|
|
base: [
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
top: 0,
|
|
height: '100%',
|
|
width: toRem(16),
|
|
pointerEvents: 'none',
|
|
zIndex: 1,
|
|
},
|
|
],
|
|
variants: {
|
|
position: {
|
|
Left: {
|
|
left: 0,
|
|
background: `linear-gradient(to right, ${color.Surface.Container}, rgba(116, 116, 116, 0))`,
|
|
},
|
|
Right: {
|
|
right: 0,
|
|
background: `linear-gradient(to left, ${color.Surface.Container}, rgba(116, 116, 116, 0))`,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export const CarouselScrollBtn = recipe({
|
|
base: [
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
top: '50%',
|
|
zIndex: 2,
|
|
},
|
|
],
|
|
variants: {
|
|
position: {
|
|
Left: {
|
|
left: 0,
|
|
transform: 'translate(-25%, -50%)',
|
|
},
|
|
Right: {
|
|
right: 0,
|
|
transform: 'translate(25%, -50%)',
|
|
},
|
|
},
|
|
},
|
|
});
|