Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

allow basic Column (without flex)

Browse Source
This commit is contained in:
Sérgio Ramos 2017-01-03 11:43:07 +00:00
parent da9a3dc8b7
commit f9cf402621
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui/src/components/column/index.js
View File

@ -19,6 +19,7 @@ const {
const { const {
default: styled, default: styled,
css
} = Styled; } = Styled;
const padding = sizes.halfGutterWidth || '0.5rem'; const padding = sizes.halfGutterWidth || '0.5rem';
@ -33,6 +34,17 @@ const width = (fallback) => (size) => (props) => {
: fallback; : 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 flexBasis = width('auto');
const maxWidth = width('none'); const maxWidth = width('none');
const marginLeft = width(0); const marginLeft = width(0);
@ -50,15 +62,18 @@ const lgOffset = breakpoint('lgOffset', 'large');
module.exports = styled.div` module.exports = styled.div`
box-sizing: border-box; box-sizing: border-box;
flex: 0 0 auto;
padding-left: ${padding}; padding-left: ${padding};
padding-right: ${padding}; padding-right: ${padding};
flex-grow: 1;
flex-basis: ${flexBasis('xs')}; ${flexed`
max-width: ${maxWidth('xs')}; flex: 0 0 auto;
margin-left: ${marginLeft('xsOffset')}; flex-grow: 1;
flex-direction: ${direction('xsReverse')};
flex-basis: ${flexBasis('xs')};
max-width: ${maxWidth('xs')};
margin-left: ${marginLeft('xsOffset')};
flex-direction: ${direction('xsReverse')};
`}
${sm` ${sm`
flex-basis: ${flexBasis('sm')}; flex-basis: ${flexBasis('sm')};