How to use csx - 10 common examples

To help you get started, we’ve selected a few csx examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vanilla / vanilla / library / src / scripts / forms / themeEditor / themeEditorStyles.ts View on Github external
width: percent(100),
            height: percent(100),
            $nest: {
                "&&&": {
                    display: "flex",
                },
            },
        },
        mediaQueries.oneColumnDown({
            display: "block",
        }),
    );
    const frame = style(
        "frame",
        {
            width: calc(`${percent(vars.frame.width)} - ${unit(vars.panel.width)}`),
            flexBasis: calc(`${percent(vars.frame.width)} - ${unit(vars.panel.width)}`),
            height: percent(100),
        },

        mediaQueries.oneColumnDown({
            width: percent(100),
        }),
    );

    const panel = style(
        "panel",
        {
            boxShadow: "0 5px 10px 0 rgba(0, 0, 0, 0.3)",
            width: unit(vars.panel.width),
            flexBasis: unit(vars.panel.width),
            zIndex: 1,
github vanilla / vanilla / library / src / scripts / banner / bannerStyles.ts View on Github external
const contentContainer = (hasFullWidth = false) => {
            return style(
                "contentContainer",
                {
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: vars.options.alignment === BannerAlignment.LEFT ? "flex-start" : "center",
                    ...paddings(vars.contentContainer.padding),
                    ...backgroundHelper(vars.innerBackground),
                    minWidth: unit(vars.contentContainer.minWidth),
                    maxWidth: vars.rightImage.image ? unit(vars.contentContainer.minWidth) : undefined,
                    minHeight: unit(vars.dimensions.minHeight),
                    maxHeight: unitIfDefined(vars.dimensions.maxHeight),
                    flexGrow: 0,
                    width: hasFullWidth || vars.options.alignment === BannerAlignment.LEFT ? percent(100) : undefined,
                },
                media(
                    {
                        maxWidth:
                            vars.contentContainer.minWidth + containerVariables().spacing.paddingFull.horizontal * 2,
                    },
                    {
                        right: "initial",
                        left: 0,
                        minWidth: percent(100),
                        maxWidth: percent(100),
                        minHeight: unitIfDefined(vars.dimensions.mobile.minHeight),
                        maxHeight: unitIfDefined(vars.dimensions.mobile.maxHeight ?? vars.dimensions.maxHeight),
                        ...(vars.options.mobileAlignment
                            ? {
                                  alignItems:
github vanilla / vanilla / library / src / scripts / homeWidget / HomeWidgetItem.styles.ts View on Github external
minWidth: unit(vars.sizing.minWidth),
            $nest: {
                [`&:hover .${name}`]: nestedStyles && nestedStyles["&&:hover"] ? nestedStyles["&&:hover"] : undefined,
                [`&:focus .${name}`]: nestedStyles && nestedStyles["&&:focus"] ? nestedStyles["&&:focus"] : undefined,
                [`&:focus-visible .${name}`]:
                    nestedStyles && nestedStyles["&&:focus-visible"] ? nestedStyles["&&:focus-visible"] : undefined,
                [`&:active .${name}`]:
                    nestedStyles && nestedStyles["&&:active"] ? nestedStyles["&&:active"] : undefined,
            },
        },
        borderStyling,
    );

    const content = style("content", {}, paddings(vars.spacing.contentPadding));

    const imageAspectRatio = percent((vars.image.ratio.height / vars.image.ratio.width) * 100);

    const imageContainer = style("imageContainer", {
        background: colorOut(globalVars.mixPrimaryAndBg(0.08)),
        width: percent(100),
        paddingTop: imageAspectRatio,
        position: "relative",
        maxHeight: unit(vars.image.maxHeight),
    });

    const image = style("image", {
        ...absolutePosition.fullSizeOfParent(),
        objectFit: "cover",
        objectPosition: "center center",
    });

    const description = style("description", {
github vanilla / vanilla / library / src / scripts / features / search / searchBarStyles.ts View on Github external
borderColor: colorOut(globalVars.mainColors.primary),
            },
            "&&": {
                position: "relative",
            },
            "& .searchBar__menu-list": {
                maxHeight: calc(`100vh - ${unit(titleBarVars.sizing.height)}`),
                width: percent(100),
            },
            "& .searchBar__input": {
                color: colorOut(globalVars.mainColors.fg),
                width: percent(100),
                display: important("block"),
                $nest: {
                    input: {
                        width: important(percent(100).toString()),
                        lineHeight: globalVars.lineHeights.base,
                    },
                },
            },
            "& .suggestedTextInput-menu": {
                borderRadius: unit(globalVars.border.radius),
                marginTop: unit(-formElementVars.border.width),
                marginBottom: unit(-formElementVars.border.width),
            },
            "&:empty": {
                display: "none",
            },
        },
    });

    return {
github vanilla / vanilla / library / src / scripts / styles / styleHelpersPositioning.ts View on Github external
    bottomRight: (bottom: BottomProperty = px(0), right: RightProperty = px(0)) => {
        return {
            position: "absolute" as PositionProperty,
            bottom: unit(bottom),
            right: unit(right),
        };
    },
    bottomLeft: (bottom: BottomProperty = px(0), left: LeftProperty = px(0)) => {
github vanilla / vanilla / library / src / scripts / styles / styleHelpersPositioning.ts View on Github external
    topLeft: (top: string | number = "0", left: LeftProperty = px(0)) => {
        return {
            position: "absolute" as PositionProperty,
            top: unit(top),
            left: unit(left),
        };
    },
    bottomRight: (bottom: BottomProperty = px(0), right: RightProperty = px(0)) => {
github vanilla / vanilla / library / src / scripts / styles / styleHelpersPositioning.ts View on Github external
    topRight: (top: string | number = "0", right: RightProperty = px(0)) => {
        return {
            position: "absolute" as PositionProperty,
            top: unit(top),
            right: unit(right),
        };
    },
    topLeft: (top: string | number = "0", left: LeftProperty = px(0)) => {
github vanilla / vanilla / library / src / scripts / styles / styleHelpersSpacing.ts View on Github external
export function extendItemContainer(itemPaddingX: number): NestedCSSProperties {
    return {
        width: calc(`100% + ${unit(itemPaddingX * 2)}`),
        marginLeft: unit(-itemPaddingX),
    };
}
github vanilla / vanilla / library / src / scripts / banner / bannerStyles.ts View on Github external
const makeImageMinWidth = (rootUnit, padding) => {
            const negative = vars.contentContainer.minWidth + vars.contentContainer.padding.horizontal + padding;

            return calc(`${unit(rootUnit)} - ${unit(negative)}`);
        };
github vanilla / vanilla / library / src / scripts / layout / panelAreaStyles.ts View on Github external
const overflowFull = useThemeCache((offset: number) =>
        style("overflowFull", {
            height: calc(`100vh - ${unit(offset)}`),
            overflow: "auto",
            position: "relative",
            minHeight: 100,
            paddingBottom: 50,
            paddingTop: 50,
            marginTop: -50,
        }),
    );

csx

Utility functions for TypeStyle

MIT
Latest version published 4 years ago

Package Health Score

54 / 100
Full package analysis