react-base-guide/lib/components/range/thumb.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = __importDefault(require("styled-components"));
const getMargin = (left) => {
    if (left === 0) {
        return 0;
    }
    if (left === "100%") {
        return "-15px";
    }
    return "-8px;";
};
const Thumb = styled_components_1.default.div `
  position: absolute;
  box-sizing: border-box;
  -webkit-appearance: none;
  pointer-events: none;
  width: 16px;
  left: ${p => (p.left) || "0"};
  top: 6px;
  height: 16px;
  border-radius: ${p => p.theme.radius.round};
  border: none;
  background: ${p => p.disabled ? p.theme.palette.element.disabled : p.theme.palette.element.primary};
  box-shadow: ${p => p.theme.shadow.element};
  margin-left: ${p => getMargin(p.left)};
  z-index: ${p => p.theme.zIndex.relative};
`;
exports.default = Thumb;
//# sourceMappingURL=thumb.js.map