TypeScript types.NestedCSSProperties类代码示例

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

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

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

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

示例1: unit

 const iconMixin = (dimension: number): NestedCSSProperties => ({
     ...buttonResetMixin(),
     alignItems: "center",
     display: "flex",
     height: unit(dimension),
     minWidth: unit(dimension),
     width: unit(dimension),
     justifyContent: "center",
     border: "none",
     padding: 0,
     ...allButtonStates({
         hover: {
             color: colorOut(globalVars.mainColors.primary),
         },
         focusNotKeyboard: {
             outline: 0,
             color: colorOut(globalVars.mainColors.secondary),
         },
         focus: {
             color: colorOut(globalVars.mainColors.secondary),
         },
         accessibleFocus: {
             color: colorOut(globalVars.mainColors.secondary),
         },
         active: {
             color: colorOut(globalVars.mainColors.secondary),
         },
     }),
 });

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

示例2: useThemeCache

export const buttonUtilityClasses = useThemeCache(() => {
    const vars = buttonGlobalVariables();
    const globalVars = globalVariables();
    const formElementVars = formElementsVariables();
    const style = styleFactory("buttonUtils");

    const pushLeft = style("pushLeft", {
        marginRight: important("auto"),
    });

    const pushRight = style("pushRight", {
        marginLeft: important("auto"),
    });

    const iconMixin = (dimension: number): NestedCSSProperties => ({
        ...buttonResetMixin(),
        alignItems: "center",
        display: "flex",
        height: unit(dimension),
        minWidth: unit(dimension),
        width: unit(dimension),
        justifyContent: "center",
        border: "none",
        padding: 0,
        ...allButtonStates({
            hover: {
                color: colorOut(globalVars.mainColors.primary),
            },
            focusNotKeyboard: {
                outline: 0,
                color: colorOut(globalVars.mainColors.secondary),
            },
            focus: {
                color: colorOut(globalVars.mainColors.secondary),
            },
            accessibleFocus: {
                color: colorOut(globalVars.mainColors.secondary),
            },
            active: {
                color: colorOut(globalVars.mainColors.secondary),
            },
        }),
    });

    const buttonIcon = style("icon", iconMixin(formElementVars.sizing.height));

    const buttonIconCompact = style("iconCompact", iconMixin(vars.sizing.compactHeight));

    const asTextStyles: NestedCSSProperties = {
        ...buttonResetMixin(),
        minWidth: important(0),
        padding: 0,
        overflow: "hidden",
        textAlign: "left",
        lineHeight: globalVars.lineHeights.base,
        fontWeight: globalVars.fonts.weights.semiBold,
    };

    const buttonAsText = style("asText", asTextStyles, {
        color: "inherit",
        $nest: {
            "&:not(.focus-visible)": {
                outline: 0,
            },
            "&:hover": {
                color: colorOut(globalVars.mainColors.primary),
            },
            "&:focus, &:active": {
                color: colorOut(globalVars.mainColors.secondary),
            },
        },
    });

    const buttonAsTextPrimary = style("asTextPrimary", asTextStyles, {
        color: colorOut(globalVars.mainColors.primary),
        $nest: {
            "&:not(.focus-visible)": {
                outline: 0,
            },
            "&:hover, &:focus, &:active": {
                color: colorOut(globalVars.mainColors.secondary),
            },
        },
    });

    return {
        pushLeft,
        buttonAsText,
        buttonAsTextPrimary,
        pushRight,
        buttonIconCompact,
        buttonIcon,
    };
});

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

示例3: useThemeCache

