infinity-forge/dist/ui/components/modal/styles.js

codie Library

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Modal = void 0;
var keyframes_1 = require("../../../ui/styles/keyframes.js");
var styled_components_1 = __importDefault(require("styled-components"));
exports.Modal = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  max-height: 90vh;\n  border-radius: 8px;\n  padding: 24px;\n  width: 90%;\n  max-width: 80vw;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  animation: ", " 0.3s ease forwards;\n  display: flex;\n  flex-direction: column;\n\n  .conntent_form_infinity_forge {\n    /* overflow: auto;\n    max-height: 90vh; */\n    padding: 0 10px;\n  }\n\n\n  .title {\n    margin: 0 0 6px;\n    font-size: 1.5rem;\n    color: #333;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n    flex-shrink: 0;\n\n    .close-button {\n      display: flex;\n      align-items: center;\n      width: 10px;\n      margin: 0 0 0 auto;\n      background: none;\n      padding: 0;\n      border: none;\n      color: #666;\n      transition: color 0.2s;\n\n      svg {\n        width: 100%;\n        height: 100%;\n        fill: currentColor;\n      }\n\n      &:hover {\n        color: #333;\n      }\n    }\n  }\n\n  .message {\n    margin: 0 0 16px;\n    font-size: 1rem;\n    color: #666;\n  }\n\n  .content_modal_infinity_forge {\n    flex: 1;\n    overflow-y: auto;\n    min-height: 0;\n\n    &::-webkit-scrollbar {\n      width: 3px;\n      background-color: #f5f5f5;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 4px;\n      border: 2px solid transparent;\n      background-clip: content-box;\n      transition: background-color 0.2s;\n\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &::-webkit-scrollbar-track {\n      background-color: transparent;\n      margin: 4px 0;\n    }\n\n    scrollbar-width: thin;\n    scrollbar-color: ", " #f5f5f5;\n  }\n\n  .actions_modal_infinity_forge {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    flex-shrink: 0;\n    padding-top: 16px;\n\n    button {\n      padding: 8px 16px;\n      border: none;\n      border-radius: 4px;\n      font-size: 1rem;\n      cursor: pointer;\n      transition: background-color, filter, 0.2s;\n\n      &:first-of-type {\n        background-color: #f0f0f0;\n        color: #333;\n\n        &:hover {\n          background-color: #e0e0e0;\n        }\n      }\n\n      &:last-of-type {\n        background-color: ", ";\n        color: white;\n\n        &:hover {\n          filter: brightness(95%);\n        }\n      }\n    }\n  }\n\n  .form-button .sticky {\n    margin: 0;\n    bottom: -1px;\n  }\n"], ["\n  background-color: white;\n  max-height: 90vh;\n  border-radius: 8px;\n  padding: 24px;\n  width: 90%;\n  max-width: 80vw;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  animation: ", " 0.3s ease forwards;\n  display: flex;\n  flex-direction: column;\n\n  .conntent_form_infinity_forge {\n    /* overflow: auto;\n    max-height: 90vh; */\n    padding: 0 10px;\n  }\n\n\n  .title {\n    margin: 0 0 6px;\n    font-size: 1.5rem;\n    color: #333;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n    flex-shrink: 0;\n\n    .close-button {\n      display: flex;\n      align-items: center;\n      width: 10px;\n      margin: 0 0 0 auto;\n      background: none;\n      padding: 0;\n      border: none;\n      color: #666;\n      transition: color 0.2s;\n\n      svg {\n        width: 100%;\n        height: 100%;\n        fill: currentColor;\n      }\n\n      &:hover {\n        color: #333;\n      }\n    }\n  }\n\n  .message {\n    margin: 0 0 16px;\n    font-size: 1rem;\n    color: #666;\n  }\n\n  .content_modal_infinity_forge {\n    flex: 1;\n    overflow-y: auto;\n    min-height: 0;\n\n    &::-webkit-scrollbar {\n      width: 3px;\n      background-color: #f5f5f5;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 4px;\n      border: 2px solid transparent;\n      background-clip: content-box;\n      transition: background-color 0.2s;\n\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &::-webkit-scrollbar-track {\n      background-color: transparent;\n      margin: 4px 0;\n    }\n\n    scrollbar-width: thin;\n    scrollbar-color: ", " #f5f5f5;\n  }\n\n  .actions_modal_infinity_forge {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    flex-shrink: 0;\n    padding-top: 16px;\n\n    button {\n      padding: 8px 16px;\n      border: none;\n      border-radius: 4px;\n      font-size: 1rem;\n      cursor: pointer;\n      transition: background-color, filter, 0.2s;\n\n      &:first-of-type {\n        background-color: #f0f0f0;\n        color: #333;\n\n        &:hover {\n          background-color: #e0e0e0;\n        }\n      }\n\n      &:last-of-type {\n        background-color: ", ";\n        color: white;\n\n        &:hover {\n          filter: brightness(95%);\n        }\n      }\n    }\n  }\n\n  .form-button .sticky {\n    margin: 0;\n    bottom: -1px;\n  }\n"])), function (_a) {
    var $isExiting = _a.$isExiting;
    return ($isExiting ? keyframes_1.condenseAnimation : keyframes_1.expandAnimation);
}, function (props) { var _a; return ((_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.primaryColor) || '#0070f3'; }, function (props) { var _a; return ((_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.primaryHoverColor) || '#005bb5'; }, function (props) { var _a; return ((_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.primaryColor) || '#0070f3'; }, function (props) { var _a; return ((_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.primaryColor) || '#0070f3'; });
var templateObject_1;
//# sourceMappingURL=styles.js.map