@sheinx/shineout-style 3.0.0-alpha.1

package/esm/spin/animation.d.ts

@@ -0,0 +1,186 @@
+declare const _default: {
+    '@keyframes keyframesFade': {
+        '0%': {
+            opacity: number;
+        };
+        '39%': {
+            opacity: number;
+        };
+        '40%': {
+            opacity: number;
+        };
+        '100%': {
+            opacity: number;
+        };
+    };
+    '@keyframes keyframesScale': {
+        '0%': {
+            transform: string;
+        };
+        '40%': {
+            transform: string;
+        };
+        '80%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    '@keyframes chasing-dots-1': {
+        '100%': {
+            transform: string;
+        };
+    };
+    '@keyframes chasing-dots-2': {
+        '0%': {
+            transform: string;
+        };
+        '50%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    '@keyframes cube-grid': {
+        '0%,70%,100%': {
+            transform: string;
+        };
+        '35%': {
+            transform: string;
+        };
+    };
+    '@keyframes double-bounce': {
+        '0%,100%': {
+            transform: string;
+        };
+        '50%': {
+            transform: string;
+        };
+    };
+    '@keyframes fading-circle': {
+        '0%,39%,100%': {
+            opacity: number;
+        };
+        '40%': {
+            opacity: number;
+        };
+    };
+    '@keyframes scale-circle': {
+        '0%,80%,100%': {
+            transform: string;
+        };
+        '40%': {
+            transform: string;
+        };
+    };
+    '@keyframes four-dots-1': {
+        '0%': {
+            opacity: number;
+        };
+        '50%': {
+            opacity: number;
+        };
+        '100%': {
+            opacity: number;
+        };
+    };
+    '@keyframes four-dots-2': {
+        '0%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    '@keyframes plane': {
+        '0%': {
+            transform: string;
+        };
+        '50%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    '@keyframes pulse': {
+        '0%': {
+            transform: string;
+        };
+        '100%': {
+            opacity: number;
+            transform: string;
+        };
+    };
+    '@keyframes ring': {
+        '0%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    '@keyframes three-bounce': {
+        '0%,80%,100%': {
+            transform: string;
+        };
+        '40%': {
+            transform: string;
+        };
+    };
+    '@keyframes wave': {
+        '0%,40%,100%': {
+            transform: string;
+        };
+        '20%': {
+            transform: string;
+        };
+    };
+    '@keyframes chasing-ring-1': {
+        '0%': {
+            transform: string;
+        };
+        '44%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    '@keyframes chasing-ring-2': {
+        '0%': {
+            transform: string;
+        };
+        '44%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    '@keyframes chasing-ring-3': {
+        '0%': {
+            transform: string;
+        };
+        '44%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    '@keyframes chasing-ring-4': {
+        '0%': {
+            transform: string;
+        };
+        '44%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+};
+export default _default;

package/esm/spin/animation.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  // defualt
+  '@keyframes keyframesFade': {
+    '0%': {
+      opacity: 0.2
+    },
+    '39%': {
+      opacity: 0.2
+    },
+    '40%': {
+      opacity: 1
+    },
+    '100%': {
+      opacity: 0.2
+    }
+  },
+  '@keyframes keyframesScale': {
+    '0%': {
+      transform: 'scale3d(0, 0, 1)'
+    },
+    '40%': {
+      transform: 'scale3d(1, 1, 1)'
+    },
+    '80%': {
+      transform: 'scale3d(0, 0, 1)'
+    },
+    '100%': {
+      transform: 'scale3d(0, 0, 1)'
+    }
+  },
+  // chasingDots
+  '@keyframes chasing-dots-1': {
+    '100%': {
+      transform: 'rotateZ(360deg)'
+    }
+  },
+  '@keyframes chasing-dots-2': {
+    '0%': {
+      transform: 'scale3d(0, 0, 1)'
+    },
+    '50%': {
+      transform: 'scale3d(1, 1, 1)'
+    },
+    '100%': {
+      transform: 'scale3d(0, 0, 1)'
+    }
+  },
+  // cubeGrid
+  '@keyframes cube-grid': {
+    '0%,70%,100%': {
+      transform: 'scale3d(1, 1, 1)'
+    },
+    '35%': {
+      transform: 'scale3d(0, 0, 1)'
+    }
+  },
+  // doubleBounce
+  '@keyframes double-bounce': {
+    '0%,100%': {
+      transform: 'scale3d(0, 0, 1)'
+    },
+    '50%': {
+      transform: 'scale3d(1, 1, 1)'
+    }
+  },
+  // fadeCircle
+  '@keyframes fading-circle': {
+    '0%,39%,100%': {
+      opacity: 0
+    },
+    '40%': {
+      opacity: 1
+    }
+  },
+  // scaleCircle
+  '@keyframes scale-circle': {
+    '0%,80%,100%': {
+      transform: 'scale3d(0, 0, 1)'
+    },
+    '40%': {
+      transform: 'scale3d(1, 1, 1)'
+    }
+  },
+  // fourDots
+  '@keyframes four-dots-1': {
+    '0%': {
+      opacity: 0.2
+    },
+    '50%': {
+      opacity: 0.9
+    },
+    '100%': {
+      opacity: 0.2
+    }
+  },
+  '@keyframes four-dots-2': {
+    '0%': {
+      transform: 'rotateZ(0deg)'
+    },
+    '100%': {
+      transform: 'rotateZ(359deg)'
+    }
+  },
+  // plane
+  '@keyframes plane': {
+    '0%': {
+      transform: 'perspective(120px) rotateX(0deg) rotateY(0deg)'
+    },
+    '50%': {
+      transform: 'perspective(120px) rotateX(-180.1deg) rotateY(0deg)'
+    },
+    '100%': {
+      transform: 'perspective(120px) rotateX(-180deg) rotateY(-179.9deg)'
+    }
+  },
+  // pulse
+  '@keyframes pulse': {
+    '0%': {
+      transform: 'scale3d(0, 0, 1)'
+    },
+    '100%': {
+      opacity: 0,
+      transform: 'scale3d(1, 1, 1)'
+    }
+  },
+  // ring
+  '@keyframes ring': {
+    '0%': {
+      transform: 'rotateZ(0deg)'
+    },
+    '100%': {
+      transform: 'rotateZ(359deg)'
+    }
+  },
+  // treeBounce
+  '@keyframes three-bounce': {
+    '0%,80%,100%': {
+      transform: 'scale3d(0, 0, 1)'
+    },
+    '40%': {
+      transform: 'scale3d(1, 1, 1)'
+    }
+  },
+  // wave
+  '@keyframes wave': {
+    '0%,40%,100%': {
+      transform: 'scale3d(1, 0.4, 1)'
+    },
+    '20%': {
+      transform: 'scale3d(1, 1, 1)'
+    }
+  },
+  // chasingRing
+  '@keyframes chasing-ring-1': {
+    '0%': {
+      transform: 'rotateZ(0deg)'
+    },
+    '44%': {
+      transform: 'rotateZ(225deg)'
+    },
+    '100%': {
+      transform: 'rotateZ(360deg)'
+    }
+  },
+  '@keyframes chasing-ring-2': {
+    '0%': {
+      transform: 'rotateZ(75deg)'
+    },
+    '44%': {
+      transform: 'rotateZ(225deg)'
+    },
+    '100%': {
+      transform: 'rotateZ(435deg)'
+    }
+  },
+  '@keyframes chasing-ring-3': {
+    '0%': {
+      transform: 'rotateZ(150deg)'
+    },
+    '44%': {
+      transform: 'rotateZ(225deg)'
+    },
+    '100%': {
+      transform: 'rotateZ(510deg)'
+    }
+  },
+  '@keyframes chasing-ring-4': {
+    '0%': {
+      transform: 'rotateZ(225deg)'
+    },
+    '44%': {
+      transform: 'rotateZ(225deg)'
+    },
+    '100%': {
+      transform: 'rotateZ(585deg)'
+    }
+  }
+};
+exports.default = _default;

package/esm/spin/chasing-dots.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    position: string;
+    margin: string;
+    textAlign: string;
+    animation: string;
+    boxSizing: string;
+    '& $item': {
+        position: string;
+        top: number;
+        display: string;
+        width: string;
+        height: string;
+        borderRadius: string;
+        animation: string;
+        fill: string;
+        '&:last-child': {
+            top: string;
+            bottom: number;
+            animationDelay: string;
+        };
+    };
+};
+export default _default;

