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

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

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

//#region src/DraggablePanel/style.ts
const LAYOUT = {
	offset: 16,
	toggleLength: 54,
	toggleShort: 16
};
const prefix = `ant-draggable-panel`;
const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
	const borderStyles = {
		borderBottom: css$1`
      border-block-end: 1px solid ${cssVar$1.colorBorderSecondary};
    `,
		borderBottomNone: css$1`
      border-block-end-width: 0;
    `,
		borderLeft: css$1`
      border-inline-start: 1px solid ${cssVar$1.colorBorderSecondary};
    `,
		borderLeftNone: css$1`
      border-inline-start-width: 0;
    `,
		borderRight: css$1`
      border-inline-end: 1px solid ${cssVar$1.colorBorderSecondary};
    `,
		borderRightNone: css$1`
      border-inline-end-width: 0;
    `,
		borderTop: css$1`
      border-block-start: 1px solid ${cssVar$1.colorBorderSecondary};
    `,
		borderTopNone: css$1`
      border-block-start-width: 0;
    `
	};
	const float = css$1`
    position: absolute;
    z-index: 200;
  `;
	const floatPositions = {
		bottomFloat: cx(float, css$1`
        inset-block-end: 0;
        inset-inline: 0 0;
        width: 100%;
      `),
		leftFloat: cx(float, css$1`
        inset-block: var(--draggable-panel-header-height, 0) 0;
        inset-inline-start: 0;
        height: calc(100% - var(--draggable-panel-header-height, 0px));
      `),
		rightFloat: cx(float, css$1`
        inset-block: var(--draggable-panel-header-height, 0) 0;
        inset-inline-end: 0;
        height: calc(100% - var(--draggable-panel-header-height, 0px));
      `),
		topFloat: cx(float, css$1`
        inset-block-start: var(--draggable-panel-header-height, 0);
        inset-inline: 0 0;
        width: 100%;
      `)
	};
	const handleBaseStyle = css$1`
    position: relative;

    &::before {
      content: '';
      position: absolute;
      transition: all 0.2s ${cssVar$1.motionEaseOut};
    }
  `;
	const handleHighlightStyle = css$1`
    &:hover {
      &::before {
        background: ${cssVar$1.colorPrimaryBorder};
        box-shadow: 0 0 8px color-mix(in srgb, ${cssVar$1.colorPrimary} 25%, transparent);
      }
    }

    &:active {
      &::before {
        background: ${cssVar$1.colorPrimary} !important;
      }
    }
  `;
	const handleStyles = {
		handleBottom: cx(`${prefix}-bottom-handle`, css$1`
        &::before {
          inset-block-end: 50%;
          width: 100%;
          height: 2px;
        }
      `),
		handleLeft: cx(`${prefix}-left-handle`, css$1`
        &::before {
          inset-inline-start: 50%;
          width: 2px;
          height: 100%;
        }
      `),
		handleRight: cx(`${prefix}-right-handle`, css$1`
        &::before {
          inset-inline-end: 50%;
          width: 2px;
          height: 100%;
        }
      `),
		handleRoot: handleBaseStyle,
		handleTop: cx(`${prefix}-top-handle`, css$1`
        &::before {
          inset-block-start: 50%;
          width: 100%;
          height: 2px;
        }
      `)
	};
	const toggleRoot = cx(`${prefix}-toggle`, css$1`
      position: absolute;
      z-index: 50;
      opacity: 0;
      transition: all 0.2s ${cssVar$1.motionEaseOut};

      &:hover,
      &:active {
        opacity: 1 !important;
      }

      > div {
        pointer-events: all;
        cursor: pointer;

        position: absolute;

        border: 1px solid ${cssVar$1.colorBorder};

        color: ${cssVar$1.colorTextTertiary};

        background: var(--draggable-panel-bg, ${cssVar$1.colorBgLayout});
        backdrop-filter: blur(8px);

        transition: all 0.2s ${cssVar$1.motionEaseOut};

        &:hover {
          color: ${cssVar$1.colorTextSecondary};
        }

        &:active {
          color: ${cssVar$1.colorText};
        }
      }
    `);
	const toggleRootWithWideArea = css$1`
    pointer-events: all;
  `;
	const toggleRootWithoutWideArea = css$1`
    pointer-events: none;
  `;
	const toggleStyles = {
		toggleBottom: cx(`${prefix}-toggle-bottom`, css$1`
        inset-block-end: -${LAYOUT.offset}px;
        width: 100%;
        height: ${LAYOUT.toggleShort}px;

        > div {
          inset-inline-start: 50%;

          width: ${LAYOUT.toggleLength}px;
          height: ${LAYOUT.toggleShort}px;
          margin-inline-start: -27px;
          border-block-start-width: 0;
          border-radius: 0 0 ${cssVar$1.borderRadiusLG} ${cssVar$1.borderRadiusLG};
        }
      `),
		toggleLeft: cx(`${prefix}-toggle-left`, css$1`
        inset-inline-start: -${LAYOUT.offset}px;
        width: ${LAYOUT.toggleShort}px;
        height: 100%;

        > div {
          inset-block-start: 50%;

          width: ${LAYOUT.toggleShort}px;
          height: ${LAYOUT.toggleLength}px;
          margin-block-start: -27px;
          border-inline-end-width: 0;
          border-radius: ${cssVar$1.borderRadiusLG} 0 0 ${cssVar$1.borderRadiusLG};
        }
      `),
		toggleRight: cx(`${prefix}-toggle-right`, css$1`
        inset-inline-end: -${LAYOUT.offset}px;
        width: ${LAYOUT.toggleShort}px;
        height: 100%;

        > div {
          inset-block-start: 50%;

          width: ${LAYOUT.toggleShort}px;
          height: ${LAYOUT.toggleLength}px;
          margin-block-start: -27px;
          border-inline-start-width: 0;
          border-radius: 0 ${cssVar$1.borderRadiusLG} ${cssVar$1.borderRadiusLG} 0;
        }
      `),
		toggleRoot,
		toggleRootWithWideArea,
		toggleRootWithoutWideArea,
		toggleTop: cx(`${prefix}-toggle-top`, css$1`
        inset-block-start: -${LAYOUT.offset}px;
        width: 100%;
        height: ${LAYOUT.toggleShort}px;

        > div {
          inset-inline-start: 50%;

          width: ${LAYOUT.toggleLength}px;
          height: ${LAYOUT.toggleShort}px;
          margin-inline-start: -27px;
          border-block-end-width: 0;
          border-radius: ${cssVar$1.borderRadiusLG} ${cssVar$1.borderRadiusLG} 0 0;
        }
      `)
	};
	const componentStyles = {
		fixed: css$1`
      position: relative;
    `,
		fullscreen: css$1`
      position: absolute;
      inset-block: var(--draggable-panel-header-height, 0) 0;
      inset-inline: 0;

      width: 100%;
      height: calc(100% - var(--draggable-panel-header-height, 0px));

      background: ${cssVar$1.colorBgContainer};
    `,
		handlerIcon: css$1`
      transition: all 0.2s ${cssVar$1.motionEaseOut};
    `,
		panel: cx(`${prefix}-fixed`, css$1`
        overflow: hidden;
        background: var(--draggable-panel-bg, ${cssVar$1.colorBgLayout});
        transition: all 0.2s ${cssVar$1.motionEaseOut};
      `),
		root: cx(prefix, css$1`
        flex-shrink: 0;

        &:hover {
          > .${prefix}-toggle {
            opacity: 1;
          }
        }
      `)
	};
	return {
		...borderStyles,
		...floatPositions,
		...handleStyles,
		handleHighlight: handleHighlightStyle,
		...toggleStyles,
		...componentStyles
	};
});
const handleVariants = cva(styles.handleRoot, { variants: { placement: {
	bottom: styles.handleBottom,
	left: styles.handleLeft,
	right: styles.handleRight,
	top: styles.handleTop
} } });
const panelVariants = cva(styles.root, {
	compoundVariants: [
		{
			class: styles.bottomFloat,
			mode: "float",
			placement: "bottom"
		},
		{
			class: styles.topFloat,
			mode: "float",
			placement: "top"
		},
		{
			class: styles.leftFloat,
			mode: "float",
			placement: "left"
		},
		{
			class: styles.rightFloat,
			mode: "float",
			placement: "right"
		},
		{
			class: styles.borderBottom,
			isExpand: true,
			placement: "top",
			showBorder: true
		},
		{
			class: styles.borderBottomNone,
			isExpand: true,
			placement: "top",
			showBorder: false
		},
		{
			class: styles.borderLeft,
			isExpand: true,
			placement: "right",
			showBorder: true
		},
		{
			class: styles.borderLeftNone,
			isExpand: true,
			placement: "right",
			showBorder: false
		},
		{
			class: styles.borderTop,
			isExpand: true,
			placement: "bottom",
			showBorder: true
		},
		{
			class: styles.borderTopNone,
			isExpand: true,
			placement: "bottom",
			showBorder: false
		},
		{
			class: styles.borderRight,
			isExpand: true,
			placement: "left",
			showBorder: true
		},
		{
			class: styles.borderRightNone,
			isExpand: true,
			placement: "left",
			showBorder: false
		}
	],
	defaultVariants: {
		isExpand: false,
		mode: "fixed",
		placement: "right",
		showBorder: true
	},
	variants: {
		isExpand: {
			false: null,
			true: null
		},
		mode: {
			fixed: styles.fixed,
			float: null
		},
		placement: {
			bottom: null,
			left: null,
			right: null,
			top: null
		},
		showBorder: {
			false: null,
			true: null
		}
	}
});
const toggleVariants = cva(styles.toggleRoot, {
	compoundVariants: [{
		class: styles.toggleRootWithWideArea,
		showHandleWideArea: true
	}, {
		class: styles.toggleRootWithoutWideArea,
		showHandleWideArea: false
	}],
	defaultVariants: { showHandleWideArea: false },
	variants: {
		placement: {
			bottom: styles.toggleTop,
			left: styles.toggleRight,
			right: styles.toggleLeft,
			top: styles.toggleBottom
		},
		showHandleWideArea: {
			false: null,
			true: null
		}
	}
});

//#endregion
export { handleVariants, panelVariants, styles, toggleVariants };
//# sourceMappingURL=style.mjs.map