本文整理匯總了TypeScript中typestyle/lib/types.NestedCSSProperties類的典型用法代碼示例。如果您正苦於以下問題：TypeScript NestedCSSProperties類的具體用法？TypeScript NestedCSSProperties怎麽用？TypeScript NestedCSSProperties使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了NestedCSSProperties類的4個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的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),
},
}),
});示例2: useThemeCache
export const buttonUtilityClasses = useThemeCache(() => {
const vars = buttonGlobalVariables();
const globalVars = globalVariables();
const formElementVars = formElementsVariables();
const style = styleFactory("buttonUtils");
const pushLeft = style("pushLeft", {
marginRight: important("auto"),
});
const pushRight = style("pushRight", {
marginLeft: important("auto"),
});
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),
},
}),
});
const buttonIcon = style("icon", iconMixin(formElementVars.sizing.height));
const buttonIconCompact = style("iconCompact", iconMixin(vars.sizing.compactHeight));
const asTextStyles: NestedCSSProperties = {
...buttonResetMixin(),
minWidth: important(0),
padding: 0,
overflow: "hidden",
textAlign: "left",
lineHeight: globalVars.lineHeights.base,
fontWeight: globalVars.fonts.weights.semiBold,
};
const buttonAsText = style("asText", asTextStyles, {
color: "inherit",
$nest: {
"&:not(.focus-visible)": {
outline: 0,
},
"&:hover": {
color: colorOut(globalVars.mainColors.primary),
},
"&:focus, &:active": {
color: colorOut(globalVars.mainColors.secondary),
},
},
});
const buttonAsTextPrimary = style("asTextPrimary", asTextStyles, {
color: colorOut(globalVars.mainColors.primary),
$nest: {
"&:not(.focus-visible)": {
outline: 0,
},
"&:hover, &:focus, &:active": {
color: colorOut(globalVars.mainColors.secondary),
},
},
});
return {
pushLeft,
buttonAsText,
buttonAsTextPrimary,
pushRight,
buttonIconCompact,
buttonIcon,
};
});示例3: useThemeCache
export const userContentClasses = useThemeCache(() => {
const style = styleFactory("userContent");
const vars = userContentVariables();
const globalVars = globalVariables();
const listItem: NestedCSSProperties = {
position: "relative",
...margins({
top: vars.list.spacing.top,
left: vars.list.spacing.left,
}),
$nest: {
"&:first-child": {
marginTop: 0,
},
"&:last-child": {
marginBottom: 0,
},
},
};
const headingStyle = (tag: string, fontSize: FontSizeProperty<TLength>): NestedCSSProperties => {
return {
marginTop: globalVars.spacer.size,
fontSize,
$nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
};
};
const headings: NestedCSSSelectors = {
"& h1": headingStyle("h1", vars.fonts.headings.h1),
"& h2": headingStyle("h2", vars.fonts.headings.h2),
"& h3": headingStyle("h3", vars.fonts.headings.h3),
"& h4": headingStyle("h4", vars.fonts.headings.h4),
"& h5": headingStyle("h5", vars.fonts.headings.h5),
"& h6": headingStyle("h6", vars.fonts.headings.h6),
};
const lists: NestedCSSSelectors = {
"& ol": {
listStylePosition: "inside",
},
"& ol li": {
...listItem,
listStyle: "decimal",
},
"& ul li": {
...listItem,
listStyle: "initial",
},
};
const paragraphSpacing: NestedCSSSelectors = {
"& p": {
marginTop: 0,
marginBottom: 0,
$nest: {
"&:not(:first-child)": {
marginTop: vars.blocks.margin * 0.5,
},
"&:first-child": {
$nest: lineHeightAdjustment(globalVars.lineHeights.base),
},
},
},
"&& > *:not(:last-child)": {
marginBottom: vars.blocks.margin,
},
"&& > *:first-child": {
marginTop: 0,
},
};
const linkColors = setAllLinkColors();
const linkStyle = {
color: linkColors.color,
$nest: {
...linkColors.nested,
"&:hover, &:focus": {
textDecoration: "underline",
},
},
};
const linkStyles: NestedCSSSelectors = {
a: linkStyle,
"p a": linkStyle,
"li a": linkStyle,
};
const codeStyles: NestedCSSSelectors = {
"& .code": {
position: "relative",
fontSize: vars.code.fontSize,
fontFamily: `Menlo, Monaco, Consolas, "Courier New", monospace`,
maxWidth: percent(100),
overflowX: "auto",
margin: 0,
color: colorOut(vars.code.fg),
//.........這裏部分代碼省略.........
示例4: style
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
: {},
),
},
},
},
//.........這裏部分代碼省略.........