package/esm/spin/chasing-dots.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var duration = 2;
+var _default = {
+  position: 'relative',
+  margin: 'auto',
+  textAlign: 'center',
+  animation: "$chasing-dots-1 ".concat(duration, "s linear infinite"),
+  boxSizing: 'border-box',
+  '& $item': {
+    position: 'absolute',
+    top: 0,
+    display: 'inline-block',
+    width: '60%',
+    height: '60%',
+    borderRadius: '100%',
+    animation: "$chasing-dots-2 ".concat(duration, "s ease-in-out infinite "),
+    fill: '#197AFA',
+    '&:last-child': {
+      top: 'auto',
+      bottom: 0,
+      animationDelay: "-".concat(duration / 2, "s")
+    }
+  }
+};
+exports.default = _default;

package/esm/spin/chasing-ring.d.ts

@@ -0,0 +1,30 @@
+declare const _default: {
+    position: string;
+    margin: string;
+    boxSizing: string;
+    '& $item': {
+        position: string;
+        top: number;
+        left: number;
+        width: string;
+        height: string;
+        boxSizing: string;
+        border: string;
+        borderRadius: string;
+        transformOrigin: string;
+        borderTopColor: string;
+        '&:nth-child(1)': {
+            animation: string;
+        };
+        '&:nth-child(2)': {
+            animation: string;
+        };
+        '&:nth-child(3)': {
+            animation: string;
+        };
+        '&:nth-child(4)': {
+            animation: string;
+        };
+    };
+};
+export default _default;