export const userContentClasses = useThemeCache(() => {
    const style = styleFactory("userContent");
    const vars = userContentVariables();
    const globalVars = globalVariables();

    const listItem: NestedCSSProperties = {
        position: "relative",
        ...margins({
            top: vars.list.spacing.top,
            left: vars.list.spacing.left,
        }),
        $nest: {
            "&:first-child": {
                marginTop: 0,
            },
            "&:last-child": {
                marginBottom: 0,
            },
        },
    };

    const headingStyle = (tag: string, fontSize: FontSizeProperty<TLength>): NestedCSSProperties => {
        return {
            marginTop: globalVars.spacer.size,
            fontSize,
            $nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
        };
    };
    const headings: NestedCSSSelectors = {
        "& h1": headingStyle("h1", vars.fonts.headings.h1),
        "& h2": headingStyle("h2", vars.fonts.headings.h2),
        "& h3": headingStyle("h3", vars.fonts.headings.h3),
        "& h4": headingStyle("h4", vars.fonts.headings.h4),
        "& h5": headingStyle("h5", vars.fonts.headings.h5),
        "& h6": headingStyle("h6", vars.fonts.headings.h6),
    };

    const lists: NestedCSSSelectors = {
        "& ol": {
            listStylePosition: "inside",
        },
        "& ol li": {
            ...listItem,
            listStyle: "decimal",
        },
        "& ul li": {
            ...listItem,
            listStyle: "initial",
        },
    };

    const paragraphSpacing: NestedCSSSelectors = {
        "& p": {
            marginTop: 0,
            marginBottom: 0,
            $nest: {
                "&:not(:first-child)": {
                    marginTop: vars.blocks.margin * 0.5,
                },
                "&:first-child": {
                    $nest: lineHeightAdjustment(globalVars.lineHeights.base),
                },
            },
        },

        "&& > *:not(:last-child)": {
            marginBottom: vars.blocks.margin,
        },

        "&& > *:first-child": {
            marginTop: 0,
        },
    };

    const linkColors = setAllLinkColors();
    const linkStyle = {
        color: linkColors.color,
        $nest: {
            ...linkColors.nested,
            "&:hover, &:focus": {
                textDecoration: "underline",
            },
        },
    };

    const linkStyles: NestedCSSSelectors = {
        a: linkStyle,
        "p a": linkStyle,
        "li a": linkStyle,
    };

    const codeStyles: NestedCSSSelectors = {
        "& .code": {
            position: "relative",
            fontSize: vars.code.fontSize,
            fontFamily: `Menlo, Monaco, Consolas, "Courier New", monospace`,
            maxWidth: percent(100),
            overflowX: "auto",
            margin: 0,
            color: colorOut(vars.code.fg),
//.........这里部分代码省略.........

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

示例4: style

export const generateButtonClass = (buttonTypeVars: IButtonType, buttonName: string, setZIndexOnState = false) => {
    const globalVars = globalVariables();
    const formElVars = formElementsVariables();
    const buttonGlobals = buttonGlobalVariables();
    const style = styleFactory(`button-${buttonName}`);
    const zIndex = setZIndexOnState ? 1 : undefined;
    const buttonDimensions = buttonTypeVars.sizing || false;

    return style(buttonResetMixin(), {
        textOverflow: "ellipsis",
        overflow: "hidden",
        maxWidth: percent(100),
        ...borders(buttonTypeVars.borders),
        ...userSelect(),
        ...buttonSizing(
            buttonDimensions && buttonDimensions.minHeight
                ? buttonDimensions.minHeight
                : buttonGlobals.sizing.minHeight,
            buttonDimensions && buttonDimensions.minWidth ? buttonDimensions.minWidth : buttonGlobals.sizing.minWidth,
            buttonTypeVars.fonts && buttonTypeVars.fonts.size ? buttonTypeVars.fonts.size : buttonGlobals.font.size,
            buttonTypeVars.padding && buttonTypeVars.padding.side
                ? buttonTypeVars.padding.side
                : buttonGlobals.padding.side,
            formElVars,
        ),
        display: "inline-flex",
        alignItems: "center",
        position: "relative",
        textAlign: "center",
        whiteSpace: "nowrap",
        verticalAlign: "middle",
        justifyContent: "center",
        touchAction: "manipulation",
        cursor: "pointer",
        minWidth: buttonGlobals.sizing.minWidth,
        minHeight: buttonGlobals.sizing.minHeight,
        ...fonts({
            ...buttonGlobals.font,
            ...buttonTypeVars.fonts,
        }),
        backgroundColor: colorOut(buttonTypeVars.colors.bg ? buttonTypeVars.colors.bg : buttonGlobals.colors.bg),
        $nest: {
            "&:not([disabled])": {
                $nest: {
                    "&:not(.focus-visible)": {
                        outline: 0,
                    },
                    "&:hover": {
                        zIndex,
                        backgroundColor: colorOut(
                            buttonTypeVars.hover.colors && buttonTypeVars.hover.colors.bg
                                ? buttonTypeVars.hover.colors.bg
                                : undefined,
                        ),
                        ...borders(buttonTypeVars.hover.borders ? buttonTypeVars.hover.borders : undefined),
                        ...fonts(buttonTypeVars.hover && buttonTypeVars.hover.fonts ? buttonTypeVars.hover.fonts : {}),
                    },
                    "&:focus": {
                        zIndex,
                        backgroundColor: colorOut(
                            buttonTypeVars.focus.colors && buttonTypeVars.focus.colors.bg
                                ? buttonTypeVars.focus.colors.bg
                                : undefined,
                        ),
                        color: colorOut(buttonTypeVars.focus.fg),
                        ...borders(buttonTypeVars.focus.borders ? buttonTypeVars.focus.borders : undefined),
                        ...fonts(buttonTypeVars.focus && buttonTypeVars.focus.fonts ? buttonTypeVars.focus.fonts : {}),
                    },
                    "&:active": {
                        zIndex,
                        backgroundColor: colorOut(
                            buttonTypeVars.active.colors && buttonTypeVars.active.colors.bg
                                ? buttonTypeVars.active.colors.bg
                                : undefined,
                        ),
                        color: colorOut(buttonTypeVars.active.fg),
                        ...borders(buttonTypeVars.active.borders ? buttonTypeVars.active.borders : undefined),
                        ...fonts(
                            buttonTypeVars.active && buttonTypeVars.active.fonts ? buttonTypeVars.active.fonts : {},
                        ),
                    },
                    "&.focus-visible": {
                        zIndex,
                        backgroundColor: colorOut(
                            buttonTypeVars.focusAccessible.colors && buttonTypeVars.focusAccessible.colors.bg
                                ? buttonTypeVars.focusAccessible.colors.bg
                                : undefined,
                        ),
                        color: colorOut(buttonTypeVars.focusAccessible.fg),
                        ...borders(
                            buttonTypeVars.focusAccessible.borders ? buttonTypeVars.focusAccessible.borders : undefined,
                        ),
                        ...fonts(
                            buttonTypeVars.focusAccessible && buttonTypeVars.focusAccessible.fonts
                                ? buttonTypeVars.focusAccessible.fonts
                                : {},
                        ),
                    },
                },
            },
//.........这里部分代码省略.........

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

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