2016-10-25 04:15:43 +03:00
|
|
|
/*
|
|
|
|
* based on
|
2016-10-26 12:51:06 +03:00
|
|
|
* github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
|
2016-10-25 04:15:43 +03:00
|
|
|
*/
|
|
|
|
|
2017-02-20 18:15:36 +02:00
|
|
|
import { Baseline } from '../../shared/composers';
|
|
|
|
import { breakpoints, sizes } from '../../shared/constants';
|
|
|
|
import styled, { css } from 'styled-components';
|
2016-12-06 13:50:24 +02:00
|
|
|
|
|
|
|
const fluid = (props) => props.fluid && css`
|
|
|
|
padding-left: ${sizes.outerMargin};
|
|
|
|
padding-right: ${sizes.outerMargin};
|
|
|
|
`;
|
|
|
|
|
2017-02-15 03:19:26 +02:00
|
|
|
const Container = styled.div`
|
2016-12-06 13:50:24 +02:00
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
|
|
|
|
${fluid}
|
|
|
|
|
|
|
|
${breakpoints.small`
|
2017-02-03 13:57:13 +02:00
|
|
|
max-width: ${sizes.containerSm || '46rem'};
|
2016-12-06 13:50:24 +02:00
|
|
|
`}
|
|
|
|
|
|
|
|
${breakpoints.medium`
|
2017-02-03 13:57:13 +02:00
|
|
|
max-width: ${sizes.containerMd || '61rem'};
|
2016-12-06 13:50:24 +02:00
|
|
|
`}
|
|
|
|
|
|
|
|
${breakpoints.large`
|
2017-02-03 13:57:13 +02:00
|
|
|
max-width: ${sizes.containerLg || '71rem'};
|
2016-12-06 13:50:24 +02:00
|
|
|
`}
|
|
|
|
`;
|
2017-02-15 03:19:26 +02:00
|
|
|
|
2017-02-20 18:15:36 +02:00
|
|
|
export default Baseline(
|
2017-02-15 03:19:26 +02:00
|
|
|
Container
|
|
|
|
);
|