package/esm/spin/chasing-ring.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  position: 'relative',
+  margin: 'auto',
+  boxSizing: 'border-box',
+  '& $item': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
+    border: '1px solid transparent',
+    borderRadius: '100%',
+    transformOrigin: '50% 50%',
+    borderTopColor: '#197AFA',
+    '&:nth-child(1)': {
+      animation: '$chasing-ring-1 2s infinite'
+    },
+    '&:nth-child(2)': {
+      animation: '$chasing-ring-2 2s infinite'
+    },
+    '&:nth-child(3)': {
+      animation: '$chasing-ring-3 2s infinite'
+    },
+    '&:nth-child(4)': {
+      animation: '$chasing-ring-4 2s infinite'
+    }
+  }
+};
+exports.default = _default;

package/esm/spin/cube-grid.d.ts

@@ -0,0 +1,39 @@
+declare const _default: {
+    margin: string;
+    '& $item': {
+        width: string;
+        height: string;
+        float: string;
+        animation: string;
+        background: string;
+        boxSizing: string;
+        '&:nth-child(1)': {
+            animationDelay: string;
+        };
+        '&:nth-child(2)': {
+            animationDelay: string;
+        };
+        '&:nth-child(3)': {
+            animationDelay: string;
+        };
+        '&:nth-child(4)': {
+            animationDelay: string;
+        };
+        '&:nth-child(5)': {
+            animationDelay: string;
+        };
+        '&:nth-child(6)': {
+            animationDelay: string;
+        };
+        '&:nth-child(7)': {
+            animationDelay: string;
+        };
+        '&:nth-child(8)': {
+            animationDelay: string;
+        };
+        '&:nth-child(9)': {
+            animationDelay: string;
+        };
+    };
+};
+export default _default;

