本文整理匯總了TypeScript中@library/styles/styleHelpers.allButtonStates函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript allButtonStates函數的具體用法？TypeScript allButtonStates怎麽用？TypeScript allButtonStates使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了allButtonStates函數的3個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: 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),
},
}),
});示例2: useThemeCache
//.........這裏部分代碼省略.........
{
color: vars.colors.fg.toString(),
padding: `0 ${px(vars.sizing.spacer / 2)}`,
margin: `0 ${px(vars.sizing.spacer / 2)}`,
borderRadius: px(vars.button.borderRadius),
},
mediaQueries.oneColumnDown({
fontSize: px(vars.button.mobile.fontSize),
}),
);
const localeToggle = style(
"localeToggle",
{
height: px(vars.sizing.height),
},
mediaQueries.oneColumnDown({
height: px(vars.sizing.mobile.height),
}),
);
const languages = style("languages", {
marginLeft: "auto",
});
const button = style(
"button",
{
color: vars.colors.fg.toString(),
height: px(vars.sizing.height),
minWidth: px(vars.button.size),
maxWidth: percent(100),
padding: px(0),
...allButtonStates(
{
active: {
// color: vars.colors.fg.toString(),
$nest: {
"& .meBox-buttonContent": {
backgroundColor: colorOut(vars.buttonContents.state.bg),
},
},
},
hover: {
// color: vars.colors.fg.toString(),
$nest: {
"& .meBox-buttonContent": {
backgroundColor: colorOut(vars.buttonContents.state.bg),
},
},
},
accessibleFocus: {
outline: 0,
$nest: {
"& .meBox-buttonContent": {
borderColor: colorOut(vars.colors.fg),
backgroundColor: colorOut(vars.buttonContents.state.bg),
},
},
},
},
{
"& .meBox-buttonContent": {
...borders({
width: 1,
color: "transparent",示例3: useThemeCache
export const messagesClasses = useThemeCache(() => {
const vars = messagesVariables();
const globalVars = globalVariables();
const style = styleFactory("messages");
const titleBarVars = titleBarVariables();
const shadows = shadowHelper();
const mediaQueries = layoutVariables().mediaQueries();
// Fixed wrapper
const fixed = style("fixed", {
position: "fixed",
left: 0,
top: unit(titleBarVars.sizing.height - 8),
minHeight: unit(vars.sizing.minHeight),
width: percent(100),
maxWidth: viewWidth(100),
zIndex: 20,
});
const root = style(
{
width: percent(100),
},
margins({ horizontal: "auto" }),
);
const wrap = style(
"wrap",
{
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
minHeight: unit(vars.sizing.minHeight),
backgroundColor: colorOut(vars.colors.bg),
width: percent(100),
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: globalVars.mainColors.fg,
}),
shadows.embed(),
),
margin: "auto",
color: colorOut(vars.colors.fg),
...paddings({
...vars.spacing.padding,
right: vars.spacing.padding.horizontal / 2,
}),
},
mediaQueries.xs({
flexWrap: "wrap",
paddingLeft: unit(vars.spacing.padding.horizontal / 2),
}),
);
const message = style("message", {
...userSelect(),
...fonts(vars.text.font),
flex: 1,
});
const setWidth = style("setWidth", {
width: unit(vars.sizing.width),
maxWidth: percent(100),
});
const actionButton = style(
"actionButton",
{
...paddings(vars.actionButton.padding),
minHeight: unit(vars.actionButton.minHeight),
whiteSpace: "nowrap",
...fonts(vars.actionButton.font),
...allButtonStates({
noState: {
color: colorOut(vars.colors.fg),
},
allStates: {
color: colorOut(vars.colors.states.fg),
},
focusNotKeyboard: {
outline: 0,
},
}),
},
mediaQueries.xs({
padding: 0,
width: percent(100),
textAlign: "center",
}),
);
return {
root,
wrap,
actionButton,
message,
fixed,
setWidth,
};
//.........這裏部分代碼省略.........