@fluentui/react-northstar
Version:
A themable React component library.
105 lines (103 loc) • 2.62 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.loaderStyles = void 0;
var _utils = require("../../../../utils");
var rootFlexDirections = {
above: 'column-reverse',
below: 'column',
start: 'row-reverse',
end: 'row'
};
var getCircleStyles = function getCircleStyles() {
return {
cx: '50%',
cy: '50%',
r: '45%',
fill: 'none',
strokeWidth: '8px'
};
};
var loaderStyles = {
root: function root(_ref) {
var p = _ref.props;
return {
alignItems: 'center',
display: p.inline ? 'inline-flex' : 'flex',
justifyContent: 'center',
flexDirection: rootFlexDirections[p.labelPosition]
};
},
indicator: function indicator(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return {
height: v.containerHeights[p.size],
width: v.containerWidths[p.size]
};
},
svg: function svg(_ref3) {
var p = _ref3.props,
v = _ref3.variables;
return {
animation: '3s linear infinite',
animationName: {
'0%': {
transform: 'rotate(0deg) /* @noflip */'
},
'100%': {
transform: 'rotate(360deg) /* @noflip */'
}
},
width: v.svgWidths[p.size],
height: v.svgHeights[p.size]
};
},
svgTrack: function svgTrack(_ref4) {
var p = _ref4.props,
v = _ref4.variables;
return Object.assign({
stroke: !p.secondary && v.svgTrackColor
}, getCircleStyles());
},
svgTail: function svgTail(_ref5) {
var p = _ref5.props,
v = _ref5.variables;
return Object.assign({}, getCircleStyles(), {
animation: '1.5s cubic-bezier(0.33,0,0.67,1) infinite',
strokeLinecap: 'round',
strokeDasharray: '283',
strokeDashoffset: '280',
transformOrigin: '50% 50%',
stroke: p.secondary ? v.svgSecondaryColor : v.svgTailColor,
animationName: {
'0%': {
strokeDashoffset: '283',
transform: 'rotate(0) /* @noflip */'
},
'25%': {
strokeDashoffset: '283',
transform: 'rotate(0) /* @noflip */'
},
'50%': {
strokeDashoffset: '75',
transform: 'rotate(45deg) /* @noflip */'
},
'75%': {
strokeDashoffset: '75',
transform: 'rotate(45deg) /* @noflip */'
},
'100%': {
strokeDashoffset: '283',
transform: 'rotate(360deg) /* @noflip */'
}
}
});
},
label: function label() {
return {
margin: (0, _utils.pxToRem)(10)
};
}
};
exports.loaderStyles = loaderStyles;
//# sourceMappingURL=loaderStyles.js.map