@helpscout/hsds-react/components/Grid/Grid.Container.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.ContainerUI = exports.config = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _forEach = _interopRequireDefault(require("../../styles/utilities/forEach"));

var _breakpoints = require("../../styles/mixins/breakpoints.css");

var config = {
  maxWidth: '1140px',
  gutter: '15px',
  size: {
    md: {
      gutter: '8px'
    },
    sm: {
      gutter: '4px'
    },
    xs: {
      gutter: '2px'
    }
  }
};
exports.config = config;
var ContainerUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "GridContainercss__ContainerUI",
  componentId: "sc-1e8dqjr-0"
})(["box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:", ";padding-left:", ";padding-right:", ";&.is-fluid{max-width:100%;}", ";", ";"], config.maxWidth, config.gutter, config.gutter, makeResponsiveStyles, makeSizeStyles);
exports.ContainerUI = ContainerUI;

function makeResponsiveStyles() {
  return (0, _breakpoints.breakpointAll)("\n    &.is-responsive {\n      max-width: 100%;\n    }\n  ");
}

function makeSizeStyles() {
  return (0, _forEach.default)(config.size, function (size, props) {
    return "\n    &.is-" + size + " {\n      padding-left: " + props.gutter + ";\n      padding-right: " + props.gutter + ";\n    }\n  ";
  });
}