@empathyco/x-tailwindcss/dist/esm/x-tailwind-plugin/components/attach/index.js

Empathy X Tailwind plugin

/**
 * Returns the component util `attach` CSS, used to place components on top of others.
 *
 * @param _helpers - The {@link TailwindHelpers} to generate CSS.
 * @returns The {@link CssStyleOptions} for the component.
 */
function attach(_helpers) {
    return {
        '.x-attach-container': {
            position: 'relative',
        },
        '.x-attach-to': {
            '&-top-left': {
                position: 'absolute',
                top: 0,
                left: 0,
                transform: 'translate(calc(var(--attach-horizontal-offset, 50%) * -1), -50%)',
            },
            '&-top-right': {
                position: 'absolute',
                top: 0,
                right: 0,
                transform: 'translate(var(--attach-horizontal-offset, 50%), -50%)',
            },
            '&-bottom-right': {
                position: 'absolute',
                bottom: 0,
                right: 0,
                transform: 'translate( var(--attach-horizontal-offset, 50%), 50%)',
            },
            '&-bottom-left': {
                position: 'absolute',
                bottom: 0,
                left: 0,
                transform: 'translate(calc(var(--attach-horizontal-offset, 50%) * -1), 50%)',
            },
        },
    };
}

export { attach };