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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.FooterUI = exports.ContentUI = exports.BodyUI = exports.HeaderUI = exports.CloseUI = exports.CardUI = exports.AnimatedCardContainerUI = exports.InnerWrapperUI = exports.ModalUI = exports.modalConfig = void 0;

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

var _classNames = require("../../utilities/classNames");

var _color = require("../../styles/utilities/color");

var _depth = require("../../styles/mixins/depth.css");

var _Animate = _interopRequireDefault(require("../Animate"));

var _Card = _interopRequireDefault(require("../Card"));

var _Toolbar = _interopRequireDefault(require("../Toolbar"));

var modalBodyBEM = (0, _classNames.BEM)('.c-ModalBody');
var modalConfig = {
  closeOffset: '10px',
  offset: '8px',
  wrapperMaxHeight: '98%',
  wrapperMaxWidth: '75%',
  theme: {
    app: {
      marginTop: '50px',
      marginBottom: '30px',
      maxWidth: '560px'
    }
  }
};
exports.modalConfig = modalConfig;
var ModalUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Modalcss__ModalUI",
  componentId: "r4p507-0"
})(["align-items:center;bottom:0;display:flex;justify-content:center;min-height:0;left:0;padding:", ";position:fixed;right:0;top:0;font-family:var(--HSDSGlobalFontFamily);font-size:var(--HSDSGlobalFontSize);&.v2.is-danger{.c-Icon{color:", ";}}&.v2.is-branded,&.v2.is-sequence{.c-ModalBody{text-align:center;", "{padding-top:0px;}}}&.v2.is-alert{.c-ModalBody{text-align:center;}}"], modalConfig.offset, (0, _color.getColor)('red.500'), modalBodyBEM.element('scrollableContent'));
exports.ModalUI = ModalUI;
var InnerWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Modalcss__InnerWrapperUI",
  componentId: "r4p507-1"
})(["display:flex;justify-content:center;max-height:", ";max-width:", ";min-height:0;position:relative;width:auto;z-index:1;", ";&.v2{position:absolute;top:50px;max-width:680px;min-height:400px;max-height:90%;*{box-sizing:border-box;}&.is-default{width:680px;}&.is-alert{min-height:180px;width:440px;max-width:440px;top:auto;}}"], modalConfig.wrapperMaxHeight, modalConfig.wrapperMaxWidth, function (props) {
  return makeHSAppInnerWrapperStyles(props);
});
exports.InnerWrapperUI = InnerWrapperUI;
var AnimatedCardContainerUI = (0, _styledComponents.default)(_Animate.default).withConfig({
  displayName: "Modalcss__AnimatedCardContainerUI",
  componentId: "r4p507-2"
})(["display:flex;max-width:100%;min-height:0;"]);
exports.AnimatedCardContainerUI = AnimatedCardContainerUI;
var CardUI = (0, _styledComponents.default)(_Card.default).withConfig({
  displayName: "Modalcss__CardUI",
  componentId: "r4p507-3"
})(["", " border:none;display:flex;flex-direction:column;min-height:0;outline:none;overflow:hidden;&.v2.is-default{width:680px;}&.v2.is-alert{min-width:440px;padding-bottom:40px;top:auto;}"], _depth.d700);
exports.CardUI = CardUI;
var CloseUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Modalcss__CloseUI",
  componentId: "r4p507-4"
})(["position:absolute;right:", ";top:", ";transform:translateZ(0);z-index:3;"], modalConfig.closeOffset, modalConfig.closeOffset);
exports.CloseUI = CloseUI;

function makeHSAppInnerWrapperStyles(props) {
  if (!props.isHsApp) return '';
  return "\n    margin-bottom: " + modalConfig.theme.app.marginBottom + ";\n    margin-top: " + modalConfig.theme.app.marginTop + ";\n    max-height: calc(\n      " + modalConfig.wrapperMaxHeight + " -\n      " + modalConfig.theme.app.marginTop + " -\n      " + modalConfig.theme.app.marginBottom + "\n    );\n    max-width: " + modalConfig.theme.app.maxWidth + ";\n  ";
}

var HeaderUI = (0, _styledComponents.default)(_Toolbar.default).withConfig({
  displayName: "Modalcss__HeaderUI",
  componentId: "r4p507-5"
})(["border-top-left-radius:4px;border-top-right-radius:4px;"]);
exports.HeaderUI = HeaderUI;
var BodyUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Modalcss__BodyUI",
  componentId: "r4p507-6"
})(["display:flex;flex:1 1 auto;height:100%;max-width:100%;min-height:0;&.is-not-scrollable{padding:20px;}", "{padding:20px;}&.is-seamless{", "{padding:0;}}&.v2{padding:0px;", "{padding:40px 90px 50px;p:first-child{margin-top:0px;}}}"], modalBodyBEM.element('scrollableContent'), modalBodyBEM.element('scrollableContent'), modalBodyBEM.element('scrollableContent'));
exports.BodyUI = BodyUI;
var ContentUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Modalcss__ContentUI",
  componentId: "r4p507-7"
})(["display:flex;flex:1;flex-direction:column;height:100%;min-height:0;"]);
exports.ContentUI = ContentUI;
var FooterUI = (0, _styledComponents.default)(_Toolbar.default).withConfig({
  displayName: "Modalcss__FooterUI",
  componentId: "r4p507-8"
})(["border-bottom-left-radius:4px;border-bottom-right-radius:4px;"]);
exports.FooterUI = FooterUI;