ultra-design/lib/modal/modal-style.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');
var _ = require('lodash-es');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
var ___default = /*#__PURE__*/_interopDefaultLegacy(_);

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
var modalWrapperStyles = function modalWrapperStyles(props) {
  var center = props.center,
      top = props.top,
      width = props.width,
      theme = props.theme;
  var radius = theme.style.radius;
  var _theme$theme$mode = theme[theme.mode],
      textColor = _theme$theme$mode.textColor,
      thirdBackgroundColor = _theme$theme$mode.thirdBackgroundColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n    color: ", ";\n    ", "\n    .ultra-modal {\n      position: relative;\n      width: ", ";\n      max-width: 90%;\n      background-color: ", ";\n      padding: 20px;\n      border-radius: ", "px;\n      margin: 0 auto;\n      overflow: auto;\n      ", "\n      font-size: 14px;\n      .ultra-modal-header {\n        display: flex;\n        align-items: center;\n        flex-direction: row-reverse;\n        &__title {\n          flex: 1;\n          margin: 0;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          font-weight: 500;\n          font-size: 16px;\n        }\n\n        &__close {\n          margin-left: 10px;\n          cursor: pointer;\n        }\n      }\n      .ultra-modal-body {\n        padding: 20px 0;\n      }\n      .ultra-modal-footer {\n        text-align: right;\n        button + button {\n          margin-left: 10px;\n        }\n      }\n    }\n\n    /* modal wrapper transition */\n\n    &.ultra-modal-wrapper-enter {\n      transform: scale(0);\n      opacity: 0;\n    }\n    &.ultra-modal-wrapper-enter-active {\n      transform: scale(1);\n      opacity: 1;\n      transition-property: transform opacity;\n      transition: 300ms;\n    }\n    &.ultra-modal-wrapper-exit {\n      opacity: 1;\n      transform: scale(1);\n    }\n    &.ultra-modal-wrapper-exit-active {\n      opacity: 0;\n      transform: scale(0);\n      transition-property: transform opacity;\n      transition: 300ms;\n    }\n  "])), textColor, center && react.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n      text-align: center;\n      &::before {\n        display: inline-block;\n        width: 0;\n        height: 100%;\n        vertical-align: middle;\n        content: '';\n      }\n    "]))), width, thirdBackgroundColor, radius, center ? react.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n            ", "\n            display: inline-block;\n            vertical-align: middle;\n            text-align: left;\n          "])), !___default["default"].isNil(top) && react.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n              top: ", ";\n            "])), top)) : react.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n            top: ", ";\n          "])), top !== null && top !== void 0 ? top : '10vh'));
};
var confirmModalStyles = function confirmModalStyles(_props) {
  return react.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n    .ultra-modal {\n      min-width: 300px;\n      &-header__title {\n        display: flex;\n        align-items: center;\n        .i-icon {\n          display: inline-flex;\n          align-items: center;\n          margin-right: 8px;\n        }\n      }\n      &-body {\n        padding-left: 20px !important;\n        padding-right: 20px !important;\n      }\n    }\n  "])));
};

exports.confirmModalStyles = confirmModalStyles;
exports.modalWrapperStyles = modalWrapperStyles;