本文整理汇总了TypeScript中@library/styles/styleHelpers.userSelect函数的典型用法代码示例。如果您正苦于以下问题:TypeScript userSelect函数的具体用法?TypeScript userSelect怎么用?TypeScript userSelect使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了userSelect函数的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。
示例1: 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
示例2:
export const buttonResetMixin = (): NestedCSSProperties => ({
...userSelect(),
"-webkit-appearance": "none",
appearance: "none",
border: 0,
background: "none",
cursor: "pointer",
color: "inherit",
font: "inherit",
});
开发者ID:vanilla,项目名称:vanilla,代码行数:10,代码来源:buttonStyles.ts
示例3: titleBarNavClasses
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,
};
}
开发者ID:vanilla,项目名称:vanilla,代码行数:97,代码来源:titleBarNavStyles.ts
示例4: useThemeCache
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,
};
});
开发者ID:vanilla,项目名称:vanilla,代码行数:96,代码来源:radioTabStyles.ts
示例5: useThemeCache
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({
//.........这里部分代码省略.........
开发者ID:vanilla,项目名称:vanilla,代码行数:101,代码来源:subcommunityTitleStyles.ts
示例6: useThemeCache
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,
//.........这里部分代码省略.........
开发者ID:vanilla,项目名称:vanilla,代码行数:101,代码来源:checkRadioStyles.ts
示例7: globalVariables
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
示例8: useThemeCache
//.........这里部分代码省略.........
".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,
});
开发者ID:vanilla,项目名称:vanilla,代码行数:67,代码来源:richEditorClasses.ts
示例9: useThemeCache
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",
});
//.........这里部分代码省略.........
开发者ID:vanilla,项目名称:vanilla,代码行数:101,代码来源:dropDownStyles.ts
示例10: useThemeCache
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 };
});
开发者ID:vanilla,项目名称:vanilla,代码行数:88,代码来源:meBoxMessageStyles.ts
注:本文中的@library/styles/styleHelpers.userSelect函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。 |
请发表评论