tweak-tools/dist/components/Number/StyledRange.js

Tweak your React projects until awesomeness

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Indicator = exports.RangeWrapper = exports.Scrubber = exports.Range = void 0;
const styles_1 = require("../../styles");
exports.Range = (0, styles_1.styled)('div', {
    position: 'relative',
    width: '100%',
    height: 2,
    borderRadius: '$xs',
    backgroundColor: '$elevation1',
});
exports.Scrubber = (0, styles_1.styled)('div', {
    position: 'absolute',
    width: '$scrubberWidth',
    height: '$scrubberHeight',
    borderRadius: '$xs',
    boxShadow: '0 0 0 2px $colors$elevation2',
    backgroundColor: '$accent2',
    cursor: 'pointer',
    $active: 'none $accent1',
    $hover: 'none $accent3',
    variants: {
        position: {
            left: {
                borderTopRightRadius: 0,
                borderBottomRightRadius: 0,
                transform: 'translateX(calc(-0.5 * ($sizes$scrubberWidth + 4px)))',
            },
            right: {
                borderTopLeftRadius: 0,
                borderBottomLeftRadius: 0,
                transform: 'translateX(calc(0.5 * ($sizes$scrubberWidth + 4px)))',
            },
        },
    },
});
exports.RangeWrapper = (0, styles_1.styled)('div', {
    position: 'relative',
    $flex: '',
    height: '100%',
    cursor: 'pointer',
    touchAction: 'none',
});
exports.Indicator = (0, styles_1.styled)('div', {
    position: 'absolute',
    height: '100%',
    backgroundColor: '$accent2',
});