quantumai-design-system/dist/components/Form/Checkbox/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, numToPx, transitionSet } from '../../../utils/styleSet';
import { CHECKBOX_COLOR, CHECKBOX_OPTION } from './options';
import { COLORS } from '../../../styles/theme';
export var CheckboxStyle = function (_a) {
    var size = _a.size, props = __rest(_a, ["size"]);
    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  box-sizing: border-box;\n\n  .checkbox_style {\n    width: ", ";\n    border-radius: ", ";\n    box-shadow: ", " transparent;\n    aspect-ratio: 1;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    box-sizing: border-box;\n    ", "\n    transition: ", ";\n    svg {\n      display: none;\n    }\n  }\n\n  input[type='checkbox'] {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    pointer-events: none;\n\n    &:checked + .checkbox_style {\n      ", "\n      svg {\n        display: block;\n      }\n    }\n    &:disabled + .checkbox_style {\n      ", "\n      cursor: not-allowed;\n    }\n    &:focus + .checkbox_style {\n      ", "\n      box-shadow: ", " ", ";\n    }\n  }\n\n  .label_text {\n    user-select: none;\n  }\n\n  ", "\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  box-sizing: border-box;\n\n  .checkbox_style {\n    width: ", ";\n    border-radius: ", ";\n    box-shadow: ", " transparent;\n    aspect-ratio: 1;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    box-sizing: border-box;\n    ", "\n    transition: ", ";\n    svg {\n      display: none;\n    }\n  }\n\n  input[type='checkbox'] {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    pointer-events: none;\n\n    &:checked + .checkbox_style {\n      ", "\n      svg {\n        display: block;\n      }\n    }\n    &:disabled + .checkbox_style {\n      ", "\n      cursor: not-allowed;\n    }\n    &:focus + .checkbox_style {\n      ", "\n      box-shadow: ", " ", ";\n    }\n  }\n\n  .label_text {\n    user-select: none;\n  }\n\n  ", "\n"])), numToPx(CHECKBOX_OPTION[size].size), numToPx(CHECKBOX_OPTION[size].radius), "0 0 0 ".concat(CHECKBOX_OPTION[size].outline), CHECKBOX_COLOR.base, transitionSet('border, background-color, box-shadow'), CHECKBOX_COLOR.checked, CHECKBOX_COLOR.disabled, CHECKBOX_COLOR.focus, "0 0 0 ".concat(CHECKBOX_OPTION[size].outline), COLORS.primaryL, mixinMargin(props));
};
var templateObject_1;