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

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

import styled, { css } from 'styled-components';
import { motion } from 'motion/react';
export const StyledBaseSkeleton = styled.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 ? css`
                  color: transparent;
              ` : css`
                  height: ${$height}${typeof $height === 'number' ? 'px' : ''};
              `}
`;
export const StyledMotionBaseSkeletonShimmer = styled(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;
`;
export const StyledMotionBaseSkeletonPulse = styled(motion.div)`
    width: 100%;
    height: 100%;

    position: absolute;

    opacity: 0.06;

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