isometric-react/dist/styles/IsometricGridStyles.js

Isometric styling library made in React with as much flexibility over customization as possible. Rewrite of https://morgancaron.github.io/IsometricSass/ .

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = __importStar(require("styled-components"));
const keyframes_1 = __importDefault(require("./keyframes"));
const after_1 = __importDefault(require("./after"));
const shadowCSS_1 = __importDefault(require("./shadowCSS"));
const IsometricGridStyles = styled_components_1.default.div `
  position: absolute;

  ${({ color, lineweight }) => (0, styled_components_1.css) `
    background-image: linear-gradient(
        ${color} ${lineweight}%,
        transparent ${lineweight}%,
        transparent ${100 - lineweight}%,
        ${color} ${100 - lineweight}%
      ),
      linear-gradient(
        90deg,
        ${color} ${lineweight}%,
        transparent ${lineweight}%,
        transparent ${100 - lineweight}%,
        ${color} ${100 - lineweight}%
      );
  `}

  background-size: ${({ size }) => size}rem ${({ size }) => size}rem;
  width: ${({ size, sizeMultiplier }) => size * sizeMultiplier.width}rem;
  height: ${({ size, sizeMultiplier }) => size * sizeMultiplier.height}rem;

  ${({ position }) => position &&
    (0, styled_components_1.css) `
      top: ${position.top}rem;
      left: ${position.left}rem;
      transform: translateZ(${position.elevation}rem);
    `};

  ${({ shadow }) => shadow &&
    (0, styled_components_1.css) `
      ${after_1.default};
      ${(0, shadowCSS_1.default)(shadow.distance, shadow.spacingX, shadow.spacingY)};
    `};

  ${({ shadowAnimation }) => shadowAnimation &&
    (0, styled_components_1.css) `
      ${after_1.default};
      ${(0, shadowCSS_1.default)(shadowAnimation.from, shadowAnimation.spacingX, shadowAnimation.spacingY)};

      @keyframes ${shadowAnimation.name} {
        from {
          background: rgba(0, 0, 0, ${0.2 / (1 + shadowAnimation.from / 10)});
          border-color: rgba(0, 0, 0, ${0.2 / (1 + shadowAnimation.from / 10)});
          transform: translateX(
              ${shadowAnimation.from * shadowAnimation.spacingX}rem
            )
            translateY(${shadowAnimation.from * shadowAnimation.spacingY}rem)
            translateZ(-${shadowAnimation.from}rem);
          box-shadow: 0 0 ${shadowAnimation.from / 10}rem rgba(0, 0, 0, 0.2);
          filter: blur(${shadowAnimation.from / 10}rem);
        }

        to {
          background: rgba(0, 0, 0, ${0.2 / (1 + shadowAnimation.to / 10)});
          border-color: rgba(0, 0, 0, ${0.2 / (1 + shadowAnimation.to / 10)});
          transform: translateX(
              ${shadowAnimation.to * shadowAnimation.spacingX}rem
            )
            translateY(${shadowAnimation.to * shadowAnimation.spacingY}rem)
            translateZ(-${shadowAnimation.to}rem);
          box-shadow: 0 0 ${shadowAnimation.to / 10}rem rgba(0, 0, 0, 0.2);
          filter: blur(${shadowAnimation.to / 10}rem);
        }
      }

      &::after {
        animation: ${shadowAnimation.name} ${shadowAnimation.duration}
          ease-in-out forwards ${shadowAnimation.options};
        animation-delay: ${shadowAnimation.delay};
      }
    `};

  ${({ animation }) => animation &&
    (0, styled_components_1.css) `
      ${(0, keyframes_1.default)(animation.name, animation.from, animation.to, animation.attribute)};

      ${animation.attribute}: ${animation.from};
      animation: ${animation.name} ${animation.duration} ease-in-out forwards
        ${animation.options};
      animation-delay: ${animation.delay};
    `};

  ${({ rotate }) => rotate &&
    (0, styled_components_1.css) `
      transform-origin: center;
      ${(0, keyframes_1.default)(rotate.name, `rotateZ(${rotate.from})`, `rotateZ(${rotate.to})`)};
      transform: rotateZ(${rotate.from});
      animation: ${rotate.name} ${rotate.duration} linear forwards infinite;
      animation-delay: ${rotate.delay};
    `}
`;
exports.default = IsometricGridStyles;