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; |