quantumai-design-system/dist/components/Base/Alert/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 { getToastColor, TOAST_POSITIONS } from './options';
import { mixinMargin, mixinWidth, transitionSet } from '../../../utils/styleSet';
import { COLORS } from '../../../styles/theme';
import styled from '@emotion/styled';
export var AlertStyle = function (_a) {
    var type = _a.type, _b = _a.duration, duration = _b === void 0 ? 0 : _b, isFill = _a.isFill, props = __rest(_a, ["type", "duration", "isFill"]);
    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 15px;\n  height: 38px;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  position: relative;\n  overflow: hidden;\n\n  .text_wrap {\n    flex: 1 1 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    .alert_text {\n      flex: 1 1 0;\n    }\n  }\n  button {\n    padding: 0;\n    background-color: transparent;\n    border: none;\n  }\n\n  .progress {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    height: 2px;\n    background-color: ", ";\n    animation: progressBar ", " linear;\n\n    @keyframes progressBar {\n      0% {\n        width: 100%;\n      }\n      100% {\n        width: 0%;\n      }\n    }\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 15px;\n  height: 38px;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  position: relative;\n  overflow: hidden;\n\n  .text_wrap {\n    flex: 1 1 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    .alert_text {\n      flex: 1 1 0;\n    }\n  }\n  button {\n    padding: 0;\n    background-color: transparent;\n    border: none;\n  }\n\n  .progress {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    height: 2px;\n    background-color: ", ";\n    animation: progressBar ", " linear;\n\n    @keyframes progressBar {\n      0% {\n        width: 100%;\n      }\n      100% {\n        width: 0%;\n      }\n    }\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n"])), COLORS.white + '80', duration + 's', mixinMargin(props), mixinWidth(props), transitionSet('transform'), getToastColor(type, isFill));
};
export var ToastContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n  z-index: 999;\n"], ["\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n  z-index: 999;\n"])), function (_a) {
    var position = _a.position;
    return TOAST_POSITIONS[position];
});
var templateObject_1, templateObject_2;