TypeScript styleHelpers.singleBorder函數代碼示例

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

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

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

export const searchResultsClasses = useThemeCache(() => {
    const vars = searchResultsVariables();
    const globalVars = globalVariables();
    const style = styleFactory("searchResults");

    const root = style({
        display: "block",
        borderTop: singleBorder({
            color: vars.separator.fg,
            width: vars.separator.width,
        }),
    });
    const noResults = style("noResults", {
        fontSize: globalVars.userContent.font.sizes.default,
        ...paddings({
            top: globalVars.spacer.size,
            right: globalVars.gutter.half,
            bottom: globalVars.spacer.size,
            left: globalVars.gutter.half,
        }),
    });
    const item = style("item", {
        position: "relative",
        display: "block",
        userSelect: "none",
    });
    const result = style("result", {
        position: "relative",
        display: "block",
        width: percent(100),
    });

    return {
        root,
        noResults,
        item,
        result,
    };
});

//.........這裏部分代碼省略.........
        background: legacyMode ? undefined : colorOut(vars.colors.bg),
    });

    const icon = style("icon", {
        display: "block",
        margin: "auto",
        height: unit(globalVars.icon.sizes.default),
        width: unit(globalVars.icon.sizes.default),
    });

    const legacyFrame = style("legacyFrame", {
        margin: "auto",
        height: "initial",
        minHeight: unit(vars.sizing.minHeight + vars.menuButton.size),
        position: "relative",
        backgroundColor: colorOut(vars.colors.bg),
        padding: 0,
        $nest: {
            "&.isMenuInset": {
                overflow: "initial",
                position: "relative",
            },
        },
    });

    const close = style("close", {
        ...absolutePosition.middleRightOfParent(6),
        ...userSelect(),
        width: unit(vars.menuButton.size),
        height: unit(vars.menuButton.size),
        lineHeight: unit(vars.menuButton.size),
        verticalAlign: "bottom",
        textAlign: "center",
        background: "transparent",
        cursor: "pointer",
    });

    const flyoutDescription = style("flyoutDescription", {
        marginBottom: ".5em",
    });

    const separator = style("separator", {
        borderTop: singleBorder(),
        marginBottom: unit(8),
    });

    const position = style("position", {
        position: "absolute",
        left: calc(`50% - ${unit(vars.spacing.paddingLeft / 2)}`),
        $nest: {
            "&.isUp": {
                bottom: calc(`50% + ${unit(vars.spacing.paddingRight / 2 - formVars.border.width)}`),
            },
            "&.isDown": {
                top: calc(`50% + ${unit(vars.spacing.paddingRight / 2 - formVars.border.width)}`),
            },
        },
    });

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

    const emojiGroup = style("emojiGroup", {
        $nest: {
            [`&.isSelected .${iconWrap}`]: {
                backgroundColor: colorOut(vars.buttonContents.state.bg),
            },
        },
    });

    const flyoutOffset = style("flyoutOffset", {
        marginTop: unit((vars.menuButton.size - vars.iconWrap.width) / -2 + 1),
    });

    return {
        root,
        menuBar,
        menuBarToggles,
        paragraphMenuHandle,
        paragraphMenuHandleMobile,
        text,
        menuItems,
        upload,
        embedBar,
        menuItem,
        button,
        topLevelButtonActive,
        icon,
        close,
        flyoutDescription,
        paragraphMenu,
        paragraphMenuMobile,
        separator,
        position,
        legacyFrame,
        paragraphMenuPanel,
        iconWrap,
        flyoutOffset,
        emojiGroup,
    };
});

//.........這裏部分代碼省略.........
        },
        mediaQueries.xs({
            textAlign: "left",
        }),
    );

    const icon = style("icon", {
        position: "absolute",
        display: "block",
        top: 0,
        right: 0,
        bottom: 0,
        maxHeight: percent(100),
        maxWidth: percent(100),
        margin: `auto 0`,
        height: vars.chevron.height,
        width: vars.chevron.width,
    });

    const closeModalIcon = style("closeModalIcon", {
        padding: px(0),
        margin: "auto",
        color: vars.chevron.color.toString(),
        $nest: {
            "&:hover": {
                color: colorOut(globalVars.mainColors.primary),
            },
            "&:active": { color: colorOut(globalVars.mainColors.primary) },
            "&:focus": { color: colorOut(globalVars.mainColors.primary) },
        },
    });

    const closeModal = style("closeModal", {
        width: percent(100),
        height: percent(100),
    });

    const header = style("header", {
        borderBottom: singleBorder(),
    });

    const headerContent = style("headerContent", {
        display: "flex",
        flexWrap: "nowrap",
        alignItems: "center",
        height: unit(vars.header.minHeight - globalVars.border.width * 6),
        margin: "auto",
        width: percent(100),
    });

    const closeWidth =
        Math.floor(globalVars.icon.sizes.xSmall) + 2 * (globalVars.gutter.half + globalVars.gutter.quarter);
    const closeButton = style("closeButton", {
        ...absolutePosition.middleLeftOfParent(),
        height: unit(closeWidth),
        width: unit(closeWidth),
        minWidth: unit(closeWidth),
        padding: 0,
        transform: translateX("-50%"),
    });

    const subTitle = style("subTitle", {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        textTransform: "uppercase",
        minHeight: unit(titleBarVars.sizing.height - 4),
        fontSize: unit(globalVars.fonts.size.small),
        textOverflow: "ellipsis",
        ...paddings({
            vertical: unit(4),
        }),
        ...fonts({
            size: globalVars.fonts.size.small,
            transform: "uppercase",
            color: globalVars.mixBgAndFg(0.6),
        }),
    });

    const listContainer = style("listContainer", {
        borderBottom: singleBorder(),
    });

    return {
        root,
        modal,
        panel,
        toggleButton,
        buttonContents,
        closeButton,
        title,
        icon,
        closeModalIcon,
        closeModal,
        header,
        headerContent,
        listContainer,
        subTitle,
    };
});