TypeScript csx.calc函數代碼示例

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

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

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 mobileDropDownVariables = useThemeCache(() => {
    const globalVars = globalVariables();
    const titleBarVars = titleBarVariables();
    const mixBgAndFg = globalVars.mixBgAndFg;
    const vars = variableFactory("mobileDropDown");

    const title = vars("title", {
        letterSpacing: -0.26,
        maxWidth: calc(`100% - ${px(titleBarVars.endElements.flexBasis * 2)}`),
    });
    const chevron = vars("chevron", {
        width: 8,
        height: 8,
        color: mixBgAndFg(0.7),
    });

    const header = vars("header", {
        minHeight: titleBarVars.sizing.height,
    });

    const padding = vars("padding", {
        horizontal: 2,
    });

    const side = vars("side", {
        width: globalVars.icon.sizes.default + padding.horizontal,
    });

    return {
        title,
        chevron,
        header,
        padding,
        side,
    };
});

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

    const group = style("group", {
        marginBottom: unit(9),
    });

    const checkRadio = style("checkRadio", {
        ...appearance(),
        border: 0,
        display: "flex",
        alignItems: "center",
        width: percent(100),
        minHeight: unit(30),
        userSelect: "none",
        padding: 0,
        outline: 0,
        $nest: {
            "&:hover": {
                backgroundColor: colorOut(globalVars.states.hover.color),
                zIndex: 1,
            },
            "&:active": {
                backgroundColor: colorOut(globalVars.states.active.color),
                zIndex: 1,
            },
            "&:focus": {
                backgroundColor: colorOut(globalVars.states.focus.color),
                zIndex: 1,
            },
        },
    });
    const check = style("check", {});
    const radio = style("radio", {});
    const checked = style("checked", {});
    const separator = style("separator", {});
    const icon = style("icon", {
        width: unit(vars.menuButton.size),
        flexBasis: unit(vars.menuButton.size),
    });
    const checkRadioLabel = style("checkRadioLabel", {
        flexGrow: 1,
        maxWidth: calc(`100% - ${unit(vars.menuButton.size * 2)}`),
        textAlign: "left",
    });
    const checkRadioSelected = style("checkRadioSelected", {
        width: unit(vars.menuButton.size),
        flexBasis: unit(vars.menuButton.size),
    });

    return {
        group,
        checkRadio,
        check,
        radio,
        checked,
        separator,
        icon,
        checkRadioLabel,
        checkRadioSelected,
    };
});

export default function titleBarNavClasses() {
    const globalVars = globalVariables();
    const titleBarVars = titleBarVariables();
    const vars = titleBarNavigationVariables();
    const mediaQueries = layoutVariables().mediaQueries();
    const flex = flexHelper();
    const style = styleFactory("titleBarNav");

    const root = style(
        {
            ...flex.middleLeft(),
            position: "relative",
            height: unit(titleBarVars.sizing.height),
        },
        mediaQueries.oneColumnDown({
            height: unit(titleBarVars.sizing.mobile.height),
        }),
    );

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

    const items = style(
        "items",
        {
            ...flex.middleLeft(),
            height: unit(titleBarVars.sizing.height),
            ...paddings(vars.padding),
        },
        mediaQueries.oneColumnDown({
            height: px(titleBarVars.sizing.mobile.height),
            justifyContent: "center",
            width: percent(100),
        }),
    );

    const link = style("link", {
        ...userSelect(),
        color: colorOut(titleBarVars.colors.fg),
        whiteSpace: "nowrap",
        lineHeight: globalVars.lineHeights.condensed,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: unit(vars.item.size),
        textDecoration: "none",
        $nest: {
            "&.focus-visible": {
                backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
            },
            "&:focus": {
                backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
            },
            "&:hover": {
                backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
            },
        },
    });

    const linkActive = style("linkActive", {
        $nest: {
            "&:after": {
                ...absolutePosition.topLeft(
                    `calc(50% - ${unit(vars.linkActive.height + vars.linkActive.bottomSpace)})`,
                ),
                content: quote(""),
                height: unit(vars.linkActive.height),
                marginLeft: unit(negative(vars.linkActive.offset)),
                width: calc(`100% + ${unit(vars.linkActive.offset * 2)}`),
                backgroundColor: colorOut(vars.linkActive.bg),
                transform: `translateY(${unit(titleBarVars.sizing.height / 2)})`,
            },
        },
    });

    const linkContent = style("linkContent", {
        position: "relative",
    });

    const firstItem = style("lastItem", {
        zIndex: 2,
    });

    const lastItem = style("lastItem", {
        zIndex: 2,
    });

    return {
        root,
        navigation,
        items,
        link,
        linkActive,
        linkContent,
        lastItem,
        firstItem,
    };
}

export const compactMeBoxClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = compactMeBoxVariables();
    const style = styleFactory("compactMeBox");

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

    const openButton = style("openButton", {
        color: globalVars.elementaryColors.white.toString(),
    });

    const contents = style("contents", {
        position: "relative",
        height: percent(100),
    });

    const closeModal = style("closeModal", {
        $nest: {
            "&&": {
                ...absolutePosition.topRight(),
                width: unit(vars.tab.width),
                height: unit(vars.tab.height),
            },
        },
    });

    const tabList = style("tabList", sticky(), {
        top: 0,
        background: colorOut(vars.colors.bg),
        zIndex: 2,
        paddingRight: unit(vars.tab.width),
        height: unit(vars.tab.height),
        flexBasis: unit(vars.tab.width),
        color: globalVars.mainColors.fg.toString(),
    });

    const tabButtonContent = style("tabButtonContent", {
        ...flexHelper().middle(),
        position: "relative",
        width: unit(vars.tab.width),
        height: unit(vars.tab.height),
    });

    const tabPanels = style("tabPanels", {
        height: calc(`100% - ${vars.tab.height}px`),
        position: "relative",
    });

    const tabButton = style("tabButton", {
        ...flexHelper().middle(),
    });

    const panel = style("panel", {
        maxHeight: percent(100),
        borderTop: 0,
        borderRadius: 0,
    });

    const body = style("body", {
        flexGrow: 1,
    });

    const scrollContainer = style("scrollContainer", {
        overflow: "auto",
    });

    return {
        root,
        openButton,
        contents,
        closeModal,
        tabList,
        tabPanels,
        tabButton,
        tabButtonContent,
        panel,
        body,
        scrollContainer,
    };
});

export const metasClasses = useThemeCache(() => {
    const vars = metasVariables();
    const globalVars = globalVariables();
    const style = styleFactory("frame");

    const root = style({
        display: "block",
        lineHeight: globalVars.lineHeights.meta,
        color: colorOut(vars.colors.fg),
        width: calc(`100% + ${vars.spacing.default * 2}`),
        overflow: "hidden",
        textAlign: "left",
        ...margins({
            left: -vars.spacing.default,
            right: vars.spacing.default,
        }),
        $nest: {
            a: {
                ...allLinkStates({
                    allStates: {
                        textShadow: "none",
                    },
                    noState: {
                        color: colorOut(vars.colors.fg),
                    },
                    hover: {
                        color: colorOut(vars.colors.hover.fg),
                    },
                    focus: {
                        color: colorOut(vars.colors.focus.fg),
                    },
                    active: {
                        color: colorOut(vars.colors.active.fg),
                    },
                }),
            },
            "&.isFlexed": {
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "flex-start",
                alignItems: "center",
            },
        },
    });

    const meta = style("meta", {
        display: "inline-block",
        fontSize: unit(vars.fonts.size),
        color: colorOut(vars.colors.fg),
        ...margins({
            top: 0,
            right: vars.spacing.default,
            bottom: 0,
            left: vars.spacing.default,
        }),
        $nest: {
            "& &": {
                margin: 0,
            },
        },
    });

    // Get styles of meta, without the margins
    const metaStyle = style("metaStyles", {
        display: "inline-block",
        fontSize: unit(vars.fonts.size),
        color: colorOut(vars.colors.fg),
    });

    const draftStatus = style("draftStatus", {
        flexGrow: 1,
        textAlign: "left",
    });

    return {
        root,
        meta,
        metaStyle,
        draftStatus,
    };
});

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

    const style = styleFactory("siteNavNode");

    const root = style({
        position: "relative",
        display: "flex",
        alignItems: "flex-start",
        justifyContent: "flex-start",
        flexWrap: "nowrap",
        fontSize: unit(vars.node.fontSize),
        color: vars.node.fg.toString(),
        $nest: {
            "&.isCurrent": {
                color: vars.node.active.fg.toString(),
            },
        },
    });

    const children = style("children", {
        marginLeft: unit(vars.spacer.default),
    });

    const contents = style("contents", {
        display: "block",
        width: percent(100),
        $nest: {
            ".siteNavNode-buttonOffset": {
                top: unit(15.5),
            },
        },
    });

    const link = style("link", {
        display: "block",
        flexGrow: 1,
        color: "inherit",
        lineHeight: vars.node.lineHeight,
        minHeight: px(30),
        outline: 0,
        padding: 0,
        width: percent(100),
        $nest: {
            "&:active, &:focus": {
                outline: 0,
            },
            "&:hover": {
                color: globalVars.links.colors.default.toString(),
            },
            "&.hasChildren": {
                fontWeight: globalVars.fonts.weights.semiBold,
                color: "inherit",
                $nest: {
                    "&.isFirstLevel": {
                        fontSize: unit(globalVars.fonts.size.large),
                        fontWeight: globalVars.fonts.weights.bold,
                    },
                },
            },
        },
    });

    const label = style(
        "label",
        {
            position: "relative",
            display: "block",
            width: calc(`100% + ${unit(vars.nodeToggle.width)}`),
            marginLeft: unit(-vars.nodeToggle.width),
            textAlign: "left",
            border: `solid transparent ${unit(vars.node.borderWidth)}`,
            paddingTop: unit(vars.node.padding + vars.node.borderWidth),
            paddingRight: unit(vars.node.padding),
            paddingBottom: unit(vars.node.padding + vars.node.borderWidth),
            paddingLeft: unit(vars.nodeToggle.width - vars.node.borderWidth),
        },
        mediaQueries.oneColumnDown({
            fontSize: unit(globalVars.fonts.size.large),
        }),
    );

    const spacer = style("spacer", {
        display: "block",
        height: unit(vars.nodeToggle.height),
        width: unit(vars.spacer.default),
        margin: `6px 0`,
    });

    const toggle = style("toggle", {
        margin: `6px 0`,
        padding: 0,
        zIndex: 1,
        display: "block",
        alignItems: "center",
        justifyContent: "center",
        outline: 0,
        height: unit(vars.nodeToggle.height),
//.........這裏部分代碼省略.........

export const searchResultClasses = useThemeCache(() => {
    const vars = searchResultsVariables();
    const globalVars = globalVariables();
    const style = styleFactory("searchResults");
    const mediaQueries = vars.mediaQueries();
    const metaVars = metasVariables();

    const title = style("title", {
        display: "block",
        ...fonts({
            color: vars.title.fg,
            size: globalVars.fonts.size.large,
            weight: globalVars.fonts.weights.semiBold,
        }),
        overflow: "hidden",
        flexGrow: 1,
        margin: 0,
        paddingRight: unit(24),
    });

    const root = style(
        {
            display: "flex",
            alignItems: "stretch",
            justifyContent: "space-between",
            ...paddings(vars.spacing.padding),
            cursor: "pointer",
            color: colorOut(vars.title.fg),
            borderBottom: singleBorder({
                color: vars.separator.fg,
                width: vars.separator.width,
            }) as any,
            $nest: {
                [`&:hover .${title}`]: {
                    color: colorOut(vars.colors.hover.fg),
                },
                [`&:focus .${title}`]: {
                    color: colorOut(vars.colors.hover.fg),
                },
                [`&:active .${title}`]: {
                    color: colorOut(vars.colors.hover.fg),
                },
                "&:not(.focus-visible)": {
                    outline: 0,
                },
            },
        },
        mediaQueries.compact({
            flexWrap: "wrap",
        }),
    );

    const main = style(
        "main",
        {
            display: "block",
            width: percent(100),
            $nest: {
                "&.hasMedia": {
                    width: calc(`100% - ${unit(vars.mediaElement.width + vars.spacing.padding.left)}`),
                },
            },
        },
        mediaQueries.compact({
            $nest: {
                "&.hasMedia": {
                    width: percent(100),
                },
            },
        }),
    );

    const mediaElement = style(
        "mediaElement",
        {
            position: "relative",
            width: unit(vars.mediaElement.width),
        },
        mediaQueries.compact({
            width: percent(100),
            $nest: {
                "&.hasImage": {
                    height: unit(vars.mediaElement.width),
                },
            },
        }),
    );

    const image = style("image", {
        ...objectFitWithFallback(),
    });

    const attachments = style(
        "attachments",
        {
            display: "flex",
            flexWrap: "nowrap",
        },
        mediaQueries.compact({
            flexWrap: "wrap",
//.........這裏部分代碼省略.........