@lobehub/ui/es/Toast/style.mjs

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

import { createStaticStyles } from "antd-style";
import { cva } from "class-variance-authority";

//#region src/Toast/style.ts
const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
	action: css$1`
    cursor: pointer;

    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    height: 28px;
    padding-inline: 12px;
    border: none;
    border-radius: ${cssVar$1.borderRadiusSM};

    font-size: 12px;
    font-weight: 500;
    line-height: 1;

    transition:
      background 0.2s,
      color 0.2s;

    &:focus-visible {
      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
      outline-offset: 1px;
    }
  `,
	actionDanger: css$1`
    color: ${cssVar$1.colorTextLightSolid};
    background: ${cssVar$1.colorError};

    &:hover {
      background: ${cssVar$1.colorErrorHover};
    }

    &:active {
      background: ${cssVar$1.colorErrorActive};
    }

    &:focus-visible {
      outline-color: ${cssVar$1.colorErrorBorder};
    }
  `,
	actionGhost: css$1`
    border: 1px solid ${cssVar$1.colorBorder};
    color: ${cssVar$1.colorText};
    background: transparent;

    &:hover {
      border-color: ${cssVar$1.colorPrimary};
      color: ${cssVar$1.colorPrimary};
    }

    &:active {
      border-color: ${cssVar$1.colorPrimaryActive};
      color: ${cssVar$1.colorPrimaryActive};
    }
  `,
	actionPrimary: css$1`
    color: ${cssVar$1.colorTextLightSolid};
    background: ${cssVar$1.colorPrimary};

    &:hover {
      background: ${cssVar$1.colorPrimaryHover};
    }

    &:active {
      background: ${cssVar$1.colorPrimaryActive};
    }
  `,
	actionSecondary: css$1`
    color: ${cssVar$1.colorText};
    background: ${cssVar$1.colorFillSecondary};

    &:hover {
      background: ${cssVar$1.colorFillTertiary};
    }

    &:active {
      background: ${cssVar$1.colorFill};
    }
  `,
	actionText: css$1`
    color: ${cssVar$1.colorPrimary};
    background: transparent;

    &:hover {
      background: ${cssVar$1.colorFillTertiary};
    }

    &:active {
      background: ${cssVar$1.colorFillSecondary};
    }
  `,
	actions: css$1`
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    gap: 8px;
    align-items: center;
    align-self: flex-end;
    justify-content: flex-end;

    margin-block-start: 8px;
  `,
	close: css$1`
    cursor: pointer;

    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    margin-inline-start: auto;
    padding: 0;
    border: none;
    border-radius: ${cssVar$1.borderRadiusSM};

    color: ${cssVar$1.colorTextTertiary};

    background: transparent;

    transition: all 0.2s;

    &:hover {
      color: ${cssVar$1.colorText};
      background: ${cssVar$1.colorFillSecondary};
    }
  `,
	content: css$1`
    overflow: hidden;
    transition: opacity 0.2s;

    &[data-behind] {
      pointer-events: none;
      opacity: 0;
    }

    &[data-expanded] {
      pointer-events: auto;
      opacity: 1;
    }
  `,
	contentArea: css$1`
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  `,
	description: css$1`
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: ${cssVar$1.colorTextSecondary};
  `,
	icon: css$1`
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  `,
	root: css$1`
    --toast-gap: 12px;
    --toast-peek: 12px;
    --toast-scale: calc(1 - var(--toast-index) * 0.05);
    --toast-shrink: calc(1 - var(--toast-scale));
    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));

    cursor: default;
    user-select: none;

    position: absolute;
    z-index: calc(1000 - var(--toast-index));
    inset-inline: 0;

    box-sizing: border-box;
    width: 100%;
    height: var(--toast-collapsed-height);
    padding-block: 12px;
    padding-inline: 16px;
    border-radius: ${cssVar$1.borderRadiusLG};

    color: ${cssVar$1.colorText};

    background: ${cssVar$1.colorBgElevated};
    background-clip: padding-box;
    box-shadow:
      0 0 0 1px color-mix(in srgb, ${cssVar$1.colorBgSolid} 3%, transparent),
      0 1px 1px -0.5px color-mix(in srgb, ${cssVar$1.colorBgSolid} 3%, transparent),
      0 3px 3px -1.5px color-mix(in srgb, ${cssVar$1.colorBgSolid} 3%, transparent),
      0 6px 6px -3px color-mix(in srgb, ${cssVar$1.colorBgSolid} 3%, transparent),
      0 12px 12px -6px color-mix(in srgb, ${cssVar$1.colorBgSolid} 3%, transparent),
      0 24px 24px -12px color-mix(in srgb, ${cssVar$1.colorBgSolid} 3%, transparent);

    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.4s,
      height 0.15s;

    /* Fill gap between stacked toasts to prevent hover flicker */
    &::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);
    }

    &[data-limited] {
      opacity: 0;
    }

    &[data-swiping] {
      transition: none;
    }
  `,
	rootBottom: css$1`
    inset-block: auto 0;
    transform-origin: bottom center;
    transform: translateX(var(--toast-swipe-movement-x))
      translateY(
        calc(
          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -
            (var(--toast-shrink) * var(--toast-collapsed-height))
        )
      )
      scale(var(--toast-scale));

    &::after {
      inset-block-start: 100%;
    }

    &[data-expanded] {
      transform: translateX(var(--toast-swipe-movement-x))
        translateY(
          calc(
            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *
              var(--toast-gap) * -1
          )
        )
        scale(1);
      height: var(--toast-height);
    }

    &[data-starting-style],
    &[data-ending-style] {
      transform: translateY(150%);
      opacity: 0;
    }
  `,
	rootTop: css$1`
    inset-block: 0 auto;
    transform-origin: top center;
    transform: translateX(var(--toast-swipe-movement-x))
      translateY(
        calc(
          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +
            (var(--toast-shrink) * var(--toast-collapsed-height))
        )
      )
      scale(var(--toast-scale));

    &::after {
      inset-block-end: 100%;
    }

    &[data-expanded] {
      transform: translateX(var(--toast-swipe-movement-x))
        translateY(
          calc(
            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *
              var(--toast-gap)
          )
        )
        scale(1);
      height: var(--toast-height);
    }

    &[data-starting-style],
    &[data-ending-style] {
      transform: translateY(-150%);
      opacity: 0;
    }
  `,
	title: css$1`
    margin: 0;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: ${cssVar$1.colorText};
  `,
	titleRow: css$1`
    display: flex;
    gap: 8px;
    align-items: center;
  `,
	toastBody: css$1`
    display: flex;
    gap: 12px;
    align-items: flex-start;
  `,
	viewport: css$1`
    position: fixed;
    z-index: 1100;

    width: 360px;
    max-width: calc(100vw - 32px);

    outline: 0;

    @media (width <= 480px) {
      width: calc(100vw - 32px);
    }
  `,
	viewportBottom: css$1`
    inset-block-end: 16px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  `,
	viewportBottomLeft: css$1`
    inset-block-end: 16px;
    inset-inline-start: 16px;
  `,
	viewportBottomRight: css$1`
    inset-block-end: 16px;
    inset-inline-end: 16px;
  `,
	viewportTop: css$1`
    inset-block-start: 16px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  `,
	viewportTopLeft: css$1`
    inset-block-start: 16px;
    inset-inline-start: 16px;
  `,
	viewportTopRight: css$1`
    inset-block-start: 16px;
    inset-inline-end: 16px;
  `
}));
const viewportVariants = cva(styles.viewport, {
	defaultVariants: { position: "bottom-right" },
	variants: { position: {
		"bottom": styles.viewportBottom,
		"bottom-left": styles.viewportBottomLeft,
		"bottom-right": styles.viewportBottomRight,
		"top": styles.viewportTop,
		"top-left": styles.viewportTopLeft,
		"top-right": styles.viewportTopRight
	} }
});
const rootVariants = cva(styles.root, {
	defaultVariants: { position: "bottom-right" },
	variants: { position: {
		"bottom": styles.rootBottom,
		"bottom-left": styles.rootBottom,
		"bottom-right": styles.rootBottom,
		"top": styles.rootTop,
		"top-left": styles.rootTop,
		"top-right": styles.rootTop
	} }
});
const actionVariants = cva(styles.action, {
	defaultVariants: { variant: "primary" },
	variants: { variant: {
		danger: styles.actionDanger,
		ghost: styles.actionGhost,
		primary: styles.actionPrimary,
		secondary: styles.actionSecondary,
		text: styles.actionText
	} }
});

//#endregion
export { actionVariants, rootVariants, styles, viewportVariants };
//# sourceMappingURL=style.mjs.map