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

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

{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Alert/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n\n    min-height: 32px;\n    margin-inline-start: auto;\n  `,\n  close: css`\n    cursor: pointer;\n\n    position: relative;\n    scale: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    margin: 0;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition:\n      color 160ms ${cssVar.motionEaseOut},\n      background-color 160ms ${cssVar.motionEaseOut},\n      scale 160ms ${cssVar.motionEaseOut};\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 50%;\n      translate: -50% -50%;\n\n      width: 40px;\n      height: 40px;\n    }\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active:not(:disabled) {\n      scale: 0.96;\n    }\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.45;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  colorfulText: css`\n    color: var(--lobe-alert-accent);\n  `,\n  container: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: 100%;\n  `,\n  content: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n  description: css`\n    font-size: 13px;\n    line-height: 20px;\n    color: ${cssVar.colorTextSecondary};\n    text-wrap: pretty;\n    overflow-wrap: anywhere;\n  `,\n  detailed: css`\n    padding-block: 12px;\n    padding-inline: 14px;\n  `,\n  extra: css`\n    position: relative;\n    max-width: 100%;\n    color: ${cssVar.colorText};\n  `,\n  extraBanner: css`\n    border-radius: 0;\n  `,\n  extraContent: css`\n    overflow: hidden;\n\n    margin-block: 0 12px;\n    margin-inline: 12px;\n    padding: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  extraHeader: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    min-height: 40px;\n    padding-block: 8px;\n    padding-inline: 14px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 0;\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 20px;\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition:\n      color 160ms ${cssVar.motionEaseOut},\n      background-color 160ms ${cssVar.motionEaseOut};\n\n    &::marker,\n    &::-webkit-details-marker {\n      content: '';\n      display: none;\n    }\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillQuaternary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n  `,\n  extraHeaderPlain: css`\n    margin-block-start: 6px;\n    padding-inline: 0;\n    border-block-start-color: ${cssVar.colorBorderSecondary};\n  `,\n  extraIndicator: css`\n    flex-shrink: 0;\n    color: ${cssVar.colorTextTertiary};\n    transition: transform 160ms ${cssVar.motionEaseOut};\n\n    details[open] > summary > & {\n      transform: rotate(90deg);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  extraPlain: css`\n    background: transparent;\n  `,\n  icon: css`\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 20px;\n\n    color: var(--lobe-alert-accent);\n  `,\n  integrated: css`\n    overflow: hidden;\n    border-radius: ${cssVar.borderRadius};\n  `,\n  neutralText: css`\n    color: ${cssVar.colorText};\n  `,\n  root: css`\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n\n    box-sizing: border-box;\n    width: 100%;\n    max-width: 100%;\n    padding-block: 10px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    background: var(--lobe-alert-background);\n    box-shadow: inset 0 0 0 1px var(--lobe-alert-soft-border);\n\n    @media (width <= 480px) {\n      flex-wrap: wrap;\n    }\n  `,\n  soft: css`\n    background: var(--lobe-alert-background);\n    box-shadow: inset 0 0 0 1px var(--lobe-alert-soft-border);\n  `,\n  outlined: css`\n    background: transparent;\n    box-shadow: inset 0 0 0 1px ${cssVar.colorBorderSecondary};\n  `,\n  plain: css`\n    padding-block: 2px;\n    padding-inline: 0;\n    background: transparent;\n    box-shadow: none;\n  `,\n  title: css`\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    color: inherit;\n    text-wrap: pretty;\n    overflow-wrap: anywhere;\n  `,\n  titleDetailed: css`\n    font-weight: 500;\n  `,\n  toneError: css`\n    --lobe-alert-accent: ${cssVar.colorError};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorError} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorError} 14%, transparent);\n  `,\n  toneInfo: css`\n    --lobe-alert-accent: ${cssVar.colorInfo};\n    --lobe-alert-background: color-mix(in srgb, ${cssVar.colorInfo} 5%, ${cssVar.colorBgContainer});\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorInfo} 14%, transparent);\n  `,\n  toneSecondary: css`\n    --lobe-alert-accent: ${cssVar.colorTextSecondary};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorTextSecondary} 4%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorTextSecondary} 12%, transparent);\n  `,\n  toneSuccess: css`\n    --lobe-alert-accent: ${cssVar.colorSuccess};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorSuccess} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorSuccess} 14%, transparent);\n  `,\n  toneWarning: css`\n    --lobe-alert-accent: ${cssVar.colorWarning};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorWarning} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorWarning} 14%, transparent);\n  `,\n  unifiedRoot: css`\n    border-radius: 0;\n    background: transparent;\n    box-shadow: none;\n  `,\n  banner: css`\n    border-radius: 0;\n    box-shadow: none;\n  `,\n  wrappedAction: css`\n    @media (width <= 480px) {\n      order: 4;\n      width: calc(100% - 30px);\n      margin-block-start: -2px;\n      margin-inline-start: 30px;\n    }\n  `,\n}));\n\nexport const toneVariants = cva('', {\n  defaultVariants: { type: 'info' },\n  variants: {\n    type: {\n      error: styles.toneError,\n      info: styles.toneInfo,\n      secondary: styles.toneSecondary,\n      success: styles.toneSuccess,\n      warning: styles.toneWarning,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  compoundVariants: [{ class: styles.unifiedRoot, hasExtra: true }],\n  defaultVariants: {\n    banner: false,\n    colorfulText: false,\n    glass: false,\n    hasDescription: false,\n    hasExtra: false,\n    variant: 'soft',\n  },\n  variants: {\n    banner: { false: null, true: styles.banner },\n    colorfulText: { false: styles.neutralText, true: styles.colorfulText },\n    glass: { false: null, true: lobeStaticStylish.blur },\n    hasDescription: { false: null, true: styles.detailed },\n    hasExtra: { false: null, true: null },\n    variant: {\n      borderless: styles.plain,\n      filled: styles.soft,\n      outlined: styles.outlined,\n      plain: styles.plain,\n      soft: styles.soft,\n    },\n  },\n});\n\nexport const integratedVariants = cva(styles.integrated, {\n  defaultVariants: { banner: false, glass: false, variant: 'soft' },\n  variants: {\n    banner: { false: null, true: styles.banner },\n    glass: { false: null, true: lobeStaticStylish.blur },\n    variant: {\n      borderless: styles.extraPlain,\n      filled: styles.soft,\n      outlined: styles.outlined,\n      plain: styles.extraPlain,\n      soft: styles.soft,\n    },\n  },\n});\n\nexport const extraVariants = cva(styles.extra, {\n  defaultVariants: { banner: false, variant: 'soft' },\n  variants: {\n    banner: { false: null, true: styles.extraBanner },\n    variant: {\n      borderless: styles.extraPlain,\n      filled: null,\n      outlined: null,\n      plain: styles.extraPlain,\n      soft: null,\n    },\n  },\n});\n\nexport const extraHeaderVariants = cva(styles.extraHeader, {\n  defaultVariants: { variant: 'soft' },\n  variants: {\n    variant: {\n      borderless: styles.extraHeaderPlain,\n      filled: null,\n      outlined: null,\n      plain: styles.extraHeaderPlain,\n      soft: null,\n    },\n  },\n});\n"],"mappings":"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"}