fui-fancyui

Version:
FancyUI Libary
36 lines (34 loc) • 1.18 kB
JavaScript
import { css as c, styled as n, keyframes as d } from "styled-components";
import { globalElementSizes as a } from "../../../design/theme/globalSizes.js";
import t from "../../../utils/functions/clampLayer/clampLayer.js";
const b = n.div`
  width: ${({ $sizeW: o }) => o && (o === "fit" ? "100%" : a[o])};
  height: ${({ $sizeH: o }) => o && (o === "fit" ? "100%" : a[o])};
  background-color: ${({ theme: o, $themeType: r = "primary", $layer: i }) => o.color[r][i || 0]};
  animation: ${({ theme: o, $themeType: r, $layer: i }) => l({ theme: o, $themeType: r, $layer: i })} 2s infinite;
  animation-delay: ${({ $index: o = 0 }) => o * 0.1}s;
  border-radius: ${({ theme: o, $borderRadius: r }) => o.borderRadius[r ?? "xs"] || "0px"};
  overflow: hidden;
  position: relative;
  ${({ $aspectRatio: o }) => o && c`
      aspect-ratio: ${o};
    `}

  ${({ $externalStyle: o }) => o};
`, l = ({
  $themeType: o = "primary",
  theme: r,
  $layer: i
}) => d`
  0% {
    background-color: ${r.color[o][i ?? 0]};
  }
  50% {
    background-color: ${r.color[o][i ? t(i + 1) : 1]};
  }
  100% {
    background-color: ${r.color[o][i ?? 0]};
  }
`;
export {
  b as StyledSkeletonBox
};