office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
79 lines • 2.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var Spinner_types_1 = require("./Spinner.types");
var Styling_1 = require("../../Styling");
var spinAnimation = Styling_1.keyframes({
'0%': {
transform: 'rotateZ(0deg)'
},
'100%': {
transform: 'rotateZ(360deg)'
}
});
exports.getStyles = function (props) {
var theme = props.theme, size = props.size, className = props.className;
var palette = theme.palette;
return {
root: ['ms-Spinner', className],
circle: [
'ms-Spinner-circle',
{
margin: 'auto',
boxSizing: 'border-box',
borderRadius: '50%',
width: '100%',
height: '100%',
border: '1.5px solid ' + palette.themeLight,
borderTopColor: palette.themePrimary,
animationName: spinAnimation,
animationDuration: '1.3s',
animationIterationCount: 'infinite',
animationTimingFunction: 'cubic-bezier(.53,.21,.29,.67)',
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
borderTopColor: 'Highlight'
},
_a)
},
size === Spinner_types_1.SpinnerSize.xSmall && [
'ms-Spinner--xSmall',
{
width: 12,
height: 12
}
],
size === Spinner_types_1.SpinnerSize.small && [
'ms-Spinner--small',
{
width: 16,
height: 16
}
],
size === Spinner_types_1.SpinnerSize.medium && [
'ms-Spinner--medium',
{
width: 20,
height: 20
}
],
size === Spinner_types_1.SpinnerSize.large && [
'ms-Spinner--large',
{
width: 28,
height: 28
}
]
],
label: [
'ms-Spinner-label',
{
color: palette.themePrimary,
marginTop: 10,
textAlign: 'center'
}
],
screenReaderText: Styling_1.hiddenContentStyle
};
var _a;
};
//# sourceMappingURL=Spinner.styles.js.map