UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

github.com/lobehub/lobe-ui

lobehub/lobe-ui

1 lines • 6.3 kB
1
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n backdrop: css`\n position: fixed;\n z-index: 1200;\n inset: 0;\n\n background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n `,\n\n close: css`\n cursor: pointer;\n\n position: absolute;\n inset-block-start: 12px;\n inset-inline-end: 12px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: 50%;\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &:hover {\n transform: scale(1.04);\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n `,\n\n closeInline: css`\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: 50%;\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &:hover {\n transform: scale(1.04);\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n `,\n\n content: css`\n overflow: hidden auto;\n padding-block: 12px;\n padding-inline: 16px;\n `,\n\n footer: css`\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: flex-end;\n\n padding-block: 12px;\n padding-inline: 16px;\n `,\n\n header: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding-block: 12px;\n padding-inline: 16px;\n `,\n\n headerDraggable: css`\n cursor: default;\n user-select: none;\n `,\n\n popup: css`\n pointer-events: none;\n\n position: fixed;\n z-index: 1201;\n inset: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n\n popupInner: css`\n pointer-events: auto;\n\n position: relative;\n\n overflow: hidden;\n display: flex;\n flex-direction: column;\n\n box-sizing: border-box;\n width: calc(100% - 32px);\n max-width: 520px;\n max-height: calc(100dvh - 64px);\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: 12px;\n\n background: ${cssVar.colorBgElevated};\n box-shadow: ${cssVar.boxShadow};\n\n transition:\n transform 220ms cubic-bezier(0.32, 0.72, 0, 1),\n opacity 220ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &[data-starting-style] {\n transform: scale(0.97);\n opacity: 0;\n }\n\n &[data-ending-style] {\n transform: scale(0.98);\n opacity: 0;\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n transition-duration: 120ms;\n }\n `,\n\n title: css`\n margin: 0;\n\n font-size: 17px;\n font-weight: 600;\n line-height: 1.4;\n color: ${cssVar.colorText};\n letter-spacing: -0.005em;\n `,\n\n loadingSpinner: css`\n @keyframes modal-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n display: inline-block;\n\n width: 14px;\n height: 14px;\n border: 2px solid currentcolor;\n border-block-start-color: transparent;\n border-radius: 50%;\n\n animation: modal-spin 0.6s linear infinite;\n `,\n\n fullscreenPopupInner: css`\n width: 100% !important;\n max-width: 100% !important;\n height: 100dvh !important;\n max-height: 100dvh !important;\n border: none;\n border-radius: 0;\n `,\n\n fullscreenToggle: css`\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 28px;\n height: 28px;\n padding: 0;\n border: none;\n border-radius: 50%;\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &:hover {\n transform: scale(1.04);\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n `,\n\n headerActions: css`\n display: flex;\n gap: 4px;\n align-items: center;\n margin-inline-end: -4px;\n `,\n\n denyAnimation: css`\n @keyframes modal-deny {\n 0%,\n 100% {\n transform: translateX(0);\n }\n\n 20% {\n transform: translateX(-5px);\n }\n\n 40% {\n transform: translateX(5px);\n }\n\n 60% {\n transform: translateX(-3px);\n }\n\n 80% {\n transform: translateX(2px);\n }\n }\n\n animation: modal-deny 280ms cubic-bezier(0.36, 0.66, 0.04, 1);\n `,\n\n viewport: css`\n position: fixed;\n z-index: 1200;\n inset: 0;\n overflow: auto;\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;qCAKsB,OAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;8BAKhB,OAAO,mBAAmB;;;CAItD,aAAa,GAAG;;;;;;;;;;;;;aAaL,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;8BAKhB,OAAO,mBAAmB;;;CAItD,SAAS,GAAG;;;;;CAMZ,QAAQ,GAAG;;;;;;;;;CAUX,QAAQ,GAAG;;;;;;;;CASX,iBAAiB,GAAG;;;;CAKpB,OAAO,GAAG;;;;;;;;;;;CAYV,YAAY,GAAG;;;;;;;;;;;;;wBAaO,OAAO,qBAAqB;;;kBAGlC,OAAO,gBAAgB;kBACvB,OAAO,UAAU;;;;;;;;;;;;;;;;;;CAmBjC,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;CAI5B,gBAAgB,GAAG;;;;;;;;;;;;;;;;;CAkBnB,sBAAsB,GAAG;;;;;;;;CASzB,kBAAkB,GAAG;;;;;;;;;;;;;aAaV,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;8BAKhB,OAAO,mBAAmB;;;CAItD,eAAe,GAAG;;;;;;CAOlB,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlB,UAAU,GAAG;;;;;;CAMd,EAAE"}