本文整理匯總了TypeScript中@library/styles/textUtils.lineHeightAdjustment函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript lineHeightAdjustment函數的具體用法？TypeScript lineHeightAdjustment怎麽用？TypeScript lineHeightAdjustment使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了lineHeightAdjustment函數的4個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: useThemeCache
export const typographyClasses = useThemeCache(() => {
const style = styleFactory("typography");
const globalVars = globalVariables();
const vars = containerVariables();
const mediaQueries = layoutVariables().mediaQueries();
const pageTitle = style(
"pageTitle",
{
fontSize: unit(globalVars.fonts.size.title),
lineHeight: globalVars.lineHeights.condensed,
$nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
},
mediaQueries.oneColumnDown({
fontSize: unit(globalVars.fonts.mobile.size.title),
}),
);
const subTitle = style("subTitle", {
fontSize: unit(globalVars.fonts.size.subTitle),
});
const componentSubTitle = style("componentSubTitle", {
fontSize: unit(globalVars.fonts.size.large),
});
return { pageTitle, subTitle, componentSubTitle };
});示例2: lineHeightAdjustment
const headingStyle = (tag: string, fontSize: FontSizeProperty<TLength>): NestedCSSProperties => {
return {
marginTop: globalVars.spacer.size,
fontSize,
$nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
};
};示例3: useThemeCache
export const panelAreaClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = layoutVariables();
const mediaQueries = vars.mediaQueries();
const style = styleFactory("panelArea");
const classesPanelWidget = panelWidgetClasses();
const root = style(
{
width: percent(100),
...paddings({
all: globalVars.gutter.half,
}),
$nest: {
"& .heading": {
$nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
},
[`&.inheritHeight > .${classesPanelWidget.root}`]: {
flexGrow: 1,
},
"&.hasNoVerticalPadding": {
...paddings({ vertical: 0 }),
},
"&.hasNoHorizontalPadding": {
...paddings({ horizontal: 0 }),
},
"&.isSelfPadded": {
...paddings({ all: 0 }),
},
},
},
mediaQueries.oneColumnDown({
...paddings({
horizontal: 0,
}),
}),
);
return { root };
});示例4: 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),
//.........這裏部分代碼省略.........