TypeScript styleUtils.styleFactory函數代碼示例

本文整理匯總了TypeScript中@library/styles/styleUtils.styleFactory函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript styleFactory函數的具體用法？TypeScript styleFactory怎麽用？TypeScript styleFactory使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。

在下文中一共展示了styleFactory函數的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: useThemeCache

export const nubClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = richEditorVariables();
    const style = styleFactory("nub");

    const root = style({
        position: "relative",
        display: "block",
        width: unit(vars.nub.width),
        height: unit(vars.nub.width),
        borderTop: singleBorder({
            width: vars.menu.borderWidth,
        }),
        borderRight: singleBorder({
            width: vars.menu.borderWidth,
        }),
        boxShadow: globalVars.overlay.dropShadow,
        background: colorOut(vars.colors.bg),
    });

    const position = style("position", {
        position: "absolute",
        display: "flex",
        alignItems: "flex-start",
        justifyContent: "center",
        overflow: "hidden",
        width: unit(vars.nub.width * 2),
        height: unit(vars.nub.width * 2),
        ...userSelect(),
        transform: translateX("-50%"),
        pointerEvents: "none",
    });

    return { root, position };
});

開發者ID:vanilla，項目名稱:vanilla，代碼行數:35，代碼來源:nubClasses.ts

示例2: useThemeCache

export const insertLinkClasses = useThemeCache(() => {
    const vars = richEditorVariables();
    const style = styleFactory("insertLink");

    const root = style({
        position: "relative",
        display: "flex",
        flexWrap: "nowrap",
        alignItems: "center",
        maxWidth: unit(vars.insertLink.width),
        width: percent(100),
        paddingLeft: 0,
    });

    const input = style("input", {
        zIndex: 2,
        $nest: {
            "&, &.InputBox": {
                border: important("0"),
                marginBottom: important("0"),
                flexGrow: 1,
                maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
            },
        },
    });

    return { root, input };
});

開發者ID:vanilla，項目名稱:vanilla，代碼行數:28，代碼來源:insertLinkClasses.ts

示例3: useThemeCache

export const countClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = countVariables();
    const style = styleFactory("count");

    const root = (countBg?: ColorValues) => {
        return style({
            ...absolutePosition.topRight(4),
            display: "block",
            backgroundColor: countBg ? colorOut(countBg) : colorOut(vars.notifications.bg),
            height: unit(vars.sizing.height),
            lineHeight: unit(vars.sizing.height),
            minWidth: unit(vars.sizing.height),
            fontSize: unit(vars.font.size),
            fontWeight: globalVars.fonts.weights.semiBold,
            borderRadius: unit(vars.sizing.height / 2),
            whiteSpace: "nowrap",
            padding: `0 3px`,
        });
    };

    const text = (countFg?: ColorValues) => {
        return style("text", {
            display: "block",
            textAlign: "center",
            color: !!countFg ? colorOut(countFg) : "inherit",
        });
    };

    return { root, text };
});

開發者ID:vanilla，項目名稱:vanilla，代碼行數:31，代碼來源:countStyles.ts

示例4: useThemeCache

export const siteNavClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = siteNavVariables();
    const mediaQueries = layoutVariables().mediaQueries();

    const style = styleFactory("siteNav");

    const root = style(
        {
            position: "relative",
            display: "block",
            zIndex: 1,
            marginTop: unit(vars.nodeToggle.height / 2 - vars.node.fontSize / 2),
        },
        mediaQueries.noBleedDown({
            marginLeft: unit(vars.nodeToggle.width - vars.nodeToggle.iconWidth / 2 - vars.spacer.default),
        }),
    );

    const title = style("title", {
        fontSize: unit(globalVars.fonts.size.large),
        fontWeight: globalVars.fonts.weights.bold,
    });

    const children = style("children", {
        position: "relative",
        display: "block",
    });

    return { root, title, children };
});

開發者ID:vanilla，項目名稱:vanilla，代碼行數:31，代碼來源:siteNavStyles.ts

示例5: useThemeCache

export const typographyClasses = useThemeCache(() => {
    const style = styleFactory("typography");
    const globalVars = globalVariables();
    const vars = containerVariables();
    const mediaQueries = layoutVariables().mediaQueries();

    const pageTitle = style(
        "pageTitle",
        {
            fontSize: unit(globalVars.fonts.size.title),
            lineHeight: globalVars.lineHeights.condensed,
            $nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
        },
        mediaQueries.oneColumnDown({
            fontSize: unit(globalVars.fonts.mobile.size.title),
        }),
    );
    const subTitle = style("subTitle", {
        fontSize: unit(globalVars.fonts.size.subTitle),
    });
    const componentSubTitle = style("componentSubTitle", {
        fontSize: unit(globalVars.fonts.size.large),
    });

    return { pageTitle, subTitle, componentSubTitle };
});

