@ddsys/material
Version:
<p> <a href="https://bhp-dev.gitlab.io/dds-digital-design-system/">Read the docs</a> · <a href="mailto:UserExperience@bhpbilliton.com">Request feature</a> </p>
51 lines (49 loc) • 1.19 kB
JavaScript
export default function(theme) {
const { variables } = theme;
const { fonts } = variables;
return {
"@keyframes ball-scale-multiple": {
"0%": {
transform: "scale(0)",
opacity: 0
},
"5%": {
opacity: 1
},
"100%": {
transform: "scale(1)",
opacity: 0
}
},
style: {
display: "inline-block",
position: "relative",
transform: "translateY(0)",
width: `${fonts.size.normal * 4}rem`,
height: "4rem",
"& div": {
position: "absolute",
left: "0",
top: "0",
opacity: "0",
margin: "0",
width: "100%",
height: "100%",
borderRadius: "100%",
animation: "ball-scale-multiple 1s 0s linear infinite",
animationFillMode: "both",
animationDelay: "-.2s"
},
"& div:first-child": { animationDelay: "0s" },
"& div:last-child": { animationDelay: "-0.4s" }
},
large: {
width: `${fonts.size.normal * 6}rem`,
height: `${fonts.size.normal * 6}rem`
},
small: {
width: `${fonts.size.normal * 2}rem`,
height: `${fonts.size.normal * 2}rem`
}
};
}