@helpscout/hsds-react/components/SimpleModal/SimpleModal.layouts.css.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.ConfirmationFooterUI = exports.ConfirmationBodyUI = exports.ConfirmationHeadingUI = exports.ConfirmationWrapperUI = exports.FooterUI = exports.BodyUI = exports.HeaderUI = void 0;

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

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

/**
 * Header and Footer layout
 */
var HeaderUI = (0, _styledComponents.default)('header').withConfig({
  displayName: "SimpleModallayoutscss__HeaderUI",
  componentId: "pyrrls-0"
})(["height:58px;padding:0 30px;background-color:#fff;border-radius:4px 4px 0 0;flex-shrink:0;&:not(.with-custom-header-content){display:flex;justify-content:center;flex-direction:column;}h1{margin:0;font-weight:500;font-size:16px;color:", ";}"], (0, _color.getColor)('charcoal.800'));
exports.HeaderUI = HeaderUI;
var BodyUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "SimpleModallayoutscss__BodyUI",
  componentId: "pyrrls-1"
})(["padding:40px 90px;"]);
exports.BodyUI = BodyUI;
var FooterUI = (0, _styledComponents.default)('footer').withConfig({
  displayName: "SimpleModallayoutscss__FooterUI",
  componentId: "pyrrls-2"
})(["height:80px;padding:0 30px;background-color:#f7f9fc;border-radius:0 0 4px 4px;flex-shrink:0;"]);
/**
 * Confirmation layout
 */

exports.FooterUI = FooterUI;
var ConfirmationWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "SimpleModallayoutscss__ConfirmationWrapperUI",
  componentId: "pyrrls-3"
})(["display:flex;flex-direction:column;height:247px;width:440px;padding:50px 50px 60px 50px;&.is-compact{height:197px;}"]);
exports.ConfirmationWrapperUI = ConfirmationWrapperUI;
var ConfirmationHeadingUI = (0, _styledComponents.default)('h1').withConfig({
  displayName: "SimpleModallayoutscss__ConfirmationHeadingUI",
  componentId: "pyrrls-4"
})(["color:", ";font-size:18px;font-weight:500;text-align:center;margin:0 0 6px 0;.is-compact &{margin-bottom:25px;}"], (0, _color.getColor)('charcoal.800'));
exports.ConfirmationHeadingUI = ConfirmationHeadingUI;
var ConfirmationBodyUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "SimpleModallayoutscss__ConfirmationBodyUI",
  componentId: "pyrrls-5"
})(["color:", ";text-align:center;font-size:14px;line-height:22px;font-weight:400;margin-bottom:25px;"], (0, _color.getColor)('charcoal.600'));
exports.ConfirmationBodyUI = ConfirmationBodyUI;
var ConfirmationFooterUI = (0, _styledComponents.default)('footer').withConfig({
  displayName: "SimpleModallayoutscss__ConfirmationFooterUI",
  componentId: "pyrrls-6"
})(["display:flex;justify-content:center;button:first-child{margin-right:10px;}"]);
exports.ConfirmationFooterUI = ConfirmationFooterUI;