aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/ui/flex.tsx
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-05 07:27:04 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-05 07:27:04 +0800
commit0cfe5637c048091c9502d49c8526e17cefb1a525 (patch)
treeb6bfde2c8eed26fc93dde160fe64f7fad0af2fdf /packages/instant/src/components/ui/flex.tsx
parente2220a939f75087bf5f7fd1dbb02ed5ae4ec64e4 (diff)
downloaddexon-sol-tools-0cfe5637c048091c9502d49c8526e17cefb1a525.tar
dexon-sol-tools-0cfe5637c048091c9502d49c8526e17cefb1a525.tar.gz
dexon-sol-tools-0cfe5637c048091c9502d49c8526e17cefb1a525.tar.bz2
dexon-sol-tools-0cfe5637c048091c9502d49c8526e17cefb1a525.tar.lz
dexon-sol-tools-0cfe5637c048091c9502d49c8526e17cefb1a525.tar.xz
dexon-sol-tools-0cfe5637c048091c9502d49c8526e17cefb1a525.tar.zst
dexon-sol-tools-0cfe5637c048091c9502d49c8526e17cefb1a525.zip
Create zrx instant container heading
Diffstat (limited to 'packages/instant/src/components/ui/flex.tsx')
-rw-r--r--packages/instant/src/components/ui/flex.tsx3
1 files changed, 3 insertions, 0 deletions
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index f55f5f8ba..327e91926 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,12 +1,14 @@
import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
+import { cssRuleIfExists } from '../../style/util';
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';
+ width?: string;
backgroundColor?: ColorOption;
className?: string;
}
@@ -21,6 +23,7 @@ export const Flex = styled(PlainFlex)`
flex-wrap: ${props => props.flexWrap};
justify-content: ${props => props.justify};
align-items: ${props => props.align};
+ ${props => cssRuleIfExists(props, 'width')}
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
`;