package/esm/spin/cube-grid.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var delayRange = 0.4;
+var _default = {
+  margin: 'auto',
+  '& $item': {
+    width: '33.33333%',
+    height: '33.3333%',
+    float: 'left',
+    animation: '$cube-grid 1.3s infinite ease-in-out',
+    background: '#197AFA',
+    boxSizing: 'border-box',
+    '&:nth-child(1)': {
+      animationDelay: "".concat(delayRange * 0.5, "s")
+    },
+    '&:nth-child(2)': {
+      animationDelay: "".concat(delayRange * 0.75, "s")
+    },
+    '&:nth-child(3)': {
+      animationDelay: "".concat(delayRange, "s")
+    },
+    '&:nth-child(4)': {
+      animationDelay: "".concat(delayRange * 0.25, "s")
+    },
+    '&:nth-child(5)': {
+      animationDelay: "".concat(delayRange * 0.5, "s")
+    },
+    '&:nth-child(6)': {
+      animationDelay: "".concat(delayRange * 0.75, "s")
+    },
+    '&:nth-child(7)': {
+      animationDelay: "".concat(delayRange * 0, "s")
+    },
+    '&:nth-child(8)': {
+      animationDelay: "".concat(delayRange * 0.25, "s")
+    },
+    '&:nth-child(9)': {
+      animationDelay: "".concat(delayRange * 0.5, "s")
+    }
+  }
+};
+exports.default = _default;

package/esm/spin/default.d.ts

@@ -0,0 +1,9 @@
+declare const Default: (count?: number) => {
+    width: number;
+    height: number;
+    margin: string;
+    position: string;
+    boxSizing: string;
+    '& $item': any;
+};
+export default Default;

package/esm/spin/default.js

@@ -0,0 +1,50 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Default = function Default() {
+  var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 12;
+  var animationDelay = {};
+  for (var i = 1; i < count; i++) {
+    animationDelay["&:nth-child(".concat(i + 1, ")")] = {
+      transform: "rotateZ(".concat(360 / count * i, "deg)"),
+      '& div': {
+        animationDelay: "".concat(-1 + 1 / count * i, "s")
+      }
+    };
+  }
+  var defaultStyle = {
+    width: 54,
+    height: 54,
+    margin: 'auto',
+    position: 'relative',
+    boxSizing: 'border-box',
+    '& $item': _objectSpread({
+      position: 'absolute',
+      top: 0,
+      left: '45%',
+      width: '10%',
+      height: '50%',
+      transformOrigin: '50% 100%',
+      '& div': {
+        height: '55%',
+        margin: '0 auto',
+        background: '#197AFA',
+        borderRadius: 5,
+        animation: '$keyframesFade 1s infinite ease-in-out both'
+      }
+    }, animationDelay)
+  };
+  return defaultStyle;
+};
+var _default = Default;
+exports.default = _default;

package/esm/spin/double-bounce.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    position: string;
+    margin: string;
+    boxSizing: string;
+    '& $item': {
+        position: string;
+        top: number;
+        left: number;
+        width: string;
+        height: string;
+        borderRadius: string;
+        opacity: number;
+        animation: string;
+        background: string;
+        '&:last-child': {
+            animationDelay: string;
+        };
+    };
+};
+export default _default;

package/esm/spin/double-bounce.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  position: 'relative',
+  margin: 'auto',
+  boxSizing: 'border-box',
+  '& $item': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    borderRadius: '50%',
+    opacity: 0.6,
+    animation: '$double-bounce 2s ease-in-out infinite',
+    background: '#197AFA',
+    '&:last-child': {
+      animationDelay: '-1s'
+    }
+  }
+};
+exports.default = _default;