vcc-ui/_src/components/grid/styles.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

export const styles = {
  grid: ({ theme }) => ({
    boxSizing: 'border-box',
    width: '100%',
    maxWidth: 1400,
    margin: '0 auto',
    paddingLeft: theme.baselineGrid * 2,
    paddingRight: theme.baselineGrid * 2,

    // We use onlyM here so that breakpoint orders don't need to be defined by the user
    [theme.breakpoints.onlyM]: {
      paddingLeft: theme.baselineGrid * 3,
      paddingRight: theme.baselineGrid * 3,
    },

    [theme.breakpoints.fromL]: {
      paddingLeft: theme.baselineGrid * 5,
      paddingRight: theme.baselineGrid * 5,
    },
  }),

  row: ({ theme, align }) => ({
    boxSizing: 'border-box',
    justifyContent: align === 'center' ? 'center' : 'flex-' + align,
    marginLeft: -theme.baselineGrid,
    marginRight: -theme.baselineGrid,
    flexDirection: 'row',
    flexWrap: 'wrap',

    [theme.breakpoints.fromL]: {
      marginLeft: theme.baselineGrid * -1.5,
      marginRight: theme.baselineGrid * -1.5,
    },
  }),

  column: ({ theme, sizes: { default: defaultSize, ...otherSizes } }) => ({
    boxSizing: 'border-box',
    flexBasis: `${(defaultSize / 4) * 100}%`,
    maxWidth: `${(defaultSize / 4) * 100}%`,
    paddingLeft: theme.baselineGrid,
    paddingRight: theme.baselineGrid,

    [theme.breakpoints.fromL]: {
      flexBasis: `${(defaultSize / 12) * 100}%`,
      maxWidth: `${(defaultSize / 12) * 100}%`,
      paddingLeft: theme.baselineGrid * 1.5,
      paddingRight: theme.baselineGrid * 1.5,
    },

    extend: [
      {
        condition: otherSizes[theme.breakpoints.fromM],
        style: {
          // We use onlyM here so that breakpoint orders don't need to be defined by the user
          [theme.breakpoints.onlyM]: {
            flexBasis: `${(otherSizes[theme.breakpoints.fromM] / 4) * 100}%`,
            maxWidth: `${(otherSizes[theme.breakpoints.fromM] / 4) * 100}%`,
          },
        },
      },
      {
        condition: otherSizes[theme.breakpoints.fromL],
        style: {
          [theme.breakpoints.fromL]: {
            flexBasis: `${(otherSizes[theme.breakpoints.fromL] / 12) * 100}%`,
            maxWidth: `${(otherSizes[theme.breakpoints.fromL] / 12) * 100}%`,
          },
        },
      },
    ],
  }),
};