@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>
57 lines (53 loc) • 1.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = function (theme) {
var variables = theme.variables;
var fonts = variables.fonts;
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"
}
};
};