fui-fancyui

Version:
FancyUI Libary
54 lines (49 loc) • 1.69 kB
JavaScript
import { styled as i, css as n } from "styled-components";
import { boxShadow as c } from "../../../design/designFunctions/shadows/shadows.js";
import { getBackgroundColor as d } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js";
import b from "../../../design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator.js";
import { sizeSettings as e } from "./sizeSettings.js";
const a = n`
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: ${({ theme: r }) => r.color.accent[0]};
  border: 4px solid transparent;
  transition: box-shadow 0.2s ease-in-out;
  ${c.sm}

  box-shadow: ${({ $isActive: r, theme: o }) => r && `0 0 0 8px ${b(o.color.accent[0], 0.3)}`};

  &:active {
    background: ${({ theme: r }) => r.color.accent[1]};
  }
`, s = (r) => n`
    height: ${e[r ?? "sm"].height};
    margin: ${e[r ?? "sm"].margin} 0;
  `, h = i.input`
  -webkit-appearance: none;
  width: 100%;
  ${({ $sizeC: r }) => s(r)};
  background: ${({ theme: r, $themeType: o = "primary", $layer: t = 1 }) => d({ theme: r, $themeType: o, $layer: t })};
  border-radius: ${({ theme: r }) => r.borderRadius.complete};
  background-image: ${({ theme: r }) => `linear-gradient(90deg, ${r.color.accent[0]}, ${r.color.accent[0]})`};
  background-size: 70% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  /* Chrome */
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    ${a}
  }

  /* Firefox */
  &::-moz-range-thumb {
    ${a}
  }

  &::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
`;
export {
  h as StyledRawSlider
};