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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledProgressBarThumbLabel = exports.StyledProgressBarStepWrapper = exports.StyledProgressBarStep = exports.StyledProgressBarShine = exports.StyledProgressBarProgressWrapper = exports.StyledProgressBarLabel = exports.StyledProgressBarBackground = exports.StyledProgressBar = exports.StyledMotionProgressBarProgress = void 0;
var _react = require("motion/react");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
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 StyledProgressBar = exports.StyledProgressBar = _styledComponents.default.div`
    position: relative;
`;
const StyledProgressBarBackground = exports.StyledProgressBarBackground = _styledComponents.default.div`
    height: 100%;
    width: 100%;
    background-color: ${({
  theme,
  $color
}) => $color ?? theme['104']};
`;
const StyledProgressBarProgressWrapper = exports.StyledProgressBarProgressWrapper = _styledComponents.default.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 = (0, _styledComponents.keyframes)`
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
`;
const StyledProgressBarShine = exports.StyledProgressBarShine = _styledComponents.default.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;
`;
const StyledMotionProgressBarProgress = exports.StyledMotionProgressBarProgress = (0, _styledComponents.default)(_react.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;
`;
const StyledProgressBarLabel = exports.StyledProgressBarLabel = _styledComponents.default.div`
    font-size: 85%;
    color: ${({
  theme,
  $shouldShowLabelInline
}) => $shouldShowLabelInline ? theme['100'] : theme.headline};
    white-space: nowrap;

    ${({
  $colorSplitPosition,
  $primaryColor,
  $secondaryColor,
  theme
}) => typeof $colorSplitPosition === 'number' && (0, _styledComponents.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}%
            );
        `}
`;
const StyledProgressBarStepWrapper = exports.StyledProgressBarStepWrapper = _styledComponents.default.div`
    height: 100%;
    width: 100%;
    position: absolute;
`;
const StyledProgressBarStep = exports.StyledProgressBarStep = _styledComponents.default.div`
    background-color: ${({
  theme,
  $color
}) => $color ?? theme['102']};
    height: 100%;
    width: 2px;
    position: absolute;
    top: 0;
    left: ${({
  $position
}) => $position}%;
`;
const StyledProgressBarThumbLabel = exports.StyledProgressBarThumbLabel = _styledComponents.default.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