本文整理汇总了TypeScript中@library/styles/styleHelpers.unit函数的典型用法代码示例。如果您正苦于以下问题：TypeScript unit函数的具体用法？TypeScript unit怎么用？TypeScript unit使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了unit函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: useThemeCache
export const insertLinkClasses = useThemeCache(() => {
const vars = richEditorVariables();
const style = styleFactory("insertLink");
const root = style({
position: "relative",
display: "flex",
flexWrap: "nowrap",
alignItems: "center",
maxWidth: unit(vars.insertLink.width),
width: percent(100),
paddingLeft: 0,
});
const input = style("input", {
zIndex: 2,
$nest: {
"&, &.InputBox": {
border: important("0"),
marginBottom: important("0"),
flexGrow: 1,
maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
},
},
});
return { root, input };
});示例2: 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 };
});示例3: useThemeCache
export const drawerClasses = useThemeCache(() => {
const vars = drawerVariables();
const debug = debugHelper("drawer");
const root = style({
display: "block",
position: "relative",
...debug.name(),
});
const contents = style({
position: "relative",
width: percent(100),
...debug.name("contents"),
});
const toggle = style({
fontWeight: vars.fonts.weight,
padding: `${unit(vars.spacing.button.padding)} 0`,
width: percent(100),
textAlign: "left",
...debug.name("toggle"),
});
const icon = style({
display: "inline-flex",
minWidth: unit(vars.sizing.icon),
fontSize: unit(vars.fonts.size),
...debug.name("icon"),
});
return { root, contents, toggle, icon };
});示例4: 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),
},
}),
});示例5: 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 };
});示例6: 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 };
});示例7: useThemeCache
export const loaderClasses = useThemeCache(() => {
const vars = loaderVariables();
const flex = flexHelper();
const style = styleFactory("loader");
const fullPageLoader = style("fullPageLoader", {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
margin: "auto",
height: unit(vars.fullPage.size),
width: unit(vars.fullPage.size),
$nest: {
"&:after": {
...spinnerLoader(vars.fullPage),
},
},
});
const mediumLoader = style("mediumLoader", {
...absolutePosition.fullSizeOfParent(),
...flex.middle(),
height: percent(100),
width: percent(100),
$nest: {
"&:after": {
...spinnerLoader(vars.medium),
},
},
});
const smallLoader = style("smallLoader", {
...flex.middle(),
height: percent(46),
width: percent(46),
margin: "auto",
$nest: {
"&:after": {
...spinnerLoader(vars.small),
},
},
});
const loaderContainer = (size: TLength) => {
return style({
position: "relative",
display: "block",
margin: "auto",
height: unit(size),
width: unit(size),
});
};
return {
fullPageLoader,
mediumLoader,
smallLoader,
loaderContainer,
};
});示例8: buttonGlobalVariables
export const buttonSizing = (height, minWidth, fontSize, paddingHorizontal, formElementVars) => {
const borderWidth = formElementVars.borders ? formElementVars.borders : buttonGlobalVariables().border.width;
return {
minHeight: unit(formElementVars.sizing.minHeight),
fontSize: unit(fontSize),
padding: `${unit(0)} ${px(paddingHorizontal)}`,
lineHeight: unit(formElementVars.sizing.height - borderWidth * 2),
};
};示例9: useThemeCache
export const richEditorFlyoutClasses = useThemeCache(() => {
const vars = richEditorVariables();
const style = styleFactory("richEditorFlyout");
const shadows = shadowHelper();
const globalVars = globalVariables();
const root = style({
...shadows.dropDown(),
position: "absolute",
left: 0,
width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
zIndex: 6,
overflow: "hidden",
backgroundColor: colorOut(vars.colors.bg),
...borders(),
$nest: {
"&& .ReactVirtualized__Grid": {
width: important(unit(vars.richEditorWidth) as string),
},
},
});
const header = style("header", {
position: "relative",
borderBottom: singleBorder(),
...paddings(vars.emojiHeader.padding),
});
const title = style("title", {
display: "flex",
alignItems: "center",
...longWordEllipsis(),
margin: 0,
maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
minHeight: vars.menuButton.size - vars.emojiBody.padding.horizontal,
fontSize: percent(100),
lineHeight: "inherit",
color: colorOut(globalVars.mainColors.fg),
$nest: {
"&:focus": {
outline: 0,
},
},
});
const body = style("body", {
...paddings(vars.emojiBody.padding),
width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
});
const footer = style("footer", {
borderTop: singleBorder(),
});
return { root, header, body, footer, title };
});示例10: style
const loaderContainer = (size: TLength) => {
return style({
position: "relative",
display: "block",
margin: "auto",
height: unit(size),
width: unit(size),
});
};