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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.FlexyItemUI = exports.FlexyBlockUI = exports.FlexyUI = exports.config = void 0;

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

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

var config = {
  gapSize: {
    4: {
      xs: 4,
      sm: 8,
      md: 12,
      lg: 16,
      xl: 20
    },
    5: {
      xs: 5,
      sm: 10,
      md: 15,
      lg: 20,
      xl: 25
    }
  }
};
exports.config = config;
var FlexyUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Flexycss__FlexyUI",
  componentId: "mfgely-0"
})(["align-items:center;display:flex;justify-content:space-between;&.is-align-top{align-items:flex-start;}&.is-align-middle{align-items:center;}&.is-align-bottom{align-items:flex-end;}&.is-align-stretch{align-items:stretch;}&.is-just-default{justify-content:space-between;}&.is-just-left{justify-content:flex-start;}&.is-just-center{justify-content:center;}&.is-just-right{justify-content:flex-end;}", ";"], makeGapStyles);
exports.FlexyUI = FlexyUI;

function makeGapStyles(props) {
  var baseSize = props.baseSize;
  var gapSize = config.gapSize[baseSize];
  return (0, _forEach.default)(gapSize, function (size, value) {
    return "\n    &.is-gap-" + size + " {\n      > * {\n        margin-left: " + value + "px;\n\n        &:first-child {\n          margin-left: 0;\n        }\n      }\n    }\n  ";
  });
}

var FlexyBlockUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Flexycss__FlexyBlockUI",
  componentId: "mfgely-1"
})(["flex:1;max-width:100%;min-width:0;"]);
exports.FlexyBlockUI = FlexyBlockUI;
var FlexyItemUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Flexycss__FlexyItemUI",
  componentId: "mfgely-2"
})(["&.is-inlineItem{max-width:100%;}&.is-defaultItem{max-width:100%;min-width:0;}"]);
exports.FlexyItemUI = FlexyItemUI;