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

React component library for Help Scout's Design System

"use strict";

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

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

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

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

var config = {
  gutter: '15px',
  size: {
    md: {
      gutter: '8px'
    },
    sm: {
      gutter: '4px'
    },
    xs: {
      gutter: '2px'
    }
  }
};
exports.config = config;
var RowUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "GridRowcss__RowUI",
  componentId: "sc-1s5lv7g-0"
})(["box-sizing:border-box;display:block;margin-left:calc(", " * -1);margin-right:calc(", " * -1);&::after{clear:both;content:'';display:table;}> .c-Col{float:left;}&.is-flex{display:flex;flex-wrap:wrap;> .c-Col{float:initial;}}", ";"], config.gutter, config.gutter, makeSizeStyles);
exports.RowUI = RowUI;

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