@helpscout/hsds-react/components/Inline/Inline.css.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.ItemUI = exports.InlineUI = exports.config = void 0;

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

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

var config = {
  defaultSpacing: '4px',
  spacing: {
    xs: '2px',
    sm: '4px',
    md: '8px',
    lg: '10px'
  }
};
exports.config = config;
var InlineUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Inlinecss__InlineUI",
  componentId: "dlj92l-0"
})(["display:block;margin-bottom:calc(", " * -1);margin-left:0;max-width:100%;padding-left:0;&:after{box-sizing:border-box;content:' ';clear:both;display:table;}&:last-child{margin-bottom:calc(", " * -1);}", ";"], config.defaultSpacing, config.defaultSpacing, makeSizeStyles);
exports.InlineUI = InlineUI;
var ItemUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Inlinecss__ItemUI",
  componentId: "dlj92l-1"
})(["display:inline-block;margin:0 ", " ", " 0;max-width:100%;padding:0;vertical-align:middle;"], config.defaultSpacing, config.defaultSpacing);
exports.ItemUI = ItemUI;

function makeSizeStyles() {
  return (0, _forEach.default)(config.spacing, function (size, value) {
    return "\n    &.is-" + size + " {\n      margin-bottom: calc(" + value + " * -1);\n\n      &:last-child {\n        margin-bottom: calc(" + value + " * -1);\n      }\n\n      .c-InlineItem {\n        margin-bottom: " + value + ";\n        margin-right: " + value + ";\n      }\n    }\n  ";
  });
}