TypeScript styleHelpers.colorOut函数代码示例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

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

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

在下文中一共展示了colorOut函数的8个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的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 richEditorFlyoutClasses = useThemeCache(() => {
    const vars = richEditorVariables();
    const style = styleFactory("richEditorFlyout");
    const shadows = shadowHelper();
    const globalVars = globalVariables();

    const root = style({
        ...shadows.dropDown(),
        position: "absolute",
        left: 0,
        width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
        zIndex: 6,
        overflow: "hidden",
        backgroundColor: colorOut(vars.colors.bg),
        ...borders(),

        $nest: {
            "&& .ReactVirtualized__Grid": {
                width: important(unit(vars.richEditorWidth) as string),
            },
        },
    });

    const header = style("header", {
        position: "relative",
        borderBottom: singleBorder(),
        ...paddings(vars.emojiHeader.padding),
    });

    const title = style("title", {
        display: "flex",
        alignItems: "center",
        ...longWordEllipsis(),
        margin: 0,
        maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
        minHeight: vars.menuButton.size - vars.emojiBody.padding.horizontal,
        fontSize: percent(100),
        lineHeight: "inherit",
        color: colorOut(globalVars.mainColors.fg),
        $nest: {
            "&:focus": {
                outline: 0,
            },
        },
    });

    const body = style("body", {
        ...paddings(vars.emojiBody.padding),
        width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
    });

    const footer = style("footer", {
        borderTop: singleBorder(),
    });

    return { root, header, body, footer, title };
});

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

示例3: useThemeCache

export const modalVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const makeThemeVars = variableFactory("modal");

    const { elementaryColors } = globalVars;

    const colors = makeThemeVars("colors", {
        fg: globalVars.mainColors.fg,
        bg: globalVars.mainColors.bg,
        overlayBg:
            globalVars.mainColors.fg.lightness() > 0.5
                ? elementaryColors.white.fade(0.4)
                : elementaryColors.black.fade(0.4),
    });

    const sizing = makeThemeVars("sizing", {
        large: 720,
        medium: 516,
        small: 375,
    });

    const spacing = makeThemeVars("spacing", {
        horizontalMargin: 16,
    });

    const border = makeThemeVars("border", {
        radius: globalVars.border.radius,
    });

    const dropDown = makeThemeVars("dropDown", {
        padding: globalVars.spacer.size,
    });

    const header = makeThemeVars("header", {
        minHeight: 60,
        verticalPadding: 12,
        boxShadow: `0 1px 2px 0 ${colorOut(globalVars.overlay.bg)}`,
    });

    const footer = makeThemeVars("footer", {
        minHeight: header.minHeight,
        verticalPadding: header.verticalPadding,
        boxShadow: `0 -1px 2px 0 ${colorOut(globalVars.overlay.bg)}`,
    });

    return {
        colors,
        sizing,
        spacing,
        border,
        dropDown,
        header,
        footer,
    };
});

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

示例4: style

 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`,
     });
 };

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

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

示例6: useThemeCache

export const bodyCSS = useThemeCache(() => {
    const globalVars = globalVariables();
    cssRule("html, body", {
        backgroundColor: colorOut(globalVars.body.backgroundImage.color),
        ...fonts({
            size: globalVars.fonts.size.medium,
            family: globalVars.fonts.families.body,
            color: globalVars.mainColors.fg,
        }),
        wordBreak: "break-word",
        overscrollBehavior: "none", // For IE -> https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
    });

    cssRule("*", {
        // For Mobile Safari -> https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
        "-webkit-overflow-scrolling": "touch",
    });

    cssRule("h1, h2, h3, h4, h5, h6", {
        display: "block",
        lineHeight: globalVars.lineHeights.condensed,
        ...margins({
            all: 0,
        }),
        ...paddings({
            all: 0,
        }),
    });

    cssRule("p", {
        ...margins({
            all: 0,
        }),
        ...paddings({
            all: 0,
        }),
    });

    cssRule(".page", {
        display: "flex",
        overflow: "visible",
        flexDirection: "column",
        width: percent(100),
        minHeight: viewHeight(100),
        position: "relative",
        zIndex: 0,
    });

    cssRule(".page-minHeight", {
        flexGrow: 1,
        display: "flex",
        flexDirection: "column",
    });
});

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

示例7: useThemeCache

export const tabButtonListClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const style = styleFactory("tabButtonList");
    const classesCount = countClasses();
    const compactMeBoxVars = compactMeBoxVariables();

    const root = style({
        display: "flex",
        alignItems: "center",
        justifyContent: "stretch",
    });

    const button = style("button",{
        flexGrow: 1,
        color: colorOut(globalVars.mainColors.fg),
        $nest: {
            ".icon": {
                ...defaultTransition("opacity"),
                opacity: 0.8,
            },
            "&:hover": {
                color: colorOut(globalVars.mainColors.primary),
                $nest: {
                    ".icon": {
                        opacity: 1,
                    },
                },
            },
            "&:focus, &:active, &.focus-visible": {
                color: colorOut(globalVars.mainColors.primary),
            },
            [`& .${classesCount.text()}`]: {
                color: colorOut(compactMeBoxVars.colors.bg),
            },
        },
    });

    return { root, button };
});

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

示例8: useThemeCache

export const frameFooterClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const style = styleFactory("frameFooter");
    const vars = frameVariables();

    const root = style({
        display: "flex",
        minHeight: unit(vars.footer.minHeight),
        alignItems: "center",
        position: "relative",
        zIndex: 1,
        borderTop: singleBorder(),
        flexWrap: "wrap",
        justifyContent: "space-between",
        ...paddings({
            top: 0,
            bottom: 0,
            left: vars.footer.spacing,
            right: vars.footer.spacing,
        }),
    });

    const justifiedRight = style("justifiedRight", {
        $nest: {
            "&&": {
                justifyContent: "flex-end",
            },
        },
    });

    const markRead = style("markRead", {
        $nest: {
            "&.buttonAsText": {
                fontWeight: globalVars.fonts.weights.semiBold,
                color: colorOut(globalVars.mainColors.primary),
            },
        },
    });

    const actionButton = style("actionButton", {
        marginLeft: unit(24),
    });

    const selfPadded = style({
        paddingLeft: important(0),
        paddingRight: important(0),
    });

    return { root, markRead, selfPadded, actionButton, justifiedRight };
});

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

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