開發者ID:vanilla，項目名稱:vanilla，代碼行數:26，代碼來源:typographyStyles.ts

示例6: globalVariables

export const buttonLoaderClasses = (buttonType: ButtonTypes) => {
    const globalVars = globalVariables();
    const flexUtils = flexHelper();
    const style = styleFactory("buttonLoader");
    const buttonVars = buttonVariables();
    let typeVars;

    switch (buttonType) {
        case ButtonTypes.PRIMARY:
            typeVars = buttonVars.primary;
            break;
        default:
            typeVars = buttonVars.standard;
            break;
    }

    const root = style({
        ...flexUtils.middle(),
        padding: unit(4),
        height: percent(100),
        width: percent(100),
        $nest: {
            "&:after": spinnerLoader({
                color: typeVars.spinnerColor || (globalVars.mainColors.primary as any),
                dimensions: 20,
            }),
        },
    });
    return { root };
};

開發者ID:vanilla，項目名稱:vanilla，代碼行數:30，代碼來源:buttonStyles.ts

示例7: useThemeCache

export const attachmentIconsClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = attachmentIconVariables();
    const style = styleFactory("attachmentIcons");

    const root = style({
        display: "block",
        position: "relative",
    });

    const items = style("items", {
        display: "flex",
        flexWrap: "wrap",
        alignItems: "flex-start",
        justifyContent: "flex-end",
        width: calc(`100% + ${px(vars.spacing.default * 2)}`),
        overflow: "hidden",
        ...margins({
            top: -vars.spacing.default,
            left: -vars.spacing.default,
            right: globalVars.meta.spacing.default,
        }),
    });

    const item = style("item", {
        margin: vars.spacing.default,
    });

    return { root, items, item };
});

開發者ID:vanilla，項目名稱:vanilla，代碼行數:30，代碼來源:attachmentIconsStyles.ts

示例8: useThemeCache

export const containerClasses = useThemeCache(() => {
    const style = styleFactory("container");
    const globalVars = globalVariables();
    const vars = containerVariables();
    const mediaQueries = layoutVariables().mediaQueries();

    const root = style(
        {
            display: "flex",
            flexDirection: "column",
            position: "relative",
            boxSizing: "border-box",
            width: percent(100),
            maxWidth: globalVars.content.width,
            marginLeft: "auto",
            marginRight: "auto",
            ...paddings(vars.spacing.padding),
        },
        mediaQueries.oneColumnDown({
            ...paddings({
                horizontal: 8,
            }),
        }),
    );

    return { root };
});

開發者ID:vanilla，項目名稱:vanilla，代碼行數:27，代碼來源:containerStyles.ts

示例9: useThemeCache

export const loaderClasses = useThemeCache(() => {
    const vars = loaderVariables();
    const flex = flexHelper();
    const style = styleFactory("loader");
    const fullPageLoader = style("fullPageLoader", {
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        margin: "auto",
        height: unit(vars.fullPage.size),
        width: unit(vars.fullPage.size),
        $nest: {
            "&:after": {
                ...spinnerLoader(vars.fullPage),
            },
        },
    });
    const mediumLoader = style("mediumLoader", {
        ...absolutePosition.fullSizeOfParent(),
        ...flex.middle(),
        height: percent(100),
        width: percent(100),
        $nest: {
            "&:after": {
                ...spinnerLoader(vars.medium),
            },
        },
    });
    const smallLoader = style("smallLoader", {
        ...flex.middle(),
        height: percent(46),
        width: percent(46),
        margin: "auto",
        $nest: {
            "&:after": {
                ...spinnerLoader(vars.small),
            },
        },
    });

    const loaderContainer = (size: TLength) => {
        return style({
            position: "relative",
            display: "block",
            margin: "auto",
            height: unit(size),
            width: unit(size),
        });
    };

    return {
        fullPageLoader,
        mediumLoader,
        smallLoader,
        loaderContainer,
    };
});

開發者ID:vanilla，項目名稱:vanilla，代碼行數:59，代碼來源:loaderStyles.ts

示例10: styleFactory

export const inheritHeightClass = () => {
    const style = styleFactory("inheritHeight");
    return style({
        display: "flex",
        flexDirection: "column",
        flexGrow: 1,
    });
};

開發者ID:vanilla，項目名稱:vanilla，代碼行數:8，代碼來源:styleHelpers.ts

注：本文中的@library/styles/styleUtils.styleFactory函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。