@smart-react-components/ui/components/Modal/OverlayElement.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = __importDefault(require("styled-components"));
const ModalElement_1 = __importDefault(require("./ModalElement"));
const OverlayElement_1 = __importDefault(require("../Overlay/OverlayElement"));
exports.default = (0, styled_components_1.default)(OverlayElement_1.default)(({ theme, duration, isFullScreen }) => `
  ${isFullScreen
    ? `
      padding: 0;  
    `
    : ''}

  will-change: opacity;

  > ${ModalElement_1.default} {
    will-change: transform;
  }

  &.src-modal-show {
    opacity: 0;

    > ${ModalElement_1.default} {
      transform: translateY(-${theme.$.length.overlay.space.y});
    }
  }

  &.src-modal-show-active {
    opacity: 1;

    > ${ModalElement_1.default} {
      transform: translateY(0);
    }
  }

  &.src-modal-hide {
    opacity: 1;

    > ${ModalElement_1.default} {
      transform: translateY(0);
    }
  }

  &.src-modal-hide-active {
    opacity: 0;

    > ${ModalElement_1.default} {
      transform: translateY(-${theme.$.length.overlay.space.y});
    }
  }

  &.src-modal-show-active,
  &.src-modal-hide-active {
    transition: opacity ${duration}ms 0s ease-in-out;

    > ${ModalElement_1.default} {
      transition: transform ${duration}ms 0s ease-in-out;
    }
  }
`);