@chayns-components/core/lib/cjs/components/slider/Slider.styles.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledSliderThumbLabel = exports.StyledSliderThumb = exports.StyledSliderInput = exports.StyledSlider = exports.StyledHighlightedStep = void 0;
var _react = require("motion/react");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
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 StyledSlider = exports.StyledSlider = _styledComponents.default.div`
    width: 100%;
    height: 30px;
    cursor: ${({
  $isDisabled
}) => $isDisabled ? 'default' : 'pointer'} !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
`;
const StyledSliderInput = exports.StyledSliderInput = (0, _styledComponents.default)(_react.motion.input).attrs(({
  $background,
  $isInterval,
  $thumbWidth
}) => ({
  style: {
    pointerEvents: $isInterval ? 'none' : 'all',
    width: `calc(100% - ${$thumbWidth}px)`,
    background: $background
  }
}))`
    position: absolute;
    border-radius: 100px;
    -webkit-appearance: none;

    outline: none;
    cursor: pointer !important;
    z-index: 2;
    appearance: none;

    // Slider thumb for chrome
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 50px;
        height: 20px;
        cursor: pointer;
        opacity: 0;
        pointer-events: all;
        position: relative;
    }

    // slider thumb for firefox

    &::-moz-range-thumb {
        width: 50px;
        height: 20px;
        cursor: pointer;
        opacity: 0;
        pointer-events: all;
        position: relative;
    }
`;
const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.div.attrs(({
  $position,
  $isBigSlider
}) => ({
  style: {
    left: `${$position}px`,
    height: `${$isBigSlider ? 0 : 20}px`
  }
}))`
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 100px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 5;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    white-space: nowrap;
    top: 5px;

    ${({
  $shouldShowFocusRing
}) => $shouldShowFocusRing && (0, _styledComponents.css)`
            ${_keyboardFocusHighlighting.keyboardFocusHighlightingCircleRingCss}
        `}

    transition: top 0.2s ease 0s;
`;
const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponents.default.span.attrs(({
  $position,
  $isBigSlider,
  $width
}) => ({
  style: {
    minWidth: `${$width}px`,
    top: `-${$isBigSlider ? 56 : 48}px`,
    left: `${$position}px`
  }
}))`
    pointer-events: none;
    color: #222;

    height: 20px;
    cursor: pointer;
    border-radius: 3px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 3;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    white-space: nowrap;

    transition: top 0.2s ease 0s;

    &::after {
        background-color: inherit;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);
        content: '';
        height: 14px;
        position: absolute;
        width: 14px;
        z-index: -2;
        left: ${({
  $position
}) => $position * -1}px;
        transform: rotate(225deg);
        bottom: -7px;
    }

    &::before {
        background-color: inherit;
        bottom: 0;
        content: '';
        left: 0;
        position: absolute;
        right: 0;
        border-radius: 3px;
        top: 0;
        z-index: -1;
    }
`;
const StyledHighlightedStep = exports.StyledHighlightedStep = _styledComponents.default.div`
    background-color: ${({
  $isDisabled,
  $isFilled,
  theme
}) => {
  if ($isDisabled) return 'rgb(215, 215, 215)';
  if ($isFilled) return theme['409'];
  return theme['403'];
}};
    border-radius: 50%;
    height: 18px;
    left: ${({
  $leftPosition
}) => $leftPosition}px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    z-index: 3;
`;
//# sourceMappingURL=Slider.styles.js.map