mirror of
https://github.com/luxfi/market.git
synced 2026-09-24 00:25:57 +00:00
68 lines
1.2 KiB
TypeScript
68 lines
1.2 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
import { styled } from 'stitches.config'
|
|
|
|
const flexCss = {
|
|
display: 'flex',
|
|
variants: {
|
|
align: {
|
|
start: {
|
|
alignItems: 'flex-start',
|
|
},
|
|
center: {
|
|
alignItems: 'center',
|
|
},
|
|
end: {
|
|
alignItems: 'flex-end',
|
|
},
|
|
stretch: {
|
|
alignItems: 'stretch',
|
|
},
|
|
baseline: {
|
|
alignItems: 'baseline',
|
|
},
|
|
},
|
|
justify: {
|
|
start: {
|
|
justifyContent: 'flex-start',
|
|
},
|
|
center: {
|
|
justifyContent: 'center',
|
|
},
|
|
end: {
|
|
justifyContent: 'flex-end',
|
|
},
|
|
between: {
|
|
justifyContent: 'space-between',
|
|
},
|
|
},
|
|
direction: {
|
|
row: {
|
|
flexDirection: 'row',
|
|
},
|
|
column: {
|
|
flexDirection: 'column',
|
|
},
|
|
rowReverse: {
|
|
flexDirection: 'row-reverse',
|
|
},
|
|
columnReverse: {
|
|
flexDirection: 'column-reverse',
|
|
},
|
|
},
|
|
wrap: {
|
|
noWrap: {
|
|
flexWrap: 'nowrap',
|
|
},
|
|
wrap: {
|
|
flexWrap: 'wrap',
|
|
},
|
|
wrapReverse: {
|
|
flexWrap: 'wrap-reverse',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
export default styled('div', flexCss)
|
|
export const AnimatedFlex = styled(motion.div, flexCss)
|