TypeScript panelLayoutStyles.layoutVariables函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@library/layout/panelLayoutStyles.layoutVariables函数的典型用法代码示例。如果您正苦于以下问题：TypeScript layoutVariables函数的具体用法？TypeScript layoutVariables怎么用？TypeScript layoutVariables使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了layoutVariables函数的9个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: useThemeCache

export const subcommunityListClasses = useThemeCache(() => {
    const vars = subcommunityListVariables();
    const style = styleFactory("subcommunityList");
    const mediaQueries = layoutVariables().mediaQueries();
    const layoutVars = layoutVariables();

    const root = style(
        {
            maxWidth: unit(vars.sizing.columnsWidth),
            padding: unit(vars.spacing.padding),
            margin: "auto",
        },
        mediaQueries.oneColumnDown({
            padding: 0,
        }),
    );

    const items = style(
        "items",
        {
            position: "relative",
            display: "flex",
            flexWrap: "wrap",
            alignItems: "stretch",
            justifyContent: "space-between",
        },
        mediaQueries.oneColumnDown({
            display: "block",
        }),
    );

    const item = style(
        "item",
        {
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "stretch",
            width: unit(vars.sizing.columnWidth),
        },
        mediaQueries.oneColumnDown({
            display: "block",
            width: percent(100),
        }),
    );

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

开发者ID:vanilla，项目名称:vanilla，代码行数:48，代码来源:subcommunityListStyles.ts

示例2: 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

示例3: 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

示例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 panelListClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = panelListVariables();
    const mediaQueries = layoutVariables().mediaQueries();
    const style = styleFactory("panelList");

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

    const title = style("title", {
        fontSize: unit(vars.title.fontSize),
        marginBottom: unit(vars.offset.default),
    });

    const item = style("item", {
        $nest: {
            "& + &": {
                marginTop: unit(vars.offset.default),
            },
        },
    });

    const link = style("link", {
        display: "block",
        position: "relative",
        width: percent(100),
        fontSize: unit(vars.link.fontSize),
        color: "inherit",
        ...allLinkStates({
            allStates: {
                textDecoration: "none",
            },
            hover: {
                color: globalVars.links.colors.hover,
            },
            focus: {
                color: globalVars.links.colors.focus,
            },
        }),
    });

    const items = style("items", {});

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

开发者ID:vanilla，项目名称:vanilla，代码行数:53，代码来源:panelListStyles.ts

示例6: useThemeCache

export const meBoxClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const formVars = formElementsVariables();
    const titleBarVars = titleBarVariables();
    const debug = debugHelper("meBox");
    const mediaQueries = layoutVariables().mediaQueries();
    const flex = flexHelper();
    const style = styleFactory("meBox");

    const root = style(
        {
            ...debug.name(),
            display: "flex",
            alignItems: "center",
            height: unit(titleBarVars.sizing.height),
        },
        mediaQueries.oneColumnDown({
            height: unit(titleBarVars.sizing.mobile.height),
        }),
    );

    const buttonContent = style("buttonContent", {
        ...flex.middle(),
        width: unit(formVars.sizing.height),
        maxWidth: unit(formVars.sizing.height),
        flexBasis: unit(formVars.sizing.height),
        height: unit(titleBarVars.meBox.sizing.buttonContents),
    });

    const rootFlexClass = (count: number) => {
        return style("footFlexClass", {
            flexBasis: unit(count * formElementsVariables().sizing.height),
        });
    };

    return {
        root,
        buttonContent,
        rootFlexClass,
    };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:41，代码来源:meBoxStyles.ts

示例7: useThemeCache

export const panelAreaClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = layoutVariables();
    const mediaQueries = vars.mediaQueries();
    const style = styleFactory("panelArea");
    const classesPanelWidget = panelWidgetClasses();

    const root = style(
        {
            width: percent(100),
            ...paddings({
                all: globalVars.gutter.half,
            }),
            $nest: {
                "& .heading": {
                    $nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
                },
                [`&.inheritHeight > .${classesPanelWidget.root}`]: {
                    flexGrow: 1,
                },
                "&.hasNoVerticalPadding": {
                    ...paddings({ vertical: 0 }),
                },
                "&.hasNoHorizontalPadding": {
                    ...paddings({ horizontal: 0 }),
                },
                "&.isSelfPadded": {
                    ...paddings({ all: 0 }),
                },
            },
        },
        mediaQueries.oneColumnDown({
            ...paddings({
                horizontal: 0,
            }),
        }),
    );

    return { root };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:40，代码来源:panelAreaStyles.ts

示例8: useThemeCache

export const titleBarHomeClasses = useThemeCache(() => {
    const vars = titleBarVariables();
    const globalVars = globalVariables();
    const style = styleFactory("titleBarHome");
    const mediaQueries = layoutVariables().mediaQueries();

    const root = style({
        minHeight: vars.sizing.mobile.height * 2,
    });

    const left = style("left", {
        height: px(1),
        width: px(vars.button.size),
        flexBasis: vars.button.size,
    });

    const bottom = style(
        "bottom",
        {
            position: "relative",
            backgroundColor: colorOut(vars.bottomRow.bg),
            height: unit(vars.sizing.height),
            width: percent(100),
            ...(addGradientsToHintOverflow(globalVars.gutter.half * 4, vars.colors.bg) as any),
        },
        mediaQueries.oneColumnDown({
            height: px(vars.sizing.mobile.height),
            ...(addGradientsToHintOverflow(globalVars.gutter.half * 4, vars.bottomRow.bg) as any),
        }),
    );

    return {
        root,
        bottom,
        left,
    };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:37，代码来源:titleBarStyles.ts

示例9: useThemeCache

export const panelWidgetClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = layoutVariables();
    const mediaQueries = vars.mediaQueries();
    const style = styleFactory("panelWidget");

    const root = style(
        {
            display: "flex",
            flexDirection: "column",
            position: "relative",
            width: percent(100),
            ...paddings({
                all: globalVars.gutter.half,
            }),
            $nest: {
                "&.hasNoVerticalPadding": {
                    ...paddings({ vertical: 0 }),
                },
                "&.hasNoHorizontalPadding": {
                    ...paddings({ horizontal: 0 }),
                },
                "&.isSelfPadded": {
                    ...paddings({ all: 0 }),
                },
            },
        },
        mediaQueries.oneColumnDown({
            ...paddings({
                all: 8,
            }),
        }),
    );

    return { root };
});

开发者ID:vanilla，项目名称:vanilla，代码行数:36，代码来源:panelWidgetStyles.ts

注：本文中的@library/layout/panelLayoutStyles.layoutVariables函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。