@windijs/utilities/dist/es/aspect.js

@windijs/utilities

import { aspectRatioConfig } from '@windijs/config';
import { createUtility, configHandler, cssHandler, numberHandler, genericHandler } from '@windijs/core';
import { css } from '@windijs/helpers';

const aspectBase = {
    position: "relative",
    "> *": {
        position: "absolute",
        height: "100%",
        width: "100%",
        top: "0",
        right: "0",
        bottom: "0",
        left: "0",
    },
};
var aspect = createUtility("aspect")
    .use(configHandler(aspectRatioConfig, "aspectRatio"))
    .case("none", cssHandler({
    position: "static",
    paddingBottom: "0",
    "> *": {
        position: "static",
        height: "auto",
        width: "auto",
        top: "auto",
        right: "auto",
        bottom: "auto",
        left: "auto",
    },
}))
    .case("w", numberHandler(v => css({
    "--w-aspect-w": v,
    paddingBottom: "calc(var(--w-aspect-h) / var(--w-aspect-w) * 100%)",
    ...aspectBase,
})))
    .case("h", numberHandler(v => css({
    "--w-aspect-h": v,
})))
    .use(genericHandler(v => css({
    paddingBottom: +v * 100 + "%",
    ...aspectBase,
})))
    .init();

export { aspect as default };