54 lines
870 B
TypeScript
54 lines
870 B
TypeScript
import { styled } from '../stitches.config'
|
|
import Box from './Box'
|
|
|
|
const Flex = styled(Box, {
|
|
display: 'flex',
|
|
variants: {
|
|
row: {
|
|
true: {
|
|
flexDirection: 'row'
|
|
}
|
|
},
|
|
column: {
|
|
true: {
|
|
flexDirection: 'column'
|
|
}
|
|
},
|
|
fluid: {
|
|
true: {
|
|
width: '100%'
|
|
}
|
|
},
|
|
align: {
|
|
start: {
|
|
alignItems: 'start'
|
|
},
|
|
center: {
|
|
alignItems: 'center'
|
|
},
|
|
end: {
|
|
alignItems: 'end'
|
|
}
|
|
},
|
|
justify: {
|
|
start: {
|
|
justifyContent: 'start'
|
|
},
|
|
center: {
|
|
justifyContent: 'center'
|
|
},
|
|
end: {
|
|
justifyContent: 'end'
|
|
},
|
|
'space-between': {
|
|
justifyContent: 'space-between'
|
|
},
|
|
'space-around': {
|
|
justifyContent: 'space-around'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
export default Flex
|