@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
84 lines (82 loc) • 1.89 kB
JavaScript
const require_config = require('../../core/system/config.cjs');
//#region src/components/indicator/indicator.style.ts
const indicatorStyle = require_config.defineComponentSlotStyle({
base: {
float: { zIndex: "yamcha" },
label: {
alignItems: "center",
display: "inline-flex",
rounded: "full",
verticalAlign: "middle",
whiteSpace: "nowrap",
_numeric: { fontWeight: "medium" }
},
root: { position: "relative" }
},
props: {
inline: {
false: { root: { display: "block" } },
true: { root: { display: "inline-block" } }
},
ping: { true: {
label: { _before: {
animationDuration: "{duration, 1.4s}",
animationFillMode: "forwards",
animationIterationCount: "{iteration-count, infinite}",
animationName: "ping",
animationTimingFunction: "{timing-function, cubic-bezier(0, 0, 0.2, 1)}",
bg: "{ping-color}",
boxSize: "100%",
inset: "0",
opacity: .7,
position: "absolute",
rounded: "full",
zIndex: -1
} },
root: { "--animation-scale": "1.8" }
} },
withBorder: { true: { label: {
borderColor: ["white", "black"],
borderWidth: "0.2em"
} } }
},
variants: {
solid: { label: {
layerStyle: "solid",
"--ping-color": "colorScheme.outline"
} },
subtle: { label: {
layerStyle: "subtle",
"--ping-color": "colorScheme.outline"
} },
surface: { label: {
layerStyle: "surface",
"--ping-color": "colorScheme.outline"
} }
},
sizes: {
sm: { label: {
fontSize: "xs",
minBoxSize: "3",
_notEmpty: { px: "1.5" }
} },
md: { label: {
fontSize: "sm",
minBoxSize: "4",
_notEmpty: { px: "2" }
} },
lg: { label: {
fontSize: "md",
minBoxSize: "5",
_notEmpty: { px: "2.5" }
} }
},
defaultProps: {
size: "sm",
variant: "solid",
ping: false
}
});
//#endregion
exports.indicatorStyle = indicatorStyle;
//# sourceMappingURL=indicator.style.cjs.map