@chayns-components/swipeable-wrapper
Version:
A set of beautiful React components for developing your own applications with chayns.
58 lines (57 loc) • 1.15 kB
JavaScript
import { motion } from 'motion/react';
import styled, { css } from 'styled-components';
export const StyledMotionSwipeableAction = styled(motion.div)`
background-color: ${_ref => {
let {
$backgroundColor
} = _ref;
return $backgroundColor;
}};
display: flex;
height: 100%;
position: absolute;
top: 0;
width: 200vw;
${_ref2 => {
let {
$position
} = _ref2;
if ($position === 'left') {
return css`
justify-content: flex-end;
right: 100%;
`;
}
return css`
justify-content: flex-start;
left: 100%;
`;
}}
`;
export const StyledSwipeableActionButton = styled.button`
align-items: center;
appearance: none;
background: none;
box-shadow: none;
color: ${_ref3 => {
let {
$color
} = _ref3;
return $color;
}};
display: flex;
flex-direction: column;
font-size: 88%;
gap: 4px;
height: 100%;
justify-content: center;
margin: 0;
padding: 0;
width: ${_ref4 => {
let {
$width
} = _ref4;
return $width;
}};
`;
//# sourceMappingURL=SwipeableAction.styles.js.map