diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 05:59:07 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 05:59:07 +0800 |
commit | a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92 (patch) | |
tree | 29b6cc8e65d18f59044d4536d0ba84157efc8c35 /packages/instant/src/components/ui/flex.tsx | |
parent | 85c34b17aa074e67ed9263094cc0ee75a8f00e60 (diff) | |
download | dexon-sol-tools-a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92.tar.gz dexon-sol-tools-a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92.tar.zst dexon-sol-tools-a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92.zip |
Improve utilities and try to use them in simple form component
Diffstat (limited to 'packages/instant/src/components/ui/flex.tsx')
-rw-r--r-- | packages/instant/src/components/ui/flex.tsx | 10 |
1 files changed, 5 insertions, 5 deletions
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index 544d9fe23..f55f5f8ba 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -3,10 +3,10 @@ import * as React from 'react'; import { ColorOption, styled } from '../../style/theme'; export interface FlexProps { - direction: 'row' | 'column'; - flexWrap: 'wrap' | 'nowrap'; - justify: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; - align: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; + direction?: 'row' | 'column'; + flexWrap?: 'wrap' | 'nowrap'; + justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; + align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; backgroundColor?: ColorOption; className?: string; } @@ -17,7 +17,7 @@ const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className }) export const Flex = styled(PlainFlex)` display: flex; - direction: ${props => props.direction}; + flex-direction: ${props => props.direction}; flex-wrap: ${props => props.flexWrap}; justify-content: ${props => props.justify}; align-items: ${props => props.align}; |