@geezee/react-ui/esm/slider/slider-dot.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
import React from 'react';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
var defaultProps = {
  left: 0,
  disabled: false,
  isClick: false
};
var SliderDot = React.forwardRef(function (_ref, ref) {
  var children = _ref.children,
      disabled = _ref.disabled,
      left = _ref.left,
      isClick = _ref.isClick;
  var theme = useTheme();
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: _JSXStyle.dynamic([["3281908420", [left, theme.palette.success, theme.palette.background, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_4]]]) + " " + "dot ".concat(disabled ? 'disabled' : '', " ").concat(isClick ? 'click' : '')
  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3281908420",
    dynamic: [left, theme.palette.success, theme.palette.background, theme.layout.gapHalf, theme.palette.accents_2, theme.palette.accents_4]
  }, ".dot.__jsx-style-dynamic-selector{position:absolute;left:".concat(left, "%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:1.25rem;line-height:1.25rem;border-radius:0.625rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700;font-size:0.75rem;z-index:100;background-color:").concat(theme.palette.success, ";color:").concat(theme.palette.background, ";text-align:center;padding:0 calc(0.86 * ").concat(theme.layout.gapHalf, ");}.dot.disabled.__jsx-style-dynamic-selector{cursor:not-allowed !important;background-color:").concat(theme.palette.accents_2, ";color:").concat(theme.palette.accents_4, ";}.dot.click.__jsx-style-dynamic-selector{-webkit-transition:all 200ms ease;transition:all 200ms ease;}.dot.__jsx-style-dynamic-selector:hover{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;}.dot.__jsx-style-dynamic-selector:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;}")));
});
export default withDefaults(SliderDot, defaultProps);