Merge pull request #1398 from OwenMelbz/master

Ability to have responsive .container padding

__tests__/containerPlugin.test.js

@@ -180,6 +180,56 @@ test.only('horizontal padding can be included by default', () => {
  `)
 })
 
+test.only('responsive horizontal padding can be included by default', () => {
+ const { components } = processPlugins(
+ [container()],
+ config({
+ theme: {
+ container: {
+ padding: {
+ default: '1rem',
+ sm: '2rem',
+ lg: '4rem',
+ xl: '5rem',
+ },
+ },
+ },
+ })
+ )
+
+ expect(css(components)).toMatchCss(`
+ .container {
+ width: 100%;
+ padding-right: 1rem;
+ padding-left: 1rem
+ }
+ @media (min-width: 576px) {
+ .container {
+ max-width: 576px;
+ padding-right: 2rem;
+ padding-left: 2rem
+ }
+ }
+ @media (min-width: 768px) {
+ .container { max-width: 768px }
+ }
+ @media (min-width: 992px) {
+ .container {
+ max-width: 992px;
+ padding-right: 4rem;
+ padding-left: 4rem
+ }
+ }
+ @media (min-width: 1200px) {
+ .container {
+ max-width: 1200px;
+ padding-right: 5rem;
+ padding-left: 5rem
+ }
+ }
+ `)
+})
+
 test.only('setting all options at once', () => {
  const { components } = processPlugins(
  [container()],

src/plugins/container.js

@@ -22,9 +22,64 @@ function extractMinWidths(breakpoints) {
  })
 }
 
+function mapMinWidthsToPadding(minWidths, screens, paddings) {
+ if (typeof paddings === 'undefined') {
+ return []
+ }
+
+ if (!_.isObject(paddings)) {
+ return [
+ {
+ screen: 'default',
+ minWidth: 0,
+ padding: paddings,
+ },
+ ]
+ }
+
+ const mapping = []
+
+ if (paddings.default) {
+ mapping.push({
+ screen: 'default',
+ minWidth: 0,
+ padding: paddings.default,
+ })
+ }
+
+ _.each(minWidths, minWidth => {
+ Object.keys(screens).forEach(screen => {
+ if (`${screens[screen]}` === `${minWidth}`) {
+ mapping.push({
+ screen,
+ minWidth,
+ padding: paddings[screen],
+ })
+ }
+ })
+ })
+
+ return mapping
+}
+
 module.exports = function() {
  return function({ addComponents, theme }) {
- const minWidths = extractMinWidths(theme('container.screens', theme('screens')))
+ const screens = theme('container.screens', theme('screens'))
+ const minWidths = extractMinWidths(screens)
+ const paddings = mapMinWidthsToPadding(minWidths, screens, theme('container.padding'))
+
+ const generatePaddingFor = minWidth => {
+ const paddingConfig = _.find(paddings, padding => `${padding.minWidth}` === `${minWidth}`)
+
+ if (!paddingConfig) {
+ return {}
+ }
+
+ return {
+ paddingRight: paddingConfig.padding,
+ paddingLeft: paddingConfig.padding,
+ }
+ }
 
  const atRules = _(minWidths)
  .sortBy(minWidth => parseInt(minWidth))
@@ -34,6 +89,7 @@ module.exports = function() {
  [`@media (min-width: ${minWidth})`]: {
  '.container': {
  'max-width': minWidth,
+ ...generatePaddingFor(minWidth),
  },
  },
  }
@@ -45,12 +101,7 @@ module.exports = function() {
  '.container': Object.assign(
  { width: '100%' },
  theme('container.center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {},
- _.has(theme('container', {}), 'padding')
- ? {
- paddingRight: theme('container.padding'),
- paddingLeft: theme('container.padding'),
- }
- : {}
+ generatePaddingFor(0)
  ),
  },
  ...atRules,