How to use csx - 10 common examples
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 / forms / themeEditor / themeEditorStyles.ts View on Github 
width: percent(100),
height: percent(100),
$nest: {
"&&&": {
display: "flex",
},
},
},
mediaQueries.oneColumnDown({
display: "block",
}),
);
const frame = style(
"frame",
{
width: calc(`${percent(vars.frame.width)} - ${unit(vars.panel.width)}`),
flexBasis: calc(`${percent(vars.frame.width)} - ${unit(vars.panel.width)}`),
height: percent(100),
},
mediaQueries.oneColumnDown({
width: percent(100),
}),
);
const panel = style(
"panel",
{
boxShadow: "0 5px 10px 0 rgba(0, 0, 0, 0.3)",
width: unit(vars.panel.width),
flexBasis: unit(vars.panel.width),
zIndex: 1,const contentContainer = (hasFullWidth = false) => {
return style(
"contentContainer",
{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: vars.options.alignment === BannerAlignment.LEFT ? "flex-start" : "center",
...paddings(vars.contentContainer.padding),
...backgroundHelper(vars.innerBackground),
minWidth: unit(vars.contentContainer.minWidth),
maxWidth: vars.rightImage.image ? unit(vars.contentContainer.minWidth) : undefined,
minHeight: unit(vars.dimensions.minHeight),
maxHeight: unitIfDefined(vars.dimensions.maxHeight),
flexGrow: 0,
width: hasFullWidth || vars.options.alignment === BannerAlignment.LEFT ? percent(100) : undefined,
},
media(
{
maxWidth:
vars.contentContainer.minWidth + containerVariables().spacing.paddingFull.horizontal * 2,
},
{
right: "initial",
left: 0,
minWidth: percent(100),
maxWidth: percent(100),
minHeight: unitIfDefined(vars.dimensions.mobile.minHeight),
maxHeight: unitIfDefined(vars.dimensions.mobile.maxHeight ?? vars.dimensions.maxHeight),
...(vars.options.mobileAlignment
? {
alignItems:minWidth: unit(vars.sizing.minWidth),
$nest: {
[`&:hover .${name}`]: nestedStyles && nestedStyles["&&:hover"] ? nestedStyles["&&:hover"] : undefined,
[`&:focus .${name}`]: nestedStyles && nestedStyles["&&:focus"] ? nestedStyles["&&:focus"] : undefined,
[`&:focus-visible .${name}`]:
nestedStyles && nestedStyles["&&:focus-visible"] ? nestedStyles["&&:focus-visible"] : undefined,
[`&:active .${name}`]:
nestedStyles && nestedStyles["&&:active"] ? nestedStyles["&&:active"] : undefined,
},
},
borderStyling,
);
const content = style("content", {}, paddings(vars.spacing.contentPadding));
const imageAspectRatio = percent((vars.image.ratio.height / vars.image.ratio.width) * 100);
const imageContainer = style("imageContainer", {
background: colorOut(globalVars.mixPrimaryAndBg(0.08)),
width: percent(100),
paddingTop: imageAspectRatio,
position: "relative",
maxHeight: unit(vars.image.maxHeight),
});
const image = style("image", {
...absolutePosition.fullSizeOfParent(),
objectFit: "cover",
objectPosition: "center center",
});
const description = style("description", {borderColor: colorOut(globalVars.mainColors.primary),
},
"&&": {
position: "relative",
},
"& .searchBar__menu-list": {
maxHeight: calc(`100vh - ${unit(titleBarVars.sizing.height)}`),
width: percent(100),
},
"& .searchBar__input": {
color: colorOut(globalVars.mainColors.fg),
width: percent(100),
display: important("block"),
$nest: {
input: {
width: important(percent(100).toString()),
lineHeight: globalVars.lineHeights.base,
},
},
},
"& .suggestedTextInput-menu": {
borderRadius: unit(globalVars.border.radius),
marginTop: unit(-formElementVars.border.width),
marginBottom: unit(-formElementVars.border.width),
},
"&:empty": {
display: "none",
},
},
});
return { bottomRight: (bottom: BottomProperty = px(0), right: RightProperty = px(0)) => {
return {
position: "absolute" as PositionProperty,
bottom: unit(bottom),
right: unit(right),
};
},
bottomLeft: (bottom: BottomProperty = px(0), left: LeftProperty = px(0)) => { topLeft: (top: string | number = "0", left: LeftProperty = px(0)) => {
return {
position: "absolute" as PositionProperty,
top: unit(top),
left: unit(left),
};
},
bottomRight: (bottom: BottomProperty = px(0), right: RightProperty = px(0)) => { topRight: (top: string | number = "0", right: RightProperty = px(0)) => {
return {
position: "absolute" as PositionProperty,
top: unit(top),
right: unit(right),
};
},
topLeft: (top: string | number = "0", left: LeftProperty = px(0)) => {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,
}),
);
