From f9cf402621994bc71ba832e04539352a8be1aaa8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 3 Jan 2017 11:43:07 +0000 Subject: [PATCH] allow basic Column (without flex) --- ui/src/components/column/index.js | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/ui/src/components/column/index.js b/ui/src/components/column/index.js index 0c89e03b..e4c143f7 100644 --- a/ui/src/components/column/index.js +++ b/ui/src/components/column/index.js @@ -19,6 +19,7 @@ const { const { default: styled, + css } = Styled; const padding = sizes.halfGutterWidth || '0.5rem'; @@ -33,6 +34,17 @@ const width = (fallback) => (size) => (props) => { : fallback; }; +const flexed = (...args) => (props) => { + const isBasic = ( + !props.xs && + !props.sm && + !props.md && + !props.lg + ); + + return !isBasic ? css(...args) : css``; +}; + const flexBasis = width('auto'); const maxWidth = width('none'); const marginLeft = width(0); @@ -50,15 +62,18 @@ const lgOffset = breakpoint('lgOffset', 'large'); module.exports = styled.div` box-sizing: border-box; - flex: 0 0 auto; padding-left: ${padding}; padding-right: ${padding}; - flex-grow: 1; - flex-basis: ${flexBasis('xs')}; - max-width: ${maxWidth('xs')}; - margin-left: ${marginLeft('xsOffset')}; - flex-direction: ${direction('xsReverse')}; + ${flexed` + flex: 0 0 auto; + flex-grow: 1; + + flex-basis: ${flexBasis('xs')}; + max-width: ${maxWidth('xs')}; + margin-left: ${marginLeft('xsOffset')}; + flex-direction: ${direction('xsReverse')}; + `} ${sm` flex-basis: ${flexBasis('sm')};