TypeScript styleHelpers.userSelect函數代碼示例

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 buttonResetMixin = (): NestedCSSProperties => ({
    ...userSelect(),
    "-webkit-appearance": "none",
    appearance: "none",
    border: 0,
    background: "none",
    cursor: "pointer",
    color: "inherit",
    font: "inherit",
});

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 radioTabClasses = useThemeCache(() => {
    const vars = radioTabsVariables();
    const style = styleFactory("radioTab");
    const mediaQueries = layoutVariables().mediaQueries();
    const formElementVariables = formElementsVariables();

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

    const tabs = style("tabs", {
        display: "flex",
        position: "relative",
        flexWrap: "wrap",
        alignItems: "center",
        justifyContent: "center",
    });

    const tab = style(
        "tab",
        {
            ...userSelect(),
            position: "relative",
            display: "inline-block",
            flexGrow: 1,
            $nest: {
                "& + &": {
                    marginLeft: unit(negative(vars.border.width)),
                },
                "&:hover, &:focus, &:active": {
                    color: colorOut(vars.colors.state.fg),
                },
            },
        },
        mediaQueries.oneColumnDown({
            flexGrow: 0,
            $nest: {
                label: {
                    minHeight: unit(formElementVariables.sizing.height),
                    lineHeight: unit(formElementVariables.sizing.height),
                },
            },
        }),
    );

    const leftTab = style("leftTab", borderRadii(vars.leftTab.radii));
    const rightTab = style("rightTab", borderRadii(vars.rightTab.radii));

    const label = style("label", {
        ...userSelect(),
        display: "inline-block",
        position: "relative",
        cursor: "pointer",
        textAlign: "center",
        width: percent(100),
        minHeight: unit(vars.sizing.height),
        minWidth: unit(vars.sizing.minWidth),
        backgroundColor: colorOut(vars.colors.bg),
        ...fonts(vars.font),
        ...paddings(vars.spacing.paddings),
        borderColor: colorOut(vars.border.color),
        borderWidth: unit(vars.border.width),
        borderStyle: vars.border.style,
    });

    const input = style("input", {
        ...srOnly(),
        $nest: {
            "&:hover, &:focus + .radioButtonsAsTabs-label": {
                borderColor: colorOut(vars.border.active.color),
                zIndex: 1,
                color: colorOut(vars.colors.state.fg),
            },
            "&:checked": {
                $nest: {
                    "& + .radioButtonsAsTabs-label": {
                        backgroundColor: colorOut(vars.colors.selected.bg),
                    },
                    "&:hover, &:focus": {
                        color: colorOut(vars.colors.state.fg),
                    },
                },
            },
        },
    });

    return {
        root,
        tabs,
        tab,
        label,
        input,
        leftTab,
        rightTab,
    };
});

