How to use the csx.px 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 / styleHelpersPositioning.ts View on Github 
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)) => {const twoColumns = styles => {
return media({ maxWidth: px(panelLayoutBreakPoints.twoColumn) }, styles);
};const xs = styles => {
return media({ maxWidth: px(panelLayoutBreakPoints.xs) }, styles);
};const oneColumn = styles => {
return media({ maxWidth: px(panelLayoutBreakPoints.oneColumn) }, styles);
};const small = (styles: NestedCSSProperties, useMinWidth: boolean = true) => {
return media(
{
maxWidth: px(breakPoints.small),
minWidth: useMinWidth ? px(breakPoints.xs + 1) : undefined,
},
styles,
);
};const xs = (styles: NestedCSSProperties) => {
return media(
{
maxWidth: px(foundationalWidths.breakPoints.xs),
},
styles,
);
};const track = (): types.CSSProperties => ({
cursor: 'pointer',
height: px(trackHeight),
transition: 'all .2s ease',
width: trackWidth
});const noBleed = (styles: NestedCSSProperties, useMinWidth: boolean = true) => {
return media(
{
maxWidth: px(breakPoints.noBleed),
minWidth: useMinWidth ? px(breakPoints.twoColumns + 1) : undefined,
},
styles,
);
};
