@lobehub/ui/es/base-ui/Modal/style.mjs.map

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

{"version":3,"file":"style.mjs","names":["cssVar"],"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: 1000;\n    inset: 0;\n\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n    transition: opacity 150ms ease-out;\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: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\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: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\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    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\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    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\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: 1001;\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    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.colorBgContainer};\n    box-shadow: ${cssVar.boxShadow};\n\n    transition:\n      transform 150ms cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 150ms ease-out;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scale(0.96) translateY(4px);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  buttonBase: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    height: 36px;\n    padding-block: 0;\n    padding-inline: 16px;\n    border: 1px solid ${cssVar.colorBorder};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition: all 150ms ease-out;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  cancelButton: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\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  dangerOkButton: css`\n    border-color: ${cssVar.colorError};\n    color: #fff;\n    background: ${cssVar.colorError};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active:not(:disabled) {\n      border-color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorActive};\n    }\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: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  headerActions: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    margin-inline-end: -4px;\n  `,\n\n  okButton: css`\n    border-color: ${cssVar.colorPrimary};\n    color: #fff;\n    background: ${cssVar.colorPrimary};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  denyAnimation: css`\n    @keyframes modal-deny {\n      0% {\n        outline-color: ${cssVar.colorPrimary};\n        outline-offset: 0;\n      }\n\n      100% {\n        outline-color: transparent;\n        outline-offset: 4px;\n      }\n    }\n\n    outline: 2px solid transparent;\n    animation: modal-deny 400ms ease-out;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1000;\n    inset: 0;\n    overflow: auto;\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,UAAU,KAAG;;;;;qCAKsBA,SAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,KAAG;;;;;;;;;;;;;;;qBAeSA,SAAO,eAAe;;aAE9BA,SAAO,kBAAkB;;;;;;;eAOvBA,SAAO,UAAU;oBACZA,SAAO,mBAAmB;;;;2BAInBA,SAAO,mBAAmB;;;;CAKnD,aAAa,KAAG;;;;;;;;;;;qBAWGA,SAAO,eAAe;;aAE9BA,SAAO,kBAAkB;;;;;;;eAOvBA,SAAO,UAAU;oBACZA,SAAO,mBAAmB;;;;2BAInBA,SAAO,mBAAmB;;;;CAKnD,SAAS,KAAG;;;;;CAMZ,QAAQ,KAAG;;;;;;;;oCAQuBA,SAAO,qBAAqB;;CAG9D,QAAQ,KAAG;;;;;;;kCAOqBA,SAAO,qBAAqB;;CAG5D,iBAAiB,KAAG;;;;CAKpB,OAAO,KAAG;;;;;;;;;;;CAYV,YAAY,KAAG;;;;;;;;;;;;wBAYOA,SAAO,qBAAqB;;;kBAGlCA,SAAO,iBAAiB;kBACxBA,SAAO,UAAU;;;;;;;;;;;;CAajC,OAAO,KAAG;;;;;;aAMCA,SAAO,UAAU;;CAG5B,YAAY,KAAG;;;;;;;;;;;wBAWOA,SAAO,YAAY;qBACtBA,SAAO,eAAe;;;;;;;;;2BAShBA,SAAO,mBAAmB;;;;;;;;;CAUnD,cAAc,KAAG;aACNA,SAAO,UAAU;kBACZA,SAAO,iBAAiB;;;sBAGpBA,SAAO,mBAAmB;eACjCA,SAAO,iBAAiB;;;CAIrC,gBAAgB,KAAG;;;;;;;;;;;;;;;;;CAkBnB,gBAAgB,KAAG;oBACDA,SAAO,WAAW;;kBAEpBA,SAAO,WAAW;;;sBAGdA,SAAO,gBAAgB;oBACzBA,SAAO,gBAAgB;;;;sBAIrBA,SAAO,iBAAiB;oBAC1BA,SAAO,iBAAiB;;;CAI1C,sBAAsB,KAAG;;;;;;;;CASzB,kBAAkB,KAAG;;;;;;;;;;;qBAWFA,SAAO,eAAe;;aAE9BA,SAAO,kBAAkB;;;;;;;eAOvBA,SAAO,UAAU;oBACZA,SAAO,mBAAmB;;;;2BAInBA,SAAO,mBAAmB;;;;CAKnD,eAAe,KAAG;;;;;;CAOlB,UAAU,KAAG;oBACKA,SAAO,aAAa;;kBAEtBA,SAAO,aAAa;;;sBAGhBA,SAAO,kBAAkB;oBAC3BA,SAAO,kBAAkB;;;;sBAIvBA,SAAO,mBAAmB;oBAC5BA,SAAO,mBAAmB;;;CAI5C,eAAe,KAAG;;;yBAGKA,SAAO,aAAa;;;;;;;;;;;;;CAc3C,UAAU,KAAG;;;;;;CAMd,EAAE"}