本文整理匯總了TypeScript中csx.percent函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript percent函數的具體用法？TypeScript percent怎麽用？TypeScript percent使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了percent函數的9個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: globalVariables
export const buttonLoaderClasses = (buttonType: ButtonTypes) => {
const globalVars = globalVariables();
const flexUtils = flexHelper();
const style = styleFactory("buttonLoader");
const buttonVars = buttonVariables();
let typeVars;
switch (buttonType) {
case ButtonTypes.PRIMARY:
typeVars = buttonVars.primary;
break;
default:
typeVars = buttonVars.standard;
break;
}
const root = style({
...flexUtils.middle(),
padding: unit(4),
height: percent(100),
width: percent(100),
$nest: {
"&:after": spinnerLoader({
color: typeVars.spinnerColor || (globalVars.mainColors.primary as any),
dimensions: 20,
}),
},
});
return { root };
};示例2: 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 };
});示例3: 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,
};
});示例4: px
fullSizeOfParent: () => {
return {
display: "block",
position: "absolute" as PositionProperty,
top: px(0),
left: px(0),
width: percent(100),
height: percent(100),
};
},示例5: fullSizeOfParent
export function fullSizeOfParent(): NestedCSSProperties {
return {
position: "absolute",
display: "block",
top: px(0),
left: px(0),
width: percent(100),
height: percent(100),
};
}示例6: percent
middleOfParent: () => {
return {
position: "absolute" as PositionProperty,
display: "block",
top: 0,
left: 0,
right: 0,
bottom: 0,
maxHeight: percent(100),
maxWidth: percent(100),
margin: "auto",
};
},示例7: gradient
export const addGradientsToHintOverflow = (width: number | string, color: ColorHelper) => {
const gradient = (direction: "right" | "left") => {
return `linear-gradient(to ${direction}, ${colorOut(color.fade(0))} 0%, ${colorOut(
color.fade(0.3),
)} 20%, ${colorOut(color)} 90%)`;
};
return {
$nest: {
"&:after": {
...absolutePosition.topRight(),
background: gradient("right"),
},
"&:before": {
...absolutePosition.topLeft(),
background: gradient("left"),
},
"&:before, &:after": {
...pointerEvents(),
content: quote(``),
height: percent(100),
width: unit(width),
zIndex: 1,
},
},
};
};示例8: debugHelper
export const spinnerLoader = (props: ISpinnerProps) => {
const debug = debugHelper("spinnerLoader");
const globalVars = globalVariables();
const spinnerVars = {
color: props.color || globalVars.mainColors.primary,
size: props.size || 18,
thickness: props.thickness || 3,
speed: "0.7s",
...props,
};
return {
...debug.name("spinner"),
position: "relative" as PositionProperty,
content: quote("") as ContentProperty,
...defaultTransition("opacity"),
display: "block" as DisplayProperty,
width: unit(spinnerVars.size),
height: unit(spinnerVars.size),
borderRadius: percent(50),
borderTop: `${unit(spinnerVars.thickness)} solid ${spinnerVars.color.toString()}`,
borderRight: `${unit(spinnerVars.thickness)} solid ${spinnerVars.color.fade(0.3).toString()}`,
borderBottom: `${unit(spinnerVars.thickness)} solid ${spinnerVars.color.fade(0.3).toString()}`,
borderLeft: `${unit(spinnerVars.thickness)} solid ${spinnerVars.color.fade(0.3).toString()}`,
transform: "translateZ(0)",
animation: `spillerLoader ${spinnerVars.speed} infinite ease-in-out`,
animationName: spinnerLoaderAnimation,
animationDuration: spinnerVars.speed,
animationIterationCount: "infinite",
animationTimingFunction: "ease-in-out",
};
};示例9: 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 };
});