joyent-portal/ui/src/components/container/index.js

51 lines
868 B
JavaScript
Raw Normal View History

/*
* based on
2016-10-26 12:51:06 +03:00
* github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
*/
2017-02-15 03:19:26 +02:00
const composers = require('../../shared/composers');
2016-12-08 19:29:04 +02:00
const constants = require('../../shared/constants');
2016-12-06 13:50:24 +02:00
const Styled = require('styled-components');
const {
breakpoints,
sizes
} = constants;
2017-02-15 03:19:26 +02:00
const {
Baseline
} = composers;
2016-12-06 13:50:24 +02:00
const {
default: styled,
css
} = Styled;
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`
max-width: ${sizes.containerSm || '46rem'};
2016-12-06 13:50:24 +02:00
`}
${breakpoints.medium`
max-width: ${sizes.containerMd || '61rem'};
2016-12-06 13:50:24 +02:00
`}
${breakpoints.large`
max-width: ${sizes.containerLg || '71rem'};
2016-12-06 13:50:24 +02:00
`}
`;
2017-02-15 03:19:26 +02:00
module.exports = Baseline(
Container
);