quantumai-design-system/dist/components/Form/Input/style.js

퀀텀에이아이의 디자인 시스템

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { css } from '@emotion/react';
import { mixinMargin, mixinWidth, numToPx, transitionSet } from '../../../utils/styleSet';
import { COLORS, TYPOGRAPHYS_STYLE } from '../../../styles/theme';
import { INPUT_COLOR, INPUT_CONTAINER_COLOR, INPUT_OPTION, NUMBER_BUTTON_COLOR } from './options';
export var InputStyle = function (_a) {
    var _b, _c;
    var size = _a.size, disabled = _a.disabled, props = __rest(_a, ["size", "disabled"]);
    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  height: ", ";\n  border-radius: ", ";\n  box-shadow: ", " transparent;\n  border-width: 1px;\n  border-style: solid;\n  box-sizing: border-box;\n  outline: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  ", "\n  ", "\n\n  &:focus-within {\n    box-shadow: ", " ", ";\n  }\n\n  input {\n    width: 100%;\n    height: 100%;\n    padding: 0 15px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    ", ";\n    ", ";\n    z-index: 1;\n    &:disabled {\n      cursor: not-allowed;\n    }\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", "\n  ", "\n"], ["\n  display: inline-flex;\n  height: ", ";\n  border-radius: ", ";\n  box-shadow: ", " transparent;\n  border-width: 1px;\n  border-style: solid;\n  box-sizing: border-box;\n  outline: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  ", "\n  ", "\n\n  &:focus-within {\n    box-shadow: ", " ", ";\n  }\n\n  input {\n    width: 100%;\n    height: 100%;\n    padding: 0 15px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    ", ";\n    ", ";\n    z-index: 1;\n    &:disabled {\n      cursor: not-allowed;\n    }\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", "\n  ", "\n"])), numToPx(INPUT_OPTION[size].height), numToPx(INPUT_OPTION[size].radius), "0 0 0 ".concat((_b = INPUT_OPTION[size]) === null || _b === void 0 ? void 0 : _b.outline), INPUT_CONTAINER_COLOR[disabled ? 'disabled' : 'base'], transitionSet('background-color, border, box-shadow'), "0 0 0 ".concat((_c = INPUT_OPTION[size]) === null || _c === void 0 ? void 0 : _c.outline), COLORS.primaryL, TYPOGRAPHYS_STYLE.subTitle3, INPUT_COLOR, mixinWidth(props), mixinMargin(props));
};
export var InputNumberStyle = function (props) { return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  button {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 100%;\n    border-style: solid;\n    ", "\n    &:disabled {\n      cursor: not-allowed;\n    }\n    &:first-of-type {\n      border-right-width: 1px;\n    }\n    &:last-of-type {\n      border-left-width: 1px;\n    }\n  }\n  input {\n    flex: 1 1 0;\n    &::-webkit-inner-spin-button {\n      appearance: none;\n      -moz-appearance: none;\n      -webkit-appearance: none;\n    }\n  }\n"], ["\n  ", "\n  button {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 100%;\n    border-style: solid;\n    ", "\n    &:disabled {\n      cursor: not-allowed;\n    }\n    &:first-of-type {\n      border-right-width: 1px;\n    }\n    &:last-of-type {\n      border-left-width: 1px;\n    }\n  }\n  input {\n    flex: 1 1 0;\n    &::-webkit-inner-spin-button {\n      appearance: none;\n      -moz-appearance: none;\n      -webkit-appearance: none;\n    }\n  }\n"])), InputStyle(props), NUMBER_BUTTON_COLOR); };
var templateObject_1, templateObject_2;