@wener/ui/lib/src/loaders/BoxShuffle.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BoxShuffle = void 0;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const polished_1 = require("polished");
const cbox = (props) => `
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`;
const BoxShuffleContainer = styled_components_1.default.div `
  --size: ${(props) => props['size'] || '3em'};

  .container {
    ${cbox};
    transform-style: preserve-3d;
    perspective: 2000px;
    transform: rotateX(-30deg) rotateY(-45deg);

    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
  }

  .holder {
    ${cbox};
    transform-style: preserve-3d;
    transform: translate3d(0em, var(--size), calc(var(--size) * 0.5));
    &:nth-child(3) {
      transform: rotateY(-90deg) rotateX(90deg) translate3d(0, var(--size), calc(var(--size) * 0.5));
    }
    &:first-child {
      transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, var(--size), calc(var(--size) * 0.5));
    }
  }

  ${(props) => (props.colors || ['#1FBCD3', '#CBE2B4', '#F6B6CA']).map((color, i) => `
    .holder:nth-child(${i + 1}){
      .box{
        background-color: ${color};
        &:before{
          background-color: ${polished_1.darken(0.2, color)};
        }
        &:after{
          background-color: ${polished_1.darken(0.1, color)};
        }
      }
    }
  }
`)}

  .info {
    ${cbox};
    padding-top: 180px;

    .title {
      font-size: 20px;
      font-weight: 400;
      text-align: center;
      color: #212121;
    }

    .detail {
      font-size: 14px;
      font-weight: 200;
      text-align: center;
    }
  }

  .box {
    ${cbox};
    transform-style: preserve-3d;
    animation: ani-box 6s infinite;
    width: var(--size);
    height: var(--size);
    //opacity: .9;
    &:before,
    &:after {
      position: absolute;
      width: 100%;
      height: 100%;
      content: '';
    }
    &:before {
      left: 100%;
      bottom: 0;
      transform: rotateY(90deg);
      transform-origin: 0 50%;
    }
    &:after {
      left: 0;
      bottom: 100%;
      transform: rotateX(90deg);
      transform-origin: 0 100%;
    }
  }

  @keyframes ani-box {
    8.33% {
      transform: translate3d(-50%, -50%, 0) scaleZ(2);
    }
    16.7% {
      transform: translate3d(-50%, -50%, calc(-1 * var(--size))) scaleZ(1);
    }
    25% {
      transform: translate3d(-50%, -100%, calc(-1 * var(--size))) scaleY(2);
    }
    33.3% {
      transform: translate3d(-50%, -150%, calc(-1 * var(--size))) scaleY(1);
    }
    41.7% {
      transform: translate3d(-100%, -150%, calc(-1 * var(--size))) scaleX(2);
    }
    50% {
      transform: translate3d(-150%, -150%, calc(-1 * var(--size))) scaleX(1);
    }
    58.3% {
      transform: translate3d(-150%, -150%, 0) scaleZ(2);
    }
    66.7% {
      transform: translate3d(-150%, -150%, 0) scaleZ(1);
    }
    75% {
      transform: translate3d(-150%, -100%, 0) scaleY(2);
    }
    83.3% {
      transform: translate3d(-150%, -50%, 0) scaleY(1);
    }
    91.7% {
      transform: translate3d(-100%, -50%, 0) scaleX(2);
    }
    100% {
      transform: translate3d(-50%, -50%, 0) scaleX(1);
    }
  }
`;
exports.BoxShuffle = (props) => {
    const { title, detail } = props;
    return (react_1.default.createElement(BoxShuffleContainer, null,
        react_1.default.createElement("div", { className: "container" },
            react_1.default.createElement("div", { className: "holder" },
                react_1.default.createElement("div", { className: "box" })),
            react_1.default.createElement("div", { className: "holder" },
                react_1.default.createElement("div", { className: "box" })),
            react_1.default.createElement("div", { className: "holder" },
                react_1.default.createElement("div", { className: "box" }))),
        react_1.default.createElement("div", { className: "info" },
            react_1.default.createElement("div", { className: "title" }, title),
            react_1.default.createElement("div", { className: "detail" }, detail))));
};
//# sourceMappingURL=BoxShuffle.js.map