Skip to content

Commit

Permalink
feat(Grid): Using mixed percentual max width, in Containers
Browse files Browse the repository at this point in the history
  • Loading branch information
ddsilva committed May 17, 2019
1 parent 078acd3 commit b8db2b0
Showing 1 changed file with 6 additions and 20 deletions.
26 changes: 6 additions & 20 deletions components/Grid/sub-components/Container.jsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,22 @@
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { query, hide, noGutters } from './shared';
import { hide, noGutters } from './shared';
import { breakpoints } from '../../shared/theme';

const maxWidthStyle = ({ name, maxWidth }, fluid) =>
!fluid && Boolean(maxWidth) && query[name]`max-width: ${maxWidth}px;`;

const Container = styled.div`
width: ${props => props.width || '100%'};
box-sizing: border-box;
padding: var(--gutter);
margin-right: auto;
margin-left: auto;
${({ fluid }) =>
Object.entries(breakpoints)
.map(([name, value]) => ({ name, ...value }))
.sort((a, b) => {
if (!a.maxWidth) {
return 1;
}
if (!b.maxWidth) {
return -1;
}
return a.maxWidth - b.maxWidth;
})
.map(breakpoint => maxWidthStyle(breakpoint, fluid))}
${({ fluid }) => !fluid && 'max-width: 95%;'}
${hide}
${noGutters}
& & {
max-width: 100%;
}
`;

Container.propTypes = {
Expand Down

0 comments on commit b8db2b0

Please sign in to comment.