本文整理汇总了TypeScript中@library/layout/panelLayoutStyles.layoutVariables函数的典型用法代码示例。如果您正苦于以下问题：TypeScript layoutVariables函数的具体用法？TypeScript layoutVariables怎么用？TypeScript layoutVariables使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了layoutVariables函数的9个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: useThemeCache
export const subcommunityListClasses = useThemeCache(() => {
const vars = subcommunityListVariables();
const style = styleFactory("subcommunityList");
const mediaQueries = layoutVariables().mediaQueries();
const layoutVars = layoutVariables();
const root = style(
{
maxWidth: unit(vars.sizing.columnsWidth),
padding: unit(vars.spacing.padding),
margin: "auto",
},
mediaQueries.oneColumnDown({
padding: 0,
}),
);
const items = style(
"items",
{
position: "relative",
display: "flex",
flexWrap: "wrap",
alignItems: "stretch",
justifyContent: "space-between",
},
mediaQueries.oneColumnDown({
display: "block",
}),
);
const item = style(
"item",
{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "stretch",
width: unit(vars.sizing.columnWidth),
},
mediaQueries.oneColumnDown({
display: "block",
width: percent(100),
}),
);
return { root, items, item };
});示例2: useThemeCache
export const containerClasses = useThemeCache(() => {
const style = styleFactory("container");
const globalVars = globalVariables();
const vars = containerVariables();
const mediaQueries = layoutVariables().mediaQueries();
const root = style(
{
display: "flex",
flexDirection: "column",
position: "relative",
boxSizing: "border-box",
width: percent(100),
maxWidth: globalVars.content.width,
marginLeft: "auto",
marginRight: "auto",
...paddings(vars.spacing.padding),
},
mediaQueries.oneColumnDown({
...paddings({
horizontal: 8,
}),
}),
);
return { root };
});示例3: 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 };
});示例4: useThemeCache
export const siteNavClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = siteNavVariables();
const mediaQueries = layoutVariables().mediaQueries();
const style = styleFactory("siteNav");
const root = style(
{
position: "relative",
display: "block",
zIndex: 1,
marginTop: unit(vars.nodeToggle.height / 2 - vars.node.fontSize / 2),
},
mediaQueries.noBleedDown({
marginLeft: unit(vars.nodeToggle.width - vars.nodeToggle.iconWidth / 2 - vars.spacer.default),
}),
);
const title = style("title", {
fontSize: unit(globalVars.fonts.size.large),
fontWeight: globalVars.fonts.weights.bold,
});
const children = style("children", {
position: "relative",
display: "block",
});
return { root, title, children };
});示例5: useThemeCache
export const panelListClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = panelListVariables();
const mediaQueries = layoutVariables().mediaQueries();
const style = styleFactory("panelList");
const root = style({
position: "relative",
display: "block",
});
const title = style("title", {
fontSize: unit(vars.title.fontSize),
marginBottom: unit(vars.offset.default),
});
const item = style("item", {
$nest: {
"& + &": {
marginTop: unit(vars.offset.default),
},
},
});
const link = style("link", {
display: "block",
position: "relative",
width: percent(100),
fontSize: unit(vars.link.fontSize),
color: "inherit",
...allLinkStates({
allStates: {
textDecoration: "none",
},
hover: {
color: globalVars.links.colors.hover,
},
focus: {
color: globalVars.links.colors.focus,
},
}),
});
const items = style("items", {});
return {
root,
title,
item,
link,
items,
};
});示例6: useThemeCache
export const meBoxClasses = useThemeCache(() => {
const globalVars = globalVariables();
const formVars = formElementsVariables();
const titleBarVars = titleBarVariables();
const debug = debugHelper("meBox");
const mediaQueries = layoutVariables().mediaQueries();
const flex = flexHelper();
const style = styleFactory("meBox");
const root = style(
{
...debug.name(),
display: "flex",
alignItems: "center",
height: unit(titleBarVars.sizing.height),
},
mediaQueries.oneColumnDown({
height: unit(titleBarVars.sizing.mobile.height),
}),
);
const buttonContent = style("buttonContent", {
...flex.middle(),
width: unit(formVars.sizing.height),
maxWidth: unit(formVars.sizing.height),
flexBasis: unit(formVars.sizing.height),
height: unit(titleBarVars.meBox.sizing.buttonContents),
});
const rootFlexClass = (count: number) => {
return style("footFlexClass", {
flexBasis: unit(count * formElementsVariables().sizing.height),
});
};
return {
root,
buttonContent,
rootFlexClass,
};
});示例7: 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 };
});示例8: useThemeCache
export const titleBarHomeClasses = useThemeCache(() => {
const vars = titleBarVariables();
const globalVars = globalVariables();
const style = styleFactory("titleBarHome");
const mediaQueries = layoutVariables().mediaQueries();
const root = style({
minHeight: vars.sizing.mobile.height * 2,
});
const left = style("left", {
height: px(1),
width: px(vars.button.size),
flexBasis: vars.button.size,
});
const bottom = style(
"bottom",
{
position: "relative",
backgroundColor: colorOut(vars.bottomRow.bg),
height: unit(vars.sizing.height),
width: percent(100),
...(addGradientsToHintOverflow(globalVars.gutter.half * 4, vars.colors.bg) as any),
},
mediaQueries.oneColumnDown({
height: px(vars.sizing.mobile.height),
...(addGradientsToHintOverflow(globalVars.gutter.half * 4, vars.bottomRow.bg) as any),
}),
);
return {
root,
bottom,
left,
};
});示例9: useThemeCache
export const panelWidgetClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = layoutVariables();
const mediaQueries = vars.mediaQueries();
const style = styleFactory("panelWidget");
const root = style(
{
display: "flex",
flexDirection: "column",
position: "relative",
width: percent(100),
...paddings({
all: globalVars.gutter.half,
}),
$nest: {
"&.hasNoVerticalPadding": {
...paddings({ vertical: 0 }),
},
"&.hasNoHorizontalPadding": {
...paddings({ horizontal: 0 }),
},
"&.isSelfPadded": {
...paddings({ all: 0 }),
},
},
},
mediaQueries.oneColumnDown({
...paddings({
all: 8,
}),
}),
);
return { root };
});