quantumai-design-system/dist/components/Form/Button/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 { BUTTON_COLOR, BUTTON_OPTION, BUTTON_ICON_COLOR, BUTTON_ICON_OPTION } from './options';
import { BASE_SHADOW, COLORS, TYPOGRAPHYS_STYLE } from '../../../styles/theme';
import { mixinMargin, mixinWidth, numToPx, transitionSet } from '../../../utils/styleSet';
export var ButtonStyle = function (_a) {
    var size = _a.size, isLine = _a.isLine, props = __rest(_a, ["size", "isLine"]);
    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  height: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  ", "\n  ", ";\n  svg {\n    margin-right: 2px;\n    ", ";\n  }\n  span {\n    ", "\n    ", ";\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  ", "\n  ", "\n  ", "\n"], ["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  height: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  ", "\n  ", ";\n  svg {\n    margin-right: 2px;\n    ", ";\n  }\n  span {\n    ", "\n    ", ";\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  ", "\n  ", "\n  ", "\n"])), numToPx(BUTTON_OPTION[size].height), numToPx(BUTTON_OPTION[size].radius), "0 ".concat(BUTTON_OPTION[size].padding, "px"), BUTTON_COLOR[isLine ? 'line' : 'fill'], transitionSet('background-color, border-color'), transitionSet('fill'), TYPOGRAPHYS_STYLE[BUTTON_OPTION[size].textType], transitionSet('color'), BUTTON_COLOR.common, mixinMargin(props), mixinWidth(props));
};
export var ButtonIconStyle = function (_a) {
    var size = _a.size, dot = _a.dot, props = __rest(_a, ["size", "dot"]);
    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-flex;\n  position: relative;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  aspect-ratio: 1;\n  border-width: ", ";\n  border-style: solid;\n  box-shadow: ", ";\n  height: ", ";\n  border-radius: ", ";\n  ::after {\n    content: '';\n    width: 4px;\n    aspect-ratio: 1;\n    border-radius: 50%;\n    position: absolute;\n    background-color: ", ";\n    right: 1px;\n    top: 1px;\n    display: ", ";\n  }\n\n  .icon_wrap {\n    &[data-size='s'] {\n      width: ", ";\n      aspect-ratio: 1;\n      svg {\n        width: 100%;\n        height: 100%;\n      }\n    }\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  ", "\n  ", ";\n  ", "\n"], ["\n  box-sizing: border-box;\n  display: inline-flex;\n  position: relative;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  aspect-ratio: 1;\n  border-width: ", ";\n  border-style: solid;\n  box-shadow: ", ";\n  height: ", ";\n  border-radius: ", ";\n  ::after {\n    content: '';\n    width: 4px;\n    aspect-ratio: 1;\n    border-radius: 50%;\n    position: absolute;\n    background-color: ", ";\n    right: 1px;\n    top: 1px;\n    display: ", ";\n  }\n\n  .icon_wrap {\n    &[data-size='s'] {\n      width: ", ";\n      aspect-ratio: 1;\n      svg {\n        width: 100%;\n        height: 100%;\n      }\n    }\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  ", "\n  ", ";\n  ", "\n"])), size === 'm' && '1px', size === 'l' && BASE_SHADOW.l, numToPx(BUTTON_ICON_OPTION[size].size), numToPx(BUTTON_ICON_OPTION[size].radius), COLORS.red, dot && size === 's' ? 'block' : 'none', numToPx(BUTTON_ICON_OPTION[size].iconSize), BUTTON_ICON_COLOR[size], transitionSet('background-color, border-color, color'), mixinMargin(props));
};
var templateObject_1, templateObject_2;