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

import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
import { css } from '@emotion/react';
import { rotate } from '../styles/animation/rotate.js';

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 css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: ", ";\n          inset: 0;\n          z-index: 1000;\n          display: flex;\n        "])), fullScreen ? 'fixed' : 'absolute') : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          display: inline-flex;\n        "]))), primaryColor, rotate, mask !== false && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background-color: ", ";\n      "])), typeof mask === 'string' ? mask : "".concat(theme.mode === 'dark' ? 'rgba(0, 0, 0, 0.6)' : 'rgba(0, 0, 0, 0.4)')));
};

export { loadingWrapperStyles };