2016-10-24 23:58:09 +03:00
|
|
|
/*
|
|
|
|
* based on
|
2016-10-26 12:51:06 +03:00
|
|
|
* github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Col.js
|
2016-10-24 23:58:09 +03:00
|
|
|
*/
|
|
|
|
|
2016-12-06 13:50:24 +02:00
|
|
|
const constants = require('../../shared/constants');
|
|
|
|
const isUndefined = require('lodash.isundefined');
|
|
|
|
const fns = require('../../shared/functions');
|
|
|
|
const Styled = require('styled-components');
|
|
|
|
|
|
|
|
const {
|
|
|
|
breakpoints,
|
|
|
|
sizes
|
|
|
|
} = constants;
|
|
|
|
|
|
|
|
const {
|
|
|
|
calc
|
|
|
|
} = fns;
|
|
|
|
|
|
|
|
const {
|
|
|
|
default: styled,
|
|
|
|
} = Styled;
|
2016-10-24 23:58:09 +03:00
|
|
|
|
2016-12-06 13:50:24 +02:00
|
|
|
const padding = sizes.halfGutterWidth || '0.5rem';
|
|
|
|
|
2016-12-15 16:10:36 +02:00
|
|
|
const direction = (size) => (props) => {
|
|
|
|
return props[size] ? 'column-reverse' : 'column';
|
|
|
|
};
|
|
|
|
|
2016-12-06 13:50:24 +02:00
|
|
|
const width = (fallback) => (size) => (props) => {
|
|
|
|
return !isUndefined(props[size])
|
|
|
|
? calc(`(${props[size]} / ${sizes.gridColumns}) * 100%`)
|
|
|
|
: fallback;
|
2016-10-24 23:58:09 +03:00
|
|
|
};
|
|
|
|
|
2016-12-06 13:50:24 +02:00
|
|
|
const flexBasis = width('auto');
|
|
|
|
const maxWidth = width('none');
|
|
|
|
const marginLeft = width(0);
|
|
|
|
|
|
|
|
const breakpoint = (prop, size) => {
|
|
|
|
return (...args) => (props) => props[prop] && breakpoints[size](...args);
|
2016-10-24 23:58:09 +03:00
|
|
|
};
|
2016-10-25 22:15:33 +03:00
|
|
|
|
2016-12-06 13:50:24 +02:00
|
|
|
const sm = breakpoint('sm', 'small');
|
|
|
|
const smOffset = breakpoint('smOffset', 'small');
|
|
|
|
const md = breakpoint('md', 'medium');
|
|
|
|
const mdOffset = breakpoint('mdOffset', 'medium');
|
|
|
|
const lg = breakpoint('lg', 'large');
|
|
|
|
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')};
|
2016-12-15 16:10:36 +02:00
|
|
|
flex-direction: ${direction('xsReverse')};
|
2016-12-06 13:50:24 +02:00
|
|
|
|
|
|
|
${sm`
|
|
|
|
flex-basis: ${flexBasis('sm')};
|
|
|
|
max-width: ${maxWidth('sm')};
|
2016-12-15 16:10:36 +02:00
|
|
|
flex-direction: ${direction('smReverse')};
|
2016-12-06 13:50:24 +02:00
|
|
|
`}
|
|
|
|
|
|
|
|
${smOffset`
|
|
|
|
margin-left: ${marginLeft('smOffset')};
|
|
|
|
`}
|
|
|
|
|
|
|
|
${md`
|
|
|
|
flex-basis: ${flexBasis('md')};
|
|
|
|
max-width: ${maxWidth('md')};
|
2016-12-15 16:10:36 +02:00
|
|
|
flex-direction: ${direction('mdReverse')};
|
2016-12-06 13:50:24 +02:00
|
|
|
`}
|
|
|
|
|
|
|
|
${mdOffset`
|
|
|
|
margin-left: ${marginLeft('mdOffset')};
|
|
|
|
`}
|
|
|
|
|
|
|
|
${lg`
|
|
|
|
flex-basis: ${flexBasis('lg')};
|
|
|
|
max-width: ${maxWidth('lg')};
|
2016-12-15 16:10:36 +02:00
|
|
|
flex-direction: ${direction('lgReverse')};
|
2016-12-06 13:50:24 +02:00
|
|
|
`}
|
|
|
|
|
|
|
|
${lgOffset`
|
|
|
|
margin-left: ${marginLeft('lgOffset')};
|
|
|
|
`}
|
|
|
|
`;
|