quantumai-design-system/dist/components/Form/Radio/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 { RADIO_COLOR, RADIO_OPTION } from './options';
import { COLORS } from '../../../styles/theme';
export var RadioStyle = 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  .radio_style {\n    width: ", ";\n    box-shadow: ", " transparent;\n    position: relative;\n    aspect-ratio: 1;\n    border-radius: 50%;\n    border-width: 1px;\n    border-style: solid;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    ", "\n    transition: ", ";\n    &::after {\n      content: '';\n      width: ", ";\n      position: absolute;\n      aspect-ratio: 1;\n      border-radius: 50%;\n      background-color: ", ";\n      transform: scale(0);\n      transition: ", ";\n    }\n  }\n\n  input[type='radio'] {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    pointer-events: none;\n\n    &:checked + .radio_style {\n      ", "\n      &::after {\n        transform: scale(1);\n      }\n    }\n\n    &:disabled + .radio_style {\n      ", "\n      cursor: not-allowed;\n    }\n\n    &:focus + .radio_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  .radio_style {\n    width: ", ";\n    box-shadow: ", " transparent;\n    position: relative;\n    aspect-ratio: 1;\n    border-radius: 50%;\n    border-width: 1px;\n    border-style: solid;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    ", "\n    transition: ", ";\n    &::after {\n      content: '';\n      width: ", ";\n      position: absolute;\n      aspect-ratio: 1;\n      border-radius: 50%;\n      background-color: ", ";\n      transform: scale(0);\n      transition: ", ";\n    }\n  }\n\n  input[type='radio'] {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    pointer-events: none;\n\n    &:checked + .radio_style {\n      ", "\n      &::after {\n        transform: scale(1);\n      }\n    }\n\n    &:disabled + .radio_style {\n      ", "\n      cursor: not-allowed;\n    }\n\n    &:focus + .radio_style {\n      ", "\n      box-shadow: ", " ", ";\n    }\n  }\n\n  .label_text {\n    user-select: none;\n  }\n\n  ", "\n"])), numToPx(RADIO_OPTION[size].size), "0 0 0 ".concat(RADIO_OPTION[size].outline), RADIO_COLOR.base, transitionSet('border, background-color, box-shadow'), numToPx(RADIO_OPTION[size].innerSize), COLORS.white, transitionSet('transform'), RADIO_COLOR.checked, RADIO_COLOR.disabled, RADIO_COLOR.focus, "0 0 0 ".concat(RADIO_OPTION[size].outline), COLORS.primaryL, mixinMargin(props));
};
var templateObject_1;