@chayns-components/core/lib/esm/components/progress-bar/ProgressBar.styles.js

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

import { motion } from 'motion/react';
import styled, { css, keyframes } from 'styled-components';
export const StyledProgressBar = styled.div`
    position: relative;
`;
export const StyledProgressBarBackground = styled.div`
    height: 100%;
    width: 100%;
    background-color: ${({
  theme,
  $color
}) => $color ?? theme['104']};
`;
export const StyledProgressBarProgressWrapper = styled.div`
    overflow: hidden;
    position: relative;
    width: 100%;
    height: ${({
  $height,
  $isBig
}) => $height || ($isBig ? 20 : 10)}px;
    border-radius: ${({
  $height,
  $isBig
}) => $height || ($isBig ? 20 : 10)}px;
`;
const shineMove = keyframes`
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
`;
export const StyledProgressBarShine = styled.div.attrs(({
  $delay
}) => ({
  style: {
    animationDelay: `${$delay ?? 0}s`
  }
}))`
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 33%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 66%
    );
    transform: translateX(-150%);
    animation: ${shineMove} ${({
  $speed = 5
}) => `${$speed}s`} linear infinite;
    opacity: 0.95;
`;
export const StyledMotionProgressBarProgress = styled(motion.div)`
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 2;
    display: flex;
    align-items: center;
    background-color: ${({
  theme,
  $color
}) => $color ?? theme.headline};
    border-radius: ${({
  $height,
  $isBig
}) => $height || ($isBig ? 20 : 10)}px;
`;
export const StyledProgressBarLabel = styled.div`
    font-size: 85%;
    color: ${({
  theme,
  $shouldShowLabelInline
}) => $shouldShowLabelInline ? theme['100'] : theme.headline};
    white-space: nowrap;

    ${({
  $colorSplitPosition,
  $primaryColor,
  $secondaryColor,
  theme
}) => typeof $colorSplitPosition === 'number' && css`
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;

            display: flex;
            align-items: center;

            padding-left: 8px;

            font-weight: bold;

            -webkit-background-clip: text;

            color: transparent;
            background-image: linear-gradient(
                90deg,
                ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,
                ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%
            );
        `}
`;
export const StyledProgressBarStepWrapper = styled.div`
    height: 100%;
    width: 100%;
    position: absolute;
`;
export const StyledProgressBarStep = styled.div`
    background-color: ${({
  theme,
  $color
}) => $color ?? theme['102']};
    height: 100%;
    width: 2px;
    position: absolute;
    top: 0;
    left: ${({
  $position
}) => $position}%;
`;
export const StyledProgressBarThumbLabel = styled.div`
    position: absolute;
    right: ${({
  $height,
  $isBig
}) => {
  // set div exactly to end of border radius
  if ($height) return $height / 2;
  if ($isBig) return 20 / 2;
  return 10 / 2;
}}px;
    top: 0;
    // revert till POPUPALIGNMENT respect if top or bottom
    // height: 100%;
`;
//# sourceMappingURL=ProgressBar.styles.js.map