How to use the csx.calc function in csx
To help you get started, we’ve selected a few csx examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
vanilla / vanilla / library / src / scripts / styles / styleHelpersSpacing.ts View on Github 
export function extendItemContainer(itemPaddingX: number): NestedCSSProperties {
return {
width: calc(`100% + ${unit(itemPaddingX * 2)}`),
marginLeft: unit(-itemPaddingX),
};
}const makeImageMinWidth = (rootUnit, padding) => {
const negative = vars.contentContainer.minWidth + vars.contentContainer.padding.horizontal + padding;
return calc(`${unit(rootUnit)} - ${unit(negative)}`);
};const overflowFull = useThemeCache((offset: number) =>
style("overflowFull", {
height: calc(`100vh - ${unit(offset)}`),
overflow: "auto",
position: "relative",
minHeight: 100,
paddingBottom: 50,
paddingTop: 50,
marginTop: -50,
}),
);const root = useThemeCache(() =>
style(
{
display: "flex",
flexDirection: "column",
justifyContent: "stretch",
height: calc(`100% - ${unit(vars.navHeight.height)}`),
},
mediaQueries.oneColumnDown({
height: calc(`100% - ${unit(titleBarVars.sizing.mobile.height)}`),
}),
),
);export const metaContainerStyles = (overwrites?: any) => {
const vars = metasVariables();
const globalVars = globalVariables();
const flexed = { display: "flex", flexWrap: "wrap", justifyContent: "flex-start", alignItems: "center" };
return {
display: "block",
lineHeight: globalVars.lineHeights.meta,
color: colorOut(vars.colors.fg),
width: calc(`100% + ${unit(vars.spacing.default * 2)}`),
overflow: "hidden",
textAlign: "left",
fontSize: unit(globalVars.meta.text.size),
...margins({
left: -vars.spacing.default,
right: vars.spacing.default,
}),
$nest: {
a: {
...allLinkStates({
allStates: {
textShadow: "none",
},
noState: {
color: colorOut(vars.colors.fg),
},
