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

React component library for Help Scout's Design System

"use strict";

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

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

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

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

var config = {
  gutter: '15px',
  gridSize: 12
};
exports.config = config;
var ColUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "GridColcss__ColUI",
  componentId: "sc-6xjntx-0"
})(["box-sizing:border-box;min-height:1px;padding-left:", ";padding-right:", ";position:relative;width:100%;", ";"], config.gutter, config.gutter, makeSizeStyles);
exports.ColUI = ColUI;

function makeSizeStyles() {
  var styles = ''; // Media queries don't bump CSS scope. Therefore, the 0-12 size generators
  // can't be lumped into a single for loop. Each media query must have their
  // own 0-12 sizes generated.

  for (var i = 0, len = config.gridSize + 1; i < len; i++) {
    styles += "\n      &.is-" + i + " {\n        width: calc((" + i + " / 12) * 100%);\n      }\n    ";
  }

  for (var _i = 0, _len = config.gridSize + 1; _i < _len; _i++) {
    styles += "\n      @media (min-width: " + _breakpoints.breakpoints.sm + ") {\n        &.is-" + _i + "\\@sm {\n          width: calc((" + _i + " / 12) * 100%);\n        }\n      }\n    ";
  }

  for (var _i2 = 0, _len2 = config.gridSize + 1; _i2 < _len2; _i2++) {
    styles += "\n      @media (min-width: " + _breakpoints.breakpoints.md + ") {\n        &.is-" + _i2 + "\\@md {\n          width: calc((" + _i2 + " / 12) * 100%);\n        }\n      }\n    ";
  }

  for (var _i3 = 0, _len3 = config.gridSize + 1; _i3 < _len3; _i3++) {
    styles += "\n      @media (min-width: " + _breakpoints.breakpoints.lg + ") {\n        &.is-" + _i3 + "\\@lg {\n          width: calc((" + _i3 + " / 12) * 100%);\n        }\n      }\n    ";
  }

  return styles;
}