@varlet/ui 2.3.1 → 2.4.0-alpha.1670751751241

package/lib/overlay/props.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  show: {
+    type: Boolean,
+    default: false
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  onClick: {
+    type: Function
+  },
+  teleport: {
+    type: String
+  },
+  'onUpdate:show': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/overlay/style/index.js

@@ -0,0 +1,2 @@
+require('../../styles/common.css')
+require('../overlay.css')

package/lib/popup/Popup.js

@@ -88,7 +88,7 @@ var _default = (0, _vue.defineComponent)({
 
     var renderContent = () => {
       return (0, _vue.createVNode)("div", (0, _vue.mergeProps)({
-        "class": classes(n('content'), n('$-elevation--3'), n("--" + props.position)),
+        "class": classes(n('content'), n("--" + props.position), [props.defaultStyle, n('--content-background-color')], [props.defaultStyle, n('$-elevation--3')]),
         "style": {
           zIndex: zIndex.value
         }

package/lib/popup/popup.css

@@ -1 +1 @@
-:root { --popup-overlay-background-color: rgba(0, 0, 0, 0.6); --popup-content-background-color: #fff;}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; background-color: var(--popup-content-background-color); transition: all 0.25s;}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}
+:root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}

package/lib/popup/props.js

@@ -38,6 +38,10 @@ var props = {
     type: Boolean,
     default: true
   },
+  defaultStyle: {
+    type: Boolean,
+    default: true
+  },
   teleport: {
     type: String
   },

package/lib/result/Empty.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  viewBox: "-4 -4 32 32"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("path", {
+  fill: "currentColor",
+  d: "M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", _hoisted_1, _hoisted_3);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render
+});
+
+exports.default = _default;

package/lib/result/Error.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "2 2 20 20"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("path", {
+  d: "M19,3V5H19V19M17,8.4L13.4,12L17,15.6L15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", _hoisted_1, _hoisted_3);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render
+});
+
+exports.default = _default;

package/lib/result/Info.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "2 3.6 20 20"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("path", {
+  d: "M11,9H13V7H11M11,20H13V11H11V20Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", _hoisted_1, _hoisted_3);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render
+});
+
+exports.default = _default;

package/lib/result/Question.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "-3 -3 30 30"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("path", {
+  d: "M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", _hoisted_1, _hoisted_3);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render
+});
+
+exports.default = _default;

package/lib/result/Result.js

@@ -0,0 +1,117 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _shared = require("@varlet/shared");
+
+var _props = require("./props");
+
+var _components = require("../utils/components");
+
+var _elements = require("../utils/elements");
+
+var _Info = _interopRequireDefault(require("./Info.js"));
+
+var _Error = _interopRequireDefault(require("./Error.js"));
+
+var _Warning = _interopRequireDefault(require("./Warning.js"));
+
+var _Success = _interopRequireDefault(require("./Success.js"));
+
+var _Question = _interopRequireDefault(require("./Question.js"));
+
+var _Empty = _interopRequireDefault(require("./Empty.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('result');
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n('$--box')))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "image", {}, () => [_ctx.type ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('image-container'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('image'), _ctx.n(_ctx.type))),
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.circleSize,
+      height: _ctx.circleSize,
+      borderWidth: _ctx.borderSize
+    })
+  }, [((0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.type), {
+    "border-size": _ctx.borderSize,
+    animation: _ctx.animation
+  }, null, 8
+  /* PROPS */
+  , ["border-size", "animation"]))], 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('title'))
+  }, (0, _vue.toDisplayString)(_ctx.title), 3
+  /* TEXT, CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "description", {}, () => [_ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('description'))
+  }, (0, _vue.toDisplayString)(_ctx.description), 3
+  /* TEXT, CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.$slots.footer ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('footer'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "footer")], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarResult',
+  components: {
+    Info: _Info.default,
+    Success: _Success.default,
+    Warning: _Warning.default,
+    Error: _Error.default,
+    Question: _Question.default,
+    Empty: _Empty.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var circleSize = (0, _vue.computed)(() => {
+      var {
+        imageSize
+      } = props;
+      return "calc(" + (imageSize ? (0, _elements.toSizeUnit)(imageSize) : 'var(--result-image-size)') + " * 0.9)";
+    });
+    var borderSize = (0, _vue.computed)(() => {
+      var {
+        imageSize
+      } = props;
+      return "calc(" + (imageSize ? (0, _elements.toSizeUnit)(props.imageSize) : 'var(--result-image-size)') + " * 0.05)";
+    });
+    return {
+      n,
+      classes,
+      toNumber: _shared.toNumber,
+      toPxNum: _elements.toPxNum,
+      toSizeUnit: _elements.toSizeUnit,
+      circleSize,
+      borderSize
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/result/Success.js

@@ -0,0 +1,86 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _components = require("../utils/components");
+
+var _shared = require("@varlet/shared");
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('result');
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)(_vue.Fragment, null, [(0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.n('success-cover-left'))
+  }, null, 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('success-line'), _ctx.n('success-line-tip'))),
+    style: (0, _vue.normalizeStyle)({
+      animationDuration: _ctx.animation ? "760ms" : '0ms',
+      borderRadius: "calc(" + _ctx.borderSize + " * 0.625)"
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  ), (0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('success-line'), _ctx.n('success-line-long'))),
+    style: (0, _vue.normalizeStyle)({
+      animationDuration: _ctx.animation ? "770ms" : '0ms',
+      borderRadius: "calc(" + _ctx.borderSize + " * 0.625)"
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  ), (0, _vue.createElementVNode)("span", {
+    ref: "circle",
+    class: (0, _vue.normalizeClass)(_ctx.n('success-circle')),
+    style: (0, _vue.normalizeStyle)({
+      left: "-" + _ctx.borderSize,
+      top: "-" + _ctx.borderSize,
+      borderWidth: _ctx.borderSize
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  ), (0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.n('success-line-fix'))
+  }, null, 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.n('success-cover-right')),
+    style: (0, _vue.normalizeStyle)({
+      animationDuration: _ctx.animation ? "4250ms" : '0ms'
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 64
+  /* STABLE_FRAGMENT */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  props: {
+    animation: {
+      type: Boolean
+    },
+    borderSize: {
+      type: String
+    }
+  },
+
+  setup() {
+    return {
+      n,
+      classes,
+      toNumber: _shared.toNumber
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/result/Warning.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "-6 -4 35 35"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("path", {
+  d: "M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M19.75,3.19L18.33,4.61M1,11"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", _hoisted_1, _hoisted_3);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render
+});
+
+exports.default = _default;

package/lib/result/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._ResultComponent = void 0;
+
+var _Result = _interopRequireDefault(require("./Result.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Result.default.install = function (app) {
+  app.component(_Result.default.name, _Result.default);
+};
+
+var _ResultComponent = _Result.default;
+exports._ResultComponent = _ResultComponent;
+var _default = _Result.default;
+exports.default = _default;

package/lib/result/props.js

@@ -0,0 +1,30 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+function typeValidator(type) {
+  return ['info', 'success', 'warning', 'error', 'question', 'empty'].includes(type);
+}
+
+var props = {
+  imageSize: {
+    type: [String, Number]
+  },
+  type: {
+    type: String,
+    default: 'success',
+    validator: typeValidator
+  },
+  title: {
+    type: String
+  },
+  description: {
+    type: String
+  },
+  animation: {
+    type: Boolean,
+    default: true
+  }
+};
+exports.props = props;

package/lib/result/result.css

@@ -0,0 +1 @@
+:root { --result-background: #fff; --result-padding: 24px; --result-border-radius: 3px; --result-title-color: #444; --result-title-font-size: 32px; --result-title-margin: 15px 0 0 0; --result-image-size: 80px; --result-title-font-weight: 500; --result-description-margin: 10px 0 0 0; --result-description-font-size: 14px; --result-description-color: rgba(0, 0, 0, 0.6); --result-description-line-height: 1.6; --result-info-color: var(--color-info); --result-info-border-color: rgba(0, 175, 239, 0.3); --result-success-color: var(--color-success); --result-success-border-color: rgba(0, 196, 143, 0.3); --result-error-color: var(--color-danger); --result-error-border-color: rgba(244, 67, 54, 0.3); --result-warning-color: var(--color-warning); --result-warning-border-color: rgba(255, 159, 0, 0.3); --result-question-color: #607d8b; --result-question-border-color: rgba(96, 125, 139, 0.3); --result-empty-color: #9e9e9e; --result-empty-border-color: rgba(158, 158, 158, 0.3);}.var-result { display: flex; flex-direction: column; align-items: center; border-radius: var(--result-border-radius); width: 100%; padding: var(--result-padding); background-color: var(--result-background); transition: background-color 0.25s;}.var-result__image-container { overflow: hidden;}.var-result__image { margin: 0 auto; position: relative; border-radius: 50%; box-sizing: content-box; border-style: solid; border-color: transparent; width: var(--result-image-size); height: var(--result-image-size); display: flex; justify-content: center; align-items: center;}.var-result__image svg { margin: 0 auto; display: block; width: 100%; height: 100%;}.var-result__info { border-color: var(--result-info-border-color);}.var-result__info path { fill: var(--result-info-color);}.var-result__empty { border-color: var(--result-empty-border-color);}.var-result__empty path { fill: var(--result-empty-color);}.var-result__question { border-color: var(--result-question-border-color);}.var-result__question path { fill: var(--result-question-color);}.var-result__error { border-color: var(--result-error-border-color);}.var-result__error path { fill: var(--result-error-color);}.var-result__warning { border-color: var(--result-warning-border-color);}.var-result__warning path { fill: var(--result-warning-color);}.var-result__success { border-color: var(--result-success-color);}.var-result__success-cover-left { display: block; position: absolute; z-index: 1; top: -0.875%; left: -41.27%; width: 75%; height: 150%; border-radius: 150% 0 0 150%; transform: rotate(-45deg); background: var(--result-background); transition: background-color 0.25s;}.var-result__success-cover-right { display: block; position: absolute; top: -13.75%; left: 37.5%; width: 75%; height: 150%; border-radius: 0 125% 125% 0; animation-name: rotate-circle; animation-timing-function: ease-in; transform-origin: 0 50%; transform: rotate(-45deg); background: var(--result-background); transition: background-color 0.25s;}.var-result__success-line { height: 6.8%; background-color: var(--result-success-color); display: block; position: absolute; z-index: 10; transition: background-color 0.25s;}.var-result__success-line-tip { transform: rotate(45deg); animation-name: success-line-tip; animation-fill-mode: forwards;}.var-result__success-line-long { transform: rotate(-45deg); animation-name: success-line-long; animation-fill-mode: forwards;}.var-result__success-circle { z-index: 10; width: 100%; height: 100%; border-radius: 50%; position: absolute; box-sizing: content-box !important; border-style: solid; border-color: var(--result-success-border-color);}.var-result__success-line-fix { top: 10%; left: 32.5%; width: 8.75%; height: 112.5%; z-index: 1; position: absolute; transform: rotate(-45deg); background: var(--result-background); transition: background-color 0.25s;}@keyframes success-line-tip { 0% { top: 23.75%; left: 1.25%; width: 0; } 54% { top: 20.25%; left: 1%; width: 0; } 70% { top: 43.75%; left: -9.5%; width: 62.5%; } 84% { top: 60%; left: 26.25%; width: 21.25%; } 100% { top: 56.25%; left: 17.5%; width: 31.25%; }}@keyframes success-line-long { 0% { top: 67.5%; right: 57.5%; width: 0; } 65% { top: 67.5%; right: 57.5%; width: 0; } 84% { top: 43.75%; right: 0; width: 68.75%; } 100% { top: 47%; right: 9%; width: 58.75%; }}@keyframes rotate-circle { 0% { transform: rotate(-45deg); } 5% { transform: rotate(-45deg); } 12% { transform: rotate(-405deg); } 100% { transform: rotate(-405deg); }}.var-result__title { font-size: var(--result-title-font-size); word-break: break-word; margin: var(--result-title-margin); font-weight: var(--result-title-font-weight); color: var(--result-title-color); text-align: center;}.var-result__description { font-size: var(--result-description-font-size); word-break: break-word; color: var(--result-description-color); margin: var(--result-description-margin); line-height: var(--result-description-line-height); text-align: center;}.var-result__footer { z-index: 1; margin-top: 20px;}

package/lib/result/style/index.js

@@ -0,0 +1,3 @@
+require('../../styles/common.css')
+require('../result.css')
+require('../ResultSfc.css')