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

'use strict';

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

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');
var rotate = require('../styles/animation/rotate.js');

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;
var loadingWrapperStyles = function loadingWrapperStyles(props) {
  var mask = props.mask,
      fill = props.fill,
      fullScreen = props.fullScreen,
      theme = props.theme;
  var primaryColor = theme.style.primaryColor;
  var textColor = theme[theme.mode].textColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    color: ", ";\n    ", "\n\n    justify-content: center;\n    align-items: center;\n    color: ", ";\n    .ultra-loading {\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      padding: 8px 12px;\n      line-height: 20px;\n      font-size: 14px;\n      &__icon {\n        animation: ", " 1s linear infinite;\n        margin: 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    .ultra-mask {\n      position: absolute;\n      inset: 0;\n      ", ";\n    }\n\n    /* loading wrapper transition */\n\n    &.ultra-loading-wrapper-enter {\n      opacity: 0;\n    }\n    &.ultra-loading-wrapper-enter-active {\n      opacity: 1;\n      transition: opacity 300ms;\n    }\n    &.ultra-loading-wrapper-exit {\n      opacity: 1;\n    }\n    &.ultra-loading-wrapper-exit-active {\n      opacity: 0;\n      transition: opacity 300ms;\n    }\n  "])), textColor, fill || fullScreen ? react.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n          position: ", ";\n          inset: 0;\n          z-index: 1000;\n          display: flex;\n        "])), fullScreen ? 'fixed' : 'absolute') : react.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n          position: relative;\n          display: inline-flex;\n        "]))), primaryColor, rotate.rotate, mask !== false && react.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n        background-color: ", ";\n      "])), typeof mask === 'string' ? mask : "".concat(theme.mode === 'dark' ? 'rgba(0, 0, 0, 0.6)' : 'rgba(0, 0, 0, 0.4)')));
};

exports.loadingWrapperStyles = loadingWrapperStyles;