quantumai-design-system/dist/components/Form/Material/styles.js

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

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import { mixinMargin, mixinWidth, transitionSet } from './../../../utils/styleSet';
import { COLORS, TYPOGRAPHYS_STYLE } from '../../../styles/theme';
import { css } from '@emotion/react';
import { materialInputSize } from './options';
import styled from '@emotion/styled';
var plainStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  border-radius: 4px 4px 0 0;\n\n  &[data-active='true'] {\n    &::after {\n      height: 1px;\n      opacity: 1;\n      width: 100%;\n    }\n\n    label {\n      color: ", ";\n    }\n  }\n\n  ::before {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 100%;\n    height: 2px;\n    z-index: 2;\n    background-color: ", ";\n    opacity: 0;\n    ", ";\n  }\n\n  :hover::before {\n    opacity: 1;\n  }\n\n  ::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 50%;\n    transform: translateX(-50%);\n    height: 2px;\n    z-index: 2;\n    background-color: ", ";\n    width: 0;\n    opacity: 0;\n    ", ";\n  }\n\n  :focus-within {\n    &::after {\n      width: 100%;\n      height: 2px;\n      opacity: 1;\n    }\n\n    label {\n      color: ", ";\n    }\n  }\n\n  label {\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n\n  &[data-error='true'] {\n    border-bottom: 1px solid ", " !important;\n    outline: none !important;\n\n    &::before {\n      opacity: 0 !important;\n    }\n\n    &::after {\n      opacity: 1 !important;\n      background-color: ", " !important;\n    }\n  }\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  border-radius: 4px 4px 0 0;\n\n  &[data-active='true'] {\n    &::after {\n      height: 1px;\n      opacity: 1;\n      width: 100%;\n    }\n\n    label {\n      color: ", ";\n    }\n  }\n\n  ::before {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 100%;\n    height: 2px;\n    z-index: 2;\n    background-color: ", ";\n    opacity: 0;\n    ", ";\n  }\n\n  :hover::before {\n    opacity: 1;\n  }\n\n  ::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 50%;\n    transform: translateX(-50%);\n    height: 2px;\n    z-index: 2;\n    background-color: ", ";\n    width: 0;\n    opacity: 0;\n    ", ";\n  }\n\n  :focus-within {\n    &::after {\n      width: 100%;\n      height: 2px;\n      opacity: 1;\n    }\n\n    label {\n      color: ", ";\n    }\n  }\n\n  label {\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n\n  &[data-error='true'] {\n    border-bottom: 1px solid ", " !important;\n    outline: none !important;\n\n    &::before {\n      opacity: 0 !important;\n    }\n\n    &::after {\n      opacity: 1 !important;\n      background-color: ", " !important;\n    }\n  }\n"])), COLORS.white, COLORS.coolgrey4, COLORS.primary, COLORS.coolgrey5, transitionSet('opacity'), COLORS.primary, transitionSet('width, opacity'), COLORS.primary, COLORS.red, COLORS.red);
var lineStyles = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  outline: 1px solid ", ";\n  border-radius: 4px;\n  background-color: ", ";\n  padding: 0 12px;\n\n  &[data-active='true'] {\n    outline: 1px solid ", ";\n\n    label {\n      color: ", ";\n    }\n  }\n\n  :hover {\n    outline: 1px solid ", ";\n  }\n\n  :focus-within {\n    outline: 2px solid ", ";\n    label {\n      color: ", ";\n    }\n  }\n\n  label {\n    position: absolute;\n    top: 0;\n    left: 12px;\n    padding: 0 4px;\n    transform: translateY(-50%);\n    z-index: 2;\n\n    &::before {\n      content: '';\n      position: absolute;\n      left: 50%;\n      top: calc(50% - 1px);\n      transform: translate(-50%, -50%);\n      z-index: -1;\n      width: calc(100% + 8px);\n      height: 2px;\n      background-color: ", ";\n    }\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", " !important;\n    outline: 1px solid ", " !important;\n  }\n\n  &[data-error='true'] {\n    outline: 1px solid ", " !important;\n    :focus-within {\n      outline: 2px solid ", " !important;\n    }\n  }\n"], ["\n  outline: 1px solid ", ";\n  border-radius: 4px;\n  background-color: ", ";\n  padding: 0 12px;\n\n  &[data-active='true'] {\n    outline: 1px solid ", ";\n\n    label {\n      color: ", ";\n    }\n  }\n\n  :hover {\n    outline: 1px solid ", ";\n  }\n\n  :focus-within {\n    outline: 2px solid ", ";\n    label {\n      color: ", ";\n    }\n  }\n\n  label {\n    position: absolute;\n    top: 0;\n    left: 12px;\n    padding: 0 4px;\n    transform: translateY(-50%);\n    z-index: 2;\n\n    &::before {\n      content: '';\n      position: absolute;\n      left: 50%;\n      top: calc(50% - 1px);\n      transform: translate(-50%, -50%);\n      z-index: -1;\n      width: calc(100% + 8px);\n      height: 2px;\n      background-color: ", ";\n    }\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", " !important;\n    outline: 1px solid ", " !important;\n  }\n\n  &[data-error='true'] {\n    outline: 1px solid ", " !important;\n    :focus-within {\n      outline: 2px solid ", " !important;\n    }\n  }\n"])), COLORS.coolgrey3, COLORS.white, COLORS.primary, COLORS.primary, COLORS.coolgrey5, COLORS.primary, COLORS.primary, COLORS.white, COLORS.grey2, COLORS.coolgrey3, COLORS.red, COLORS.red);
var fillStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "\n  background-color: ", ";\n\n  :hover {\n    background-color: ", ";\n    &::before {\n      opacity: 0;\n    }\n  }\n\n  label {\n    position: absolute;\n    left: 12px;\n    top: 9px;\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  ", "\n  background-color: ", ";\n\n  :hover {\n    background-color: ", ";\n    &::before {\n      opacity: 0;\n    }\n  }\n\n  label {\n    position: absolute;\n    left: 12px;\n    top: 9px;\n  }\n\n  &[data-disabled='true'] {\n    background-color: ", ";\n  }\n"])), plainStyles, transitionSet('background-color'), COLORS.grey2, COLORS.grey3, COLORS.grey2);
export var materialCommon = {
    plain: plainStyles,
    line: lineStyles,
    fill: fillStyles,
};
export var MaterialContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 0;\n  color: ", ";\n\n  input {\n    background-color: transparent;\n  }\n\n  label {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    word-break: break-word;\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    max-width: calc(100% - 24px);\n    color: ", ";\n    ", "\n  }\n\n  small {\n    position: absolute;\n    left: 0;\n    top: calc(100% + 3px);\n    padding: 0 4px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    word-break: break-word;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n\n    color: ", ";\n    ", "\n  }\n\n  &[data-disabled='true'] {\n    &::before,\n    &::after {\n      background-color: ", " !important;\n      height: 1px !important;\n    }\n    label {\n      color: ", " !important;\n    }\n    color: ", " !important;\n  }\n\n  &[data-error='true'] {\n    small,\n    label {\n      color: ", " !important;\n    }\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 0;\n  color: ", ";\n\n  input {\n    background-color: transparent;\n  }\n\n  label {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    word-break: break-word;\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    max-width: calc(100% - 24px);\n    color: ", ";\n    ", "\n  }\n\n  small {\n    position: absolute;\n    left: 0;\n    top: calc(100% + 3px);\n    padding: 0 4px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    word-break: break-word;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n\n    color: ", ";\n    ", "\n  }\n\n  &[data-disabled='true'] {\n    &::before,\n    &::after {\n      background-color: ", " !important;\n      height: 1px !important;\n    }\n    label {\n      color: ", " !important;\n    }\n    color: ", " !important;\n  }\n\n  &[data-error='true'] {\n    small,\n    label {\n      color: ", " !important;\n    }\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), COLORS.black, COLORS.coolgrey5, TYPOGRAPHYS_STYLE['caption3'], COLORS.coolgrey4, TYPOGRAPHYS_STYLE['caption2'], COLORS.coolgrey4, COLORS.grey7, COLORS.grey7, COLORS.red, function (props) { return mixinWidth(props); }, function (props) { return mixinMargin(props); }, function (_a) {
    var variant = _a.variant;
    return materialCommon[variant];
}, function (_a) {
    var variant = _a.variant, size = _a.size;
    return materialInputSize[variant][size];
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;