tweak-tools/dist/components/ValueInput/StyledInput.js

Tweak your React projects until awesomeness

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputContainer = exports.InnerNumberLabel = exports.InnerLabel = exports.StyledInput = void 0;
const styles_1 = require("../../styles");
exports.StyledInput = (0, styles_1.styled)('input', {
    /* input reset */
    $reset: '',
    padding: '0 $sm',
    width: 0,
    minWidth: 0,
    flex: 1,
    height: '100%',
    variants: {
        tweakType: { number: { textAlign: 'right' } },
        as: { textarea: { padding: '$sm' } },
    },
});
exports.InnerLabel = (0, styles_1.styled)('div', {
    $draggable: '',
    height: '100%',
    $flexCenter: '',
    position: 'relative',
    padding: '0 $xs',
    fontSize: '0.8em',
    opacity: 0.8,
    cursor: 'default',
    touchAction: 'none',
    [`& + ${exports.StyledInput}`]: { paddingLeft: 0 },
});
exports.InnerNumberLabel = (0, styles_1.styled)(exports.InnerLabel, {
    cursor: 'ew-resize',
    marginRight: '-$xs',
    textTransform: 'uppercase',
    opacity: 0.3,
    '&:hover': { opacity: 1 },
    variants: {
        dragging: { true: { backgroundColor: '$accent2', opacity: 1 } },
    },
});
exports.InputContainer = (0, styles_1.styled)('div', {
    $flex: '',
    position: 'relative',
    borderRadius: '$sm',
    overflow: 'hidden',
    color: 'inherit',
    height: '$rowHeight',
    backgroundColor: '$elevation3',
    $inputStyle: '$elevation1',
    $hover: '',
    $focusWithin: '',
    variants: {
        textArea: { true: { height: 'auto' } },
    },
});