All files / styles Flex.js

95% Statements 19/20
67.86% Branches 19/28
92.86% Functions 13/14
100% Lines 19/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74        2x         2x         2x       2x       2x       2x 27x 27x 27x 27x 27x 27x     27x         27x           27x         27x         27x             27x       27x            
import styled from '@appbaseio/vue-emotion';
import { css } from 'emotion';
import { lighten } from 'polished';
 
const leftLabel = css`
	flex-direction: row;
	align-items: center;
`;
 
const rightLabel = css`
	flex-direction: row-reverse;
	align-items: center;
`;
 
const topLabel = css`
	flex-direction: column;
`;
 
const bottomLabel = css`
	flex-direction: column-reverse;
`;
 
const border = ({ theme: { colors } }) => css`
	border: 1px solid ${colors.borderColor || '#ccc'};
`;
 
const Flex = styled('div')`
	display: ${props => (props.inline ? 'inline-flex' : 'flex')};
	${props => (props.labelPosition === 'left' || props.iconPosition === 'right') && leftLabel};
	${props => (props.labelPosition === 'right' || props.iconPosition === 'left') && rightLabel};
	${props => props.labelPosition === 'top' && topLabel};
	${props => props.labelPosition === 'bottom' && bottomLabel};
	${props => props.showBorder && border};
 
	${props =>
		props.justifyContent
		&& css`
			justify-content: ${props.justifyContent};
		`};
	${props =>
		props.alignItems
		&& css`
			align-items: ${props.alignItems};
		`};
 
	${props =>
		props.flex
		&& css`
			flex: ${props.flex};
		`};
	${props =>
		props.direction
		&& css`
			flex-direction: ${props.direction};
		`};
	${props =>
		props.basis
		&& css`
			flex-basis: ${props.basis};
		`};
 
	svg.cancel-icon {
		cursor: pointer;
		fill: ${({ theme: { colors } }) => colors.borderColor || lighten(0.3, colors.textColor)};
		flex-basis: 30px;
 
		&:hover {
			fill: ${({ theme }) => theme.colors.textColor};
		}
	}
`;
 
export default Flex;