@reusable-ui/modal/dist/features/backdrop.js

Overlays a dialog to the entire site's page.

// cssfn:
import { 
// writes css in javascript:
style, vars, cssVars, } from '@cssfn/core'; // writes css in javascript
const [backdropVars] = cssVars({ prefix: 'backdrop', minify: false }); // shared variables: ensures the server-side & client-side have the same generated css variable names
/**
 * Uses Modal's backdrop.
 * @param config  A configuration of `backdropRule`.
 * @returns A `BackdropStuff` represents the backdrop rules.
 */
export const usesBackdrop = (config) => {
    return {
        backdropRule: () => style({
            ...vars({
                // scrolls:
                [backdropVars.scrollTop]: config?.scrollTop,
                [backdropVars.scrollLeft]: config?.scrollLeft,
            }),
        }),
        backdropVars,
    };
};
//#endregion backdrop