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

'use strict';

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

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

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

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

var _templateObject;
var toastWrapperStyles = function toastWrapperStyles(props) {
  var _props$top;

  var theme = props.theme;
  var _theme$style = theme.style,
      radius = _theme$style.radius,
      boxShadow = _theme$style.boxShadow;
  var _theme$theme$mode = theme[theme.mode],
      textColor = _theme$theme$mode.textColor,
      thirdBackgroundColor = _theme$theme$mode.thirdBackgroundColor;
  var top = (_props$top = props.top) !== null && _props$top !== void 0 ? _props$top : '20px';
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    position: fixed;\n    top: ", ";\n    width: 100%;\n    text-align: center;\n    z-index: 1000;\n    pointer-events: none;\n    color: ", ";\n    .ultra-toast {\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      padding: 8px 12px;\n      line-height: 20px;\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: ", ";\n      overflow: auto;\n      font-size: 14px;\n      pointer-events: all;\n\n      &__close {\n        margin-left: 10px;\n        cursor: pointer;\n        display: inline-flex;\n        align-items: center;\n      }\n      &__icon {\n        margin-right: 10px;\n        display: inline-flex;\n        align-items: center;\n        .i-icon {\n          display: inline-flex;\n          align-items: center;\n        }\n      }\n    }\n\n    /* toast wrapper transition */\n\n    &.ultra-toast-wrapper-enter {\n      top: -", ";\n      padding: 0;\n      opacity: 0;\n    }\n    &.ultra-toast-wrapper-enter-active {\n      top: ", ";\n      opacity: 1;\n      transition: all 300ms;\n    }\n    &.ultra-toast-wrapper-exit {\n      top: ", ";\n      opacity: 1;\n    }\n    &.ultra-toast-wrapper-exit-active {\n      top: -", ";\n      padding: 0;\n      opacity: 0;\n      transition: all 300ms;\n    }\n  "])), top, textColor, thirdBackgroundColor, radius, boxShadow, top, top, top, top);
};

exports.toastWrapperStyles = toastWrapperStyles;