@chayns-components/core/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.styles.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledMotionBaseSkeletonShimmer = exports.StyledMotionBaseSkeletonPulse = exports.StyledBaseSkeleton = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _react = require("motion/react");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const StyledBaseSkeleton = exports.StyledBaseSkeleton = _styledComponents.default.div`
    position: relative;
    overflow: hidden;
    border-radius: ${({
  $borderRadius
}) => `${$borderRadius}${typeof $borderRadius === 'number' ? 'px' : ''}`};

    background-color: ${({
  $backgroundColor
}) => $backgroundColor};

    width: ${({
  $width
}) => `${$width}${typeof $width === 'number' ? 'px' : ''}`};

    user-select: none;

    white-space: nowrap;

    ${({
  $shouldUseNativeTag,
  $height
}) => $shouldUseNativeTag ? (0, _styledComponents.css)`
                  color: transparent;
              ` : (0, _styledComponents.css)`
                  height: ${$height}${typeof $height === 'number' ? 'px' : ''};
              `}
`;
const StyledMotionBaseSkeletonShimmer = exports.StyledMotionBaseSkeletonShimmer = (0, _styledComponents.default)(_react.motion.div)`
    background: ${({
  $color
}) => `linear-gradient(
            90deg,
            transparent 0%,
            ${$color} 50%,
            transparent 100%
        )`};

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
    border-radius: 0;

    will-change: transform;

    opacity: 0.06;
`;
const StyledMotionBaseSkeletonPulse = exports.StyledMotionBaseSkeletonPulse = (0, _styledComponents.default)(_react.motion.div)`
    width: 100%;
    height: 100%;

    position: absolute;

    opacity: 0.06;

    background-color: ${({
  $color
}) => $color};
`;
//# sourceMappingURL=BaseSkeleton.styles.js.map