blob: 1ec8d1f92722fbdf8b62cbafc4d23e6780e64d15 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
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;
height?: string;
backgroundColor?: ColorOption;
inline?: boolean;
}
export const Flex =
styled.div <
FlexProps >
`
&& {
all: initial;
display: ${props => (props.inline ? 'inline-flex' : 'flex')};
flex-direction: ${props => props.direction};
flex-wrap: ${props => props.flexWrap};
justify-content: ${props => props.justify};
align-items: ${props => props.align};
${props => cssRuleIfExists(props, 'width')}
${props => cssRuleIfExists(props, 'height')}
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
}
`;
Flex.defaultProps = {
direction: 'row',
flexWrap: 'nowrap',
justify: 'center',
align: 'center',
};
Flex.displayName = 'Flex';
|