kwikid-components-react/components/kwikui/loader/Loader.style.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.KwikUIStyleLoaderWrapper = exports.KwikUIStyleLoaderText = exports.KwikUIStyleLoaderContainer = exports.KwikUIStyleLoaderAnimation = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Shape = require("../../../shared/definitions/Shape");
var _Size = require("../../../shared/definitions/Size");
var _Loader = require("./Loader.definition");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const KwikUIStyleLoaderContainer = exports.KwikUIStyleLoaderContainer = _styledComponents.default.div`
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(211, 211, 211, 0.5);
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  gap: 1rem;
  z-index: 9999999;

  ${_ref => {
  let {
    variant
  } = _ref;
  return variant === _Loader.IKwikUILoaderVariant.FULLSCREEN && (0, _styledComponents.css)`
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    `;
}}
`;
const KwikUIStyleLoaderWrapper = exports.KwikUIStyleLoaderWrapper = _styledComponents.default.div`
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 2em 1.5em;
  background-color: var(--kwikui-color-white);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 0.5rem;

  *:not(:last-child) {
    margin-right: 1rem;
  }

  ${_ref2 => {
  let {
    size
  } = _ref2;
  switch (size) {
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          border-radius: var(--kwikui-radius-s);
          padding: calc(2 * var(--kwikui-font-size-s));

          & > * {
            font-size: var(--kwikui-font-size-m);
          }
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          border-radius: var(--kwikui-radius-m);
          padding: calc(2 * var(--kwikui-font-size-m));

          & > * {
            font-size: var(--kwikui-font-size-l);
          }
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          border-radius: var(--kwikui-radius-l);
          padding: calc(2 * var(--kwikui-font-size-l));

          & > * {
            font-size: var(--kwikui-font-size-xl);
          }
        `;
  }
}}

  ${_ref3 => {
  let {
    shape
  } = _ref3;
  switch (shape) {
    case _Shape.IKwikUIShape.ROUNDED:
      return (0, _styledComponents.css)`
          border-radius: 2em;
        `;
    case _Shape.IKwikUIShape.CURVED:
      return (0, _styledComponents.css)`
          border-radius: 0.5em;
        `;
    case _Shape.IKwikUIShape.RECTANGLE:
      return (0, _styledComponents.css)`
          border-radius: 0em;
        `;
  }
}}
`;
const spinAnimation = (0, _styledComponents.keyframes)`
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`;
const KwikUIStyleLoaderAnimation = exports.KwikUIStyleLoaderAnimation = _styledComponents.default.div`
  width: calc(var(--kwikui-font-size-m) + 2px);
  height: calc(var(--kwikui-font-size-m) + 2px);
  border-radius: 100%;
  animation: ${spinAnimation} 0.75s linear infinite;

  border-top: calc(var(--kwikui-font-size-m) / 5) solid
    var(--kwikui-color-primary);
  border-right: calc(var(--kwikui-font-size-m) / 5) solid transparent;
  border-bottom: calc(var(--kwikui-font-size-m) / 5) solid transparent;
  border-left: calc(var(--kwikui-font-size-m) / 5) solid transparent;

  ${_ref4 => {
  let {
    size
  } = _ref4;
  switch (size) {
    case _Size.IKwikUISize.S:
      return (0, _styledComponents.css)`
          border-width: calc(var(--kwikui-font-size-s) / 5);
          width: calc(var(--kwikui-font-size-m) * 1.25);
          height: calc(var(--kwikui-font-size-m) * 1.25);
        `;
    case _Size.IKwikUISize.M:
      return (0, _styledComponents.css)`
          border-width: calc(var(--kwikui-font-size-m) / 5);
          width: calc(var(--kwikui-font-size-l) * 1.25);
          height: calc(var(--kwikui-font-size-l) * 1.25);
        `;
    case _Size.IKwikUISize.L:
      return (0, _styledComponents.css)`
          border-width: calc(var(--kwikui-font-size-l) / 7);
          width: calc(var(--kwikui-font-size-xl) * 1.25);
          height: calc(var(--kwikui-font-size-xl) * 1.25);
        `;
  }
}}
`;
const KwikUIStyleLoaderText = exports.KwikUIStyleLoaderText = _styledComponents.default.div`
  color: #121212;
  font-weight: bold;
`;