@chayns-components/devalue-slider/lib/esm/components/slider/Slider.styles.js

A slider to devalue something.

import { motion } from 'motion/react';
import styled from 'styled-components';
export const Container = styled(motion.div)``;
export const Track = styled(motion.div)`
    user-select: none;
    position: relative;
    z-index: 3;
    height: ${_ref => {
  let {
    $height
  } = _ref;
  return $height;
}}px;
    border-radius: ${_ref2 => {
  let {
    $height
  } = _ref2;
  return $height / 2;
}}px;
    background-color: ${_ref3 => {
  let {
    $backgroundColor
  } = _ref3;
  return $backgroundColor;
}};
`;
export const TrackBackground = styled(motion.div)`
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: ${_ref4 => {
  let {
    $height
  } = _ref4;
  return $height / 2;
}}px;
    z-index: 2;
`;
export const Thumb = styled(motion.div)`
    height: ${_ref5 => {
  let {
    $size
  } = _ref5;
  return $size;
}}px;
    width: ${_ref6 => {
  let {
    $size
  } = _ref6;
  return $size;
}}px;
    border-radius: 50%;
    background-color: white;
    left: ${_ref7 => {
  let {
    $size,
    $trackHeight
  } = _ref7;
  return ($trackHeight - $size - 2) / 2;
}}px;
    bottom: ${_ref8 => {
  let {
    $size,
    $trackHeight
  } = _ref8;
  return ($trackHeight - $size - 2) / 2 + 1;
}}px;
    position: absolute;
    z-index: 3;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 0;
`;
export const TrackText = styled(motion.div)`
    position: absolute;
    line-height: 1.15;
    font-size: ${_ref9 => {
  let {
    $baseFontSize
  } = _ref9;
  return $baseFontSize;
}}px;
    font-weight: 700;
    color: ${_ref0 => {
  let {
    $color
  } = _ref0;
  return $color;
}};
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 1;
    font-family:
        Roboto Regular,
        sans-serif;

    @font-face {
        font-family: 'Roboto Regular';
        font-style: normal;
        font-weight: normal;
        src:
            local('Roboto Regular'),
            local('Roboto Regular'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff2) format('woff2'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff) format('woff'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.ttf)
                format('truetype'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.svg) format('svg');
        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
    }

    @font-face {
        font-family: 'Roboto Regular';
        font-style: italic;
        font-weight: normal;
        src:
            local('Roboto Regular Italic'),
            local('Roboto Regular-Italic'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff2) format('woff2'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff) format('woff'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.ttf) format('truetype'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.svg) format('svg');
        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
    }

    @font-face {
        font-family: 'Roboto Regular';
        font-style: normal;
        font-weight: bold;
        src:
            local('Roboto Regular Bold'),
            local('Roboto Regular-Bold'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff2) format('woff2'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff) format('woff'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.ttf) format('truetype'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.svg) format('svg');
        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
    }

    @font-face {
        font-family: 'Roboto Regular';
        font-style: italic;
        font-weight: bold;
        src:
            local('Roboto Regular Bold Italic'),
            local('Roboto Regular-BoldItalic'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff2)
                format('woff2'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff)
                format('woff'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.ttf)
                format('truetype'),
            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.svg) format('svg');
        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
    }

    @font-face {
        font-family: 'Roboto Bold';
        font-style: normal;
        font-weight: normal;
        src:
            local('Roboto Bold'),
            local('Roboto Bold'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff2) format('woff2'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff) format('woff'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.ttf) format('truetype'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.svg) format('svg');
        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
    }

    @font-face {
        font-family: 'Roboto Bold';
        font-style: italic;
        font-weight: normal;
        src:
            local('Roboto Bold Italic'),
            local('Roboto Bold-Italic'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff2) format('woff2'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff) format('woff'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.ttf) format('truetype'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.svg) format('svg');
        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
    }

    @font-face {
        font-family: 'Roboto Bold';
        font-style: normal;
        font-weight: bold;
        src:
            local('Roboto Bold Bold'),
            local('Roboto Bold-Bold'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff2) format('woff2'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff) format('woff'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.ttf) format('truetype'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.svg) format('svg');
        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
    }

    @font-face {
        font-family: 'Roboto Bold';
        font-style: italic;
        font-weight: bold;
        src:
            local('Roboto Bold Bold Italic'),
            local('Roboto Bold-BoldItalic'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff2) format('woff2'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff) format('woff'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.ttf)
                format('truetype'),
            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.svg) format('svg');
        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;
    }
`;
export const ThumbIconContainer = styled.div`
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
`;
export const ThumbIcon = styled(motion.i).attrs(_ref1 => {
  let {
    icon
  } = _ref1;
  return {
    className: `react-chayns-icon ${icon}`
  };
})`
    font-size: 22px;
    z-index: 1;
    color: black;
    padding: 5px;
`;
export const createThumbVariants = _ref10 => {
  let {
    thumbSize,
    trackWidth,
    scaleFactor
  } = _ref10;
  return {
    base: {
      x: 0,
      backgroundColor: 'white',
      transition: {
        duration: 0.2
      }
    },
    completed: {
      x: (trackWidth - thumbSize * scaleFactor) / 2,
      backgroundColor: 'transparent',
      boxShadow: 'none',
      transition: {
        duration: 0.3
      }
    },
    leaving: {
      scale: [1, 2.4, 1],
      boxShadow: 'none'
    }
  };
};
export const THUMB_ICON_VARIANTS = {
  base: {
    x: [0, 8, 0, 8, 0],
    transition: {
      duration: 1,
      ease: 'easeInOut',
      repeat: Infinity,
      repeatDelay: 5
    }
  },
  dragging: {
    x: 0
  },
  completed: {
    opacity: 1,
    transition: {
      duration: 0
    }
  },
  leaving: {
    opacity: 1,
    scale: [1, 2.4, 1],
    transition: {
      duration: 0.4,
      ease: 'easeInOut'
    }
  }
};
//# sourceMappingURL=Slider.styles.js.map