export const subcommunityTileClasses = useThemeCache(() => {
    const vars = subcommunityTileVariables();
    const globalVars = globalVariables();
    const debug = debugHelper("subcommunityTile");
    const shadow = shadowHelper();

    const root = style({
        display: "flex",
        flexDirection: "column",
        alignItems: "stretch",
        width: percent(100),
        padding: unit(vars.spacing.default),
        ...userSelect(),
        flexGrow: 1,
        ...debug.name(),
    });

    const link = style({
        ...defaultTransition("box-shadow", "border"),
        ...paddings(vars.link.padding),
        display: "block",
        position: "relative",
        cursor: "pointer",
        flexGrow: 1,
        color: vars.link.fg.toString(),
        backgroundColor: colorOut(vars.link.bg),
        borderRadius: unit(2),
        minHeight: unit(vars.link.minHeight),
        ...shadowOrBorderBasedOnLightness(
            globalVars.body.backgroundImage.color,
            borders({
                color: vars.link.fg.fade(0.3),
            }),
            shadow.embed(),
        ),
        $nest: {
            "&:hover": {
                ...shadowOrBorderBasedOnLightness(
                    globalVars.body.backgroundImage.color,
                    borders({
                        color: vars.link.fg.fade(0.5),
                    }),
                    shadow.embedHover(),
                ),
            },
        },
        ...debug.name("link"),
    });

    const main = style({
        position: "relative",
        ...debug.name("main"),
    });

    const frame = style({
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        height: unit(vars.frame.height),
        width: unit(vars.frame.width),
        marginTop: "auto",
        marginRight: "auto",
        marginLeft: "auto",
        marginBottom: unit(vars.frame.bottomMargin),
        ...debug.name("iconFrame"),
    });

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

    const title = style({
        fontSize: unit(vars.title.fontSize),
        lineHeight: vars.title.lineHeight,
        textAlign: "center",
        marginBottom: unit(vars.title.marginBottom),
        ...debug.name("title"),
    });

    const description = style({
        position: "relative",
        marginTop: unit(vars.description.marginTop),
        fontSize: unit(vars.description.fontSize),
        lineHeight: vars.description.lineHeight,
        textAlign: "center",
        ...debug.name("description"),
    });

    const fallBackIcon = style({
//.........這裏部分代碼省略.........

export const checkRadioClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = checkRadioVariables();
    const style = styleFactory("checkRadio");
    const flexes = flexHelper();

    //.radioButton,
    //.checkbox
    const root = style({
        display: "flex",
        flexWrap: "wrap",
        alignItems: "center",
        whiteSpace: "nowrap",
        outline: 0,
        $nest: {
            "&.focus-accessible": {},
            "&:hover": {
                $nest: {
                    "& .radioButton-input:not([disabled]), & .checkbox-input:not([disabled])": {
                        $nest: {
                            "& + .radioButton-disk, & + .checkbox-box": {
                                borderColor: vars.main.hover.border.color.toString(),
                                opacity: vars.main.hover.opacity,
                                backgroundColor: vars.main.hover.bg.toString(),
                            },
                        },
                    },
                    "& .radioButton-disk, & .checkbox-box": {
                        backgroundColor: vars.main.hover.bg.toString(),
                    },
                },
            },
            "& + .radioButton, & + .checkbox": {
                marginTop: px(12),
            },
        },
    });

    //.radioButton-label,
    // .checkbox-label
    const label = style("label", {
        lineHeight: unit(vars.sizing.width),
        marginLeft: unit(8),
        cursor: "pointer",
        ...userSelect(),
    });

    const labelNote = style("labelNote", {
        display: "inline-block",
        fontSize: unit(vars.labelNote.fontSize),
        marginLeft: unit(24),
        opacity: vars.labelNote.opacity,
        verticalAlign: "middle",
    });

    // .radioButton-disk,
    // .checkbox-box
    const iconContainer = style("iconContainer", {
        ...defaultTransition("border", "background", "opacity"),
        position: "relative",
        display: "inline-block",
        width: unit(vars.sizing.width),
        height: unit(vars.sizing.width),
        verticalAlign: em(-0.18),
        cursor: "pointer",
        backgroundColor: colorOut(vars.main.bg),
        ...borders(vars.border),
    });

    const radioIcon = style("radioIcon", {
        ...absolutePosition.middleLeftOfParent(),
        display: "none",
        width: unit(vars.radioButton.icon.width),
        height: unit(vars.radioButton.icon.height),
        margin: "auto",
    });

    const checkIcon = style("checkBoxIcon", {
        ...absolutePosition.middleOfParent(),
        display: "none",
        width: unit(vars.checkBox.check.width),
        height: unit(vars.checkBox.check.height),
        color: vars.main.fg.toString(),
        margin: "auto",
    });

    const disk = style("disk", {
        borderRadius: percent(50),
    });

    // .radioButton-state,
    // .checkbox-state
    const state = style("state", {
        ...absolutePosition.fullSizeOfParent(),
        color: vars.main.checked.fg.toString(),
    });

    const diskIcon = style({
        width: vars.checkBox.disk.width,
        height: vars.checkBox.disk.height,
//.........這裏部分代碼省略.........

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
                                : {},
                        ),
                    },
                },
            },
//.........這裏部分代碼省略.........

//.........這裏部分代碼省略.........
            ".richEditor-button&.isActive:hover": {
                cursor: "default",
            },
            "&.isMenuInset": {
                transform: "none",
            },
        },
    });

    const paragraphMenuMobile = style("paragraphMenu-mobile", {
        position: "relative",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        top: important(0),
    });

    const menuBar = style("menuBar", {
        position: "relative",
        width: unit(vars.menuButton.size * 4),
        overflow: "hidden",
    });

    const menuBarToggles = style("menuBarToggles", {
        position: "relative",
        display: "flex",
        justifyContent: "space-between",
        flexWrap: "nowrap",
        width: unit(vars.menuButton.size * 4),
    });

    const paragraphMenuHandle = style("paragraphMenuHandle", {
        ...appearance(),
        ...userSelect(),
        background: "transparent",
        border: 0,
        display: "block",
        cursor: "pointer",
        width: unit(formVars.sizing.height),
        height: unit(formVars.sizing.height),
        padding: 0,
        maxWidth: unit(formVars.sizing.height),
        minWidth: unit(formVars.sizing.height),
        outline: 0,
        $nest: {
            "&:focus, &:hover": {
                color: colorOut(globalVars.mainColors.primary),
            },
            [`&.isOpen .${iconWrap}`]: {
                backgroundColor: colorOut(vars.buttonContents.state.bg),
            },
        },
    });

    const paragraphMenuHandleMobile = style("paragraphMenuHandleMobile", {
        width: unit(vars.menuButton.size),
        height: unit(vars.menuButton.size),
        maxWidth: unit(vars.menuButton.size),
        minWidth: unit(vars.menuButton.size),
    });

    const text = style("text", {
        position: "relative",
        whiteSpace: important("pre-wrap"),
        outline: 0,
    });

export const dropDownClasses = useThemeCache(() => {
    const vars = dropDownVariables();
    const globalVars = globalVariables();
    const style = styleFactory("dropDown");
    const shadows = shadowHelper();
    const mediaQueries = layoutVariables().mediaQueries();

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

    const contents = style("contents", {
        position: "absolute",
        minWidth: unit(vars.sizing.width),
        backgroundColor: colorOut(vars.contents.bg),
        color: colorOut(vars.contents.fg),
        overflow: "auto",
        ...shadowOrBorderBasedOnLightness(vars.contents.bg, borders({}), shadows.dropDown()),
        ...borders(vars.contents.border),
        zIndex: 3,
        $nest: {
            "&.isParentWidth": {
                minWidth: "initial",
            },
            "&.isOwnWidth": {
                width: "initial",
            },
            "&.isRightAligned": {
                right: 0,
                top: 0,
            },
            "& .frame": {
                boxShadow: "none",
            },
            "&.noMinWidth": {
                minWidth: 0,
            },
            "&.hasVerticalPadding": {
                ...paddings({
                    vertical: 12,
                    horizontal: important(0),
                }),
            },
            "&:empty": {
                display: "none",
            },
        },
    });

    const asModal = style("asModal", {
        $nest: {
            "&.hasVerticalPadding": paddings({
                vertical: 12,
            }),
        },
    });

    const likeDropDownContent = style("likeDropDownContent", {
        ...shadows.dropDown(),
        backgroundColor: colorOut(globalVars.mainColors.bg),
        ...borders(),
    });

    const items = style("items", {
        fontSize: unit(globalVars.fonts.size.medium),
    });

    const metaItems = style("metaItems", {
        $nest: {
            "&&": {
                display: "block",
            },
        },
        ...paddings(vars.metas.padding),
    });

    const metaItem = style("metaItem", {
        $nest: {
            "& + &": {
                paddingTop: unit(vars.item.padding.top),
            },
        },
        ...fonts(vars.metas.font),
    });

    // wrapping element
    const item = style("item", {
        display: "flex",
        alignItems: "center",
        justifyContent: "flex-start",
        width: percent(100),
        color: "inherit",
        ...userSelect("none"),
        textAlign: "left",
        lineHeight: globalVars.lineHeights.condensed,
    });

    const section = style("section", {
        display: "block",
    });
//.........這裏部分代碼省略.........

export const meBoxMessageClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = meBoxMessageVariables();
    const style = styleFactory("meBoxMessage");

    const root = style({
        display: "block",
        $nest: {
            "& + &": {
                borderTop: `solid 1px ${colorOut(globalVars.border.color)}`,
            },
        },
    });

    const link = style("link", {
        ...userSelect(),
        display: "flex",
        flexWrap: "nowrap",
        color: "inherit",
        ...paddings(vars.spacing.padding),
        ...buttonStates({
            allStates: {
                textShadow: "none",
            },
            hover: {
                backgroundColor: colorOut(globalVars.states.hover.color),
            },
            focus: {
                backgroundColor: colorOut(globalVars.states.focus.color),
            },
            active: {
                backgroundColor: colorOut(globalVars.states.active.color),
            },
        }),
    });

    const imageContainer = style("imageContainer", {
        position: "relative",
        width: unit(vars.imageContainer.width),
        height: unit(vars.imageContainer.width),
        flexBasis: unit(vars.imageContainer.width),
        borderRadius: percent(50),
        overflow: "hidden",
        border: `solid 1px ${globalVars.border.color.toString()}`,
    });

    const image = style("image", {
        width: unit(vars.imageContainer.width),
        height: unit(vars.imageContainer.width),
        ...objectFitWithFallback(),
    });

    const status = style("status", {
        position: "relative",
        width: unit(vars.unreadDot.width),
        flexBasis: unit(vars.unreadDot.width),
        $nest: {
            "&.isUnread": {
                $nest: {
                    "&:after": {
                        ...absolutePosition.middleRightOfParent(),
                        content: quote(""),
                        height: unit(vars.unreadDot.width),
                        width: unit(vars.unreadDot.width),
                        backgroundColor: globalVars.mainColors.primary.toString(),
                        borderRadius: percent(50),
                    },
                },
            },
        },
    });

    const contents = style("contents", {
        flexGrow: 1,
        ...paddings({
            left: vars.spacing.padding.left,
            right: vars.spacing.padding.right,
        }),
        maxWidth: calc(`100% - ${unit(vars.unreadDot.width + vars.imageContainer.width)}`),
    });

    const message = style("message", {
        lineHeight: globalVars.lineHeights.excerpt,
        color: colorOut(globalVars.mainColors.fg),
    });

    return { root, link, imageContainer, image, status, contents, message };
});