quantumai-design-system/dist/components/Form/DatePicker/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;
};
var _a;
import styled from '@emotion/styled';
import { COLORS, TYPOGRAPHYS_STYLE } from '../../../styles/theme';
var styles = {
    DatePickerInputContainer: styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    width: ", ";\n    height: 34px;\n    border-radius: 8px;\n    border: 1px solid ", ";\n    padding: 7px 17px 7px 15px;\n    cursor: pointer;\n    box-shadow: ", ";\n\n    &:hover {\n      border: 1px solid ", ";\n    }\n\n    &:focus {\n      box-shadow: 0 0 0 1px ", ";\n    }\n\n    svg {\n      fill: ", ";\n      margin-right: 10px;\n    }\n\n    strong {\n      ", "\n    }\n\n    span {\n      padding: ", ";\n      color: ", ";\n      ", "\n    }\n  "], ["\n    display: flex;\n    align-items: center;\n    width: ", ";\n    height: 34px;\n    border-radius: 8px;\n    border: 1px solid ", ";\n    padding: 7px 17px 7px 15px;\n    cursor: pointer;\n    box-shadow: ", ";\n\n    &:hover {\n      border: 1px solid ", ";\n    }\n\n    &:focus {\n      box-shadow: 0 0 0 1px ", ";\n    }\n\n    svg {\n      fill: ", ";\n      margin-right: 10px;\n    }\n\n    strong {\n      ", "\n    }\n\n    span {\n      padding: ", ";\n      color: ", ";\n      ", "\n    }\n  "])), function (_a) {
        var inputType = _a.inputType;
        return (inputType === 'range' ? '247px' : 'auto');
    }, function (_a) {
        var isOpen = _a.isOpen;
        return (isOpen ? COLORS.primary : COLORS.coolgrey3);
    }, function (_a) {
        var isOpen = _a.isOpen;
        return isOpen && "0 0 0 1px ".concat(COLORS.primaryL);
    }, COLORS.primary, COLORS.primaryL, COLORS.coolgrey4, TYPOGRAPHYS_STYLE['body1'], function (_a) {
        var inputType = _a.inputType;
        return (inputType === 'range' ? '0 12px' : '0 10px 0 0');
    }, COLORS.coolgrey4, TYPOGRAPHYS_STYLE['subTitle3']),
    DatePickerHeaderContainer: styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    width: 100%;\n    height: 40px;\n    border-radius: 3px;\n    padding: 0 5px;\n\n    & > button:last-of-type {\n      ", "\n    }\n\n    & > button:first-of-type {\n      ", "\n    }\n    h2 {\n      color: ", ";\n      padding-top: 2px;\n      ", "\n    }\n\n    button {\n      padding-top: 6px;\n    }\n  "], ["\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    width: 100%;\n    height: 40px;\n    border-radius: 3px;\n    padding: 0 5px;\n\n    & > button:last-of-type {\n      ", "\n    }\n\n    & > button:first-of-type {\n      ", "\n    }\n    h2 {\n      color: ", ";\n      padding-top: 2px;\n      ", "\n    }\n\n    button {\n      padding-top: 6px;\n    }\n  "])), function (_a) {
        var viewCount = _a.viewCount, customHeaderCount = _a.customHeaderCount;
        return viewCount !== 1 && !customHeaderCount && "opacity: 0;pointer-events: none;";
    }, function (_a) {
        var viewCount = _a.viewCount, customHeaderCount = _a.customHeaderCount;
        return viewCount !== 1 && !!customHeaderCount && "opacity: 0;pointer-events: none;";
    }, COLORS.grey8, TYPOGRAPHYS_STYLE['headline1']),
    DatePickerContainer: styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .react-datepicker {\n      display: flex;\n      border: 1px solid ", ";\n      border-radius: 8px;\n      overflow: hidden;\n\n      &.docsSpacing {\n        margin: 300px 0;\n      }\n\n      &__header--custom {\n        padding: 0;\n        border-bottom: 0;\n        background-color: ", ";\n      }\n\n      &__month {\n        margin: 0;\n\n        &-container {\n          width: 350px;\n          height: 339px;\n          padding: 15px 15px 25px 15px;\n          background-color: ", ";\n        }\n      }\n\n      &__week {\n        display: flex;\n        margin-bottom: 5px;\n\n        &:first-of-type {\n          margin-top: 5px;\n        }\n\n        &:last-of-type {\n          margin-bottom: 0;\n        }\n      }\n\n      &__day {\n        margin: 0;\n        position: relative;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        width: 32px;\n        height: 32px;\n        padding: 0 8px;\n        box-sizing: content-box;\n        border-radius: 0;\n        outline: none;\n        z-index: 2;\n        color: ", ";\n        ", ";\n\n        &::before {\n          content: '';\n          width: 32px;\n          height: 32px;\n          position: absolute;\n          z-index: -1;\n          left: 50%;\n          top: 50%;\n          transform: translate(-50%, -50%);\n          border-radius: 8px;\n        }\n\n        &-names {\n          width: 100%;\n          margin: 0;\n          display: flex;\n        }\n\n        &-name {\n          margin: 0;\n          width: 32px;\n          height: 32px;\n          box-sizing: content-box;\n          padding: 0 8px;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          color: ", ";\n          ", "\n\n          &:first-of-type {\n            padding-left: 0;\n          }\n\n          &:last-of-type {\n            padding-right: 0;\n          }\n        }\n\n        &:first-of-type {\n          padding-left: 0;\n\n          &::before {\n            left: calc(50% - 4px);\n          }\n        }\n\n        &:last-of-type {\n          padding-right: 0;\n\n          &::before {\n            left: calc(50% + 4px);\n          }\n        }\n\n        &:not(&--today):not(&--range-start):not(&--range-end):not(&--in-range):hover {\n          background-color: ", ";\n\n          &::before {\n            background-color: ", ";\n          }\n        }\n\n        &--outside-month {\n          color: ", ";\n        }\n\n        &--selecting-range {\n          &-end {\n            background: linear-gradient(to right, ", " 50%, ", " 50%);\n            &::before {\n              background-color: ", ";\n            }\n          }\n\n          &-start {\n            background: linear-gradient(to right, ", " 50%, ", " 50%);\n          }\n        }\n\n        &--in {\n          &-range {\n            background-color: ", ";\n          }\n\n          &-selecting-range {\n            background-color: ", ";\n          }\n        }\n\n        &--range {\n          &-start,\n          &-end {\n            &::before {\n              background-color: ", ";\n              border: 1px solid ", ";\n              color: ", ";\n            }\n          }\n\n          &-start {\n            background: linear-gradient(to right, ", " 50%, ", " 50%);\n          }\n\n          &-end {\n            background: linear-gradient(to right, ", " 50%, ", " 50%);\n          }\n        }\n\n        &--selected {\n          background-color: ", ";\n          &::before {\n            background-color: ", ";\n            border: 1px solid ", ";\n            color: ", ";\n          }\n        }\n\n        &--today {\n          &.react-datepicker__day--range-start.react-datepicker__day--range-end {\n            background: linear-gradient(to right, ", " 50%, ", " 50%);\n          }\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &::before {\n            background-color: ", ";\n            color: ", ";\n            border: 1px solid ", ";\n          }\n        }\n      }\n\n      &__triangle::before,\n      &__triangle::before {\n        display: none;\n      }\n    }\n  "], ["\n    .react-datepicker {\n      display: flex;\n      border: 1px solid ", ";\n      border-radius: 8px;\n      overflow: hidden;\n\n      &.docsSpacing {\n        margin: 300px 0;\n      }\n\n      &__header--custom {\n        padding: 0;\n        border-bottom: 0;\n        background-color: ", ";\n      }\n\n      &__month {\n        margin: 0;\n\n        &-container {\n          width: 350px;\n          height: 339px;\n          padding: 15px 15px 25px 15px;\n          background-color: ", ";\n        }\n      }\n\n      &__week {\n        display: flex;\n        margin-bottom: 5px;\n\n        &:first-of-type {\n          margin-top: 5px;\n        }\n\n        &:last-of-type {\n          margin-bottom: 0;\n        }\n      }\n\n      &__day {\n        margin: 0;\n        position: relative;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        width: 32px;\n        height: 32px;\n        padding: 0 8px;\n        box-sizing: content-box;\n        border-radius: 0;\n        outline: none;\n        z-index: 2;\n        color: ", ";\n        ", ";\n\n        &::before {\n          content: '';\n          width: 32px;\n          height: 32px;\n          position: absolute;\n          z-index: -1;\n          left: 50%;\n          top: 50%;\n          transform: translate(-50%, -50%);\n          border-radius: 8px;\n        }\n\n        &-names {\n          width: 100%;\n          margin: 0;\n          display: flex;\n        }\n\n        &-name {\n          margin: 0;\n          width: 32px;\n          height: 32px;\n          box-sizing: content-box;\n          padding: 0 8px;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          color: ", ";\n          ", "\n\n          &:first-of-type {\n            padding-left: 0;\n          }\n\n          &:last-of-type {\n            padding-right: 0;\n          }\n        }\n\n        &:first-of-type {\n          padding-left: 0;\n\n          &::before {\n            left: calc(50% - 4px);\n          }\n        }\n\n        &:last-of-type {\n          padding-right: 0;\n\n          &::before {\n            left: calc(50% + 4px);\n          }\n        }\n\n        &:not(&--today):not(&--range-start):not(&--range-end):not(&--in-range):hover {\n          background-color: ", ";\n\n          &::before {\n            background-color: ", ";\n          }\n        }\n\n        &--outside-month {\n          color: ", ";\n        }\n\n        &--selecting-range {\n          &-end {\n            background: linear-gradient(to right, ", " 50%, ", " 50%);\n            &::before {\n              background-color: ", ";\n            }\n          }\n\n          &-start {\n            background: linear-gradient(to right, ", " 50%, ", " 50%);\n          }\n        }\n\n        &--in {\n          &-range {\n            background-color: ", ";\n          }\n\n          &-selecting-range {\n            background-color: ", ";\n          }\n        }\n\n        &--range {\n          &-start,\n          &-end {\n            &::before {\n              background-color: ", ";\n              border: 1px solid ", ";\n              color: ", ";\n            }\n          }\n\n          &-start {\n            background: linear-gradient(to right, ", " 50%, ", " 50%);\n          }\n\n          &-end {\n            background: linear-gradient(to right, ", " 50%, ", " 50%);\n          }\n        }\n\n        &--selected {\n          background-color: ", ";\n          &::before {\n            background-color: ", ";\n            border: 1px solid ", ";\n            color: ", ";\n          }\n        }\n\n        &--today {\n          &.react-datepicker__day--range-start.react-datepicker__day--range-end {\n            background: linear-gradient(to right, ", " 50%, ", " 50%);\n          }\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &::before {\n            background-color: ", ";\n            color: ", ";\n            border: 1px solid ", ";\n          }\n        }\n      }\n\n      &__triangle::before,\n      &__triangle::before {\n        display: none;\n      }\n    }\n  "])), COLORS.grey5, COLORS.white, COLORS.white, COLORS.grey8, TYPOGRAPHYS_STYLE['subTitle3'], COLORS.grey6, TYPOGRAPHYS_STYLE['subTitle3'], COLORS.white, COLORS.coolgrey2, COLORS.grey6, COLORS.blue2, COLORS.white, COLORS.coolgrey2, COLORS.white, COLORS.blue2, COLORS.blue2, COLORS.blue2, COLORS.blue3, COLORS.blue4, COLORS.blue6, COLORS.white, COLORS.blue2, COLORS.blue2, COLORS.white, COLORS.white, COLORS.blue3, COLORS.blue4, COLORS.blue6, COLORS.white, COLORS.white, COLORS.white, COLORS.white, COLORS.blue4, COLORS.blue4),
};
export var DatePickerInputContainer = (_a = Object.freeze(styles), _a.DatePickerInputContainer), DatePickerHeaderContainer = _a.DatePickerHeaderContainer, DatePickerContainer = _a.DatePickerContainer;
var templateObject_1, templateObject_2, templateObject_3;