@hitachivantara/uikit-react-core/dist/cjs/Slider/Slider.styles.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const focusUtils = require("../utils/focusUtils.cjs");
const base = require("./base.cjs");
const dot = {
  position: "absolute",
  bottom: "-1px",
  marginLeft: "0px",
  width: "1px",
  height: "4px",
  border: "none",
  backgroundColor: uikitStyles.theme.colors.border,
  cursor: "pointer",
  verticalAlign: "middle",
  zIndex: "-3"
};
const dragSquare = {
  cursor: "grab",
  width: "calc(100% - 40px)",
  left: "20px",
  height: "27px",
  position: "absolute",
  top: "-12px",
  content: "''",
  background: "transparent",
  borderTop: `12px solid ${uikitStyles.theme.colors.primaryDimmed}`,
  borderBottom: `12px solid ${uikitStyles.theme.colors.primaryDimmed}`,
  zIndex: "-2"
};
const ring = {
  width: "32px",
  height: "32px",
  borderRadius: uikitStyles.theme.radii.full,
  border: `9px solid ${uikitStyles.theme.colors.primaryDimmed}`,
  opacity: "100%",
  content: "''",
  position: "absolute",
  top: "-10px",
  left: "-10px"
};
const border = {
  width: "20px",
  height: "20px",
  borderRadius: uikitStyles.theme.radii.full,
  border: `2px solid ${uikitStyles.theme.colors.textDimmed}`,
  content: "''",
  position: "absolute",
  top: "-4px",
  left: "-4px"
};
const sliderStyles = {
  mark: {
    ...uikitStyles.theme.typography.caption1,
    fontFamily: uikitStyles.theme.fontFamily.body,
    top: "-2px",
    zIndex: -1
  },
  disabledMark: {
    ...uikitStyles.theme.typography.caption1,
    fontFamily: uikitStyles.theme.fontFamily.body,
    color: uikitStyles.theme.colors.textDisabled,
    cursor: "not-allowed",
    top: "-2px"
  },
  dot: {
    ...dot
  },
  dotDisabled: {
    ...dot,
    cursor: "not-allowed"
  },
  knobHidden: { display: "none" },
  knobHiddenLast: {
    borderColor: "transparent",
    height: "3px",
    width: "2px",
    marginLeft: "-1px",
    border: "none",
    marginTop: "0px",
    left: "100%",
    touchAction: "none",
    cursor: "default"
  },
  knobInner: {
    borderColor: "transparent",
    boxShadow: "none",
    backgroundColor: uikitStyles.theme.colors.text,
    width: "16px",
    height: "16px"
  },
  knobOuter: {
    position: "relative",
    borderColor: "transparent",
    borderRadius: uikitStyles.theme.radii.full,
    boxShadow: "none",
    backgroundColor: uikitStyles.theme.colors.border,
    width: "32px",
    height: "32px",
    top: "-80%",
    left: "-80%",
    zIndex: "-1"
  },
  track: {
    backgroundColor: uikitStyles.theme.colors.text,
    height: "3px",
    zIndex: "-1",
    marginTop: "-1px"
  },
  rail: { backgroundColor: uikitStyles.theme.colors.border, height: "1px", zIndex: "-3" }
};
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSlider", {
  sliderBase: { ...base.default },
  rootDisabled: {
    cursor: "not-allowed",
    "&& .rc-slider-disabled": {
      background: "transparent"
    }
  },
  sliderContainer: { marginBottom: "18px", padding: "0 23px" },
  error: { padding: "0 8px" },
  trackDragging: {
    cursor: "grabbing",
    "&& .rc-slider-track": {
      "&::before": {
        ...dragSquare,
        cursor: "grabbing"
      }
    }
  },
  trackStandBy: {
    "&& .rc-slider-track": {
      "&:hover": {
        "&::before": {
          ...dragSquare
        }
      }
    }
  },
  sliderRoot: { zIndex: 0 },
  rootRange: {},
  handleContainer: {
    "&& .rc-slider-handle": {
      cursor: "pointer",
      marginTop: "-8px",
      opacity: 1,
      "&:active": {
        cursor: "grab",
        "&::before": {
          ...ring
        },
        "&::after": {
          ...border
        }
      },
      "&:hover": {
        "&::before": {
          ...ring
        },
        "&::after": {
          ...border
        }
      },
      // Note about the usage of `!important below`: the way the rc-slider allows us to
      // style the knobs is through inline styles. This means that the `box-shadow`, which
      // is an inline style and is set to `none` to prevent the default rc-slider style to
      // show, can't be overridden for the focus scenario unless we use the `!important` flag.
      "&:focus-visible": {
        ...focusUtils.outlineStyles,
        boxShadow: "0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important",
        "&::after": {
          ...border
        }
      }
    }
  },
  handle: {},
  handleContainerDisabled: {
    "&& .rc-slider-handle": {
      cursor: "not-allowed",
      marginTop: "-8px",
      opacity: 1,
      "&:active": {
        cursor: "not-allowed"
      },
      "&:hover": {
        cursor: "not-allowed"
      }
    }
  },
  handleHiddenContainer: { display: "none" },
  labelContainer: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: "12px",
    marginLeft: "20px",
    marginRight: "20px"
  },
  labelIncluded: { justifyContent: "space-between" },
  onlyInput: { justifyContent: "flex-end" },
  label: {},
  root: {},
  sliderTooltip: {
    "&& .rc-slider-tooltip-inner": {
      background: uikitStyles.theme.colors.bgContainer,
      borderRadius: 0,
      maxWidth: "532px",
      height: "100%",
      padding: uikitStyles.theme.space.sm,
      ...uikitStyles.theme.typography.body,
      fontFamily: uikitStyles.theme.fontFamily.body,
      boxShadow: "none"
    },
    "&& .rc-slider-tooltip-arrow": {
      visibility: "hidden"
    }
  }
});
exports.sliderStyles = sliderStyles;
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;