@fluentui/react
Version:
Reusable React components for building web experiences.
116 lines • 4.36 kB
JavaScript
define(["require", "exports", "tslib", "./Spinner.types", "../../Styling", "../../Utilities"], function (require, exports, tslib_1, Spinner_types_1, Styling_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var GlobalClassNames = {
root: 'ms-Spinner',
circle: 'ms-Spinner-circle',
label: 'ms-Spinner-label',
};
var spinAnimation = (0, Utilities_1.memoizeFunction)(function () {
return (0, Styling_1.keyframes)({
'0%': {
transform: 'rotate(0deg)',
},
'100%': {
transform: 'rotate(360deg)',
},
});
});
var getStyles = function (props) {
var _a;
var theme = props.theme, size = props.size, className = props.className, labelPosition = props.labelPosition;
var palette = theme.palette;
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
return {
root: [
classNames.root,
{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
labelPosition === 'top' && {
flexDirection: 'column-reverse',
},
labelPosition === 'right' && {
flexDirection: 'row',
},
labelPosition === 'left' && {
flexDirection: 'row-reverse',
},
className,
],
circle: [
classNames.circle,
{
boxSizing: 'border-box',
borderRadius: '50%',
borderWidth: '1.5px',
borderStyle: 'solid',
borderTopColor: palette.themePrimary,
borderRightColor: palette.themeLight,
borderBottomColor: palette.themeLight,
borderLeftColor: palette.themeLight,
animationName: spinAnimation(),
animationDuration: '1.3s',
animationIterationCount: 'infinite',
animationTimingFunction: 'cubic-bezier(.53,.21,.29,.67)',
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderTopColor: 'Highlight' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_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: [
classNames.label,
theme.fonts.small,
{
color: palette.themePrimary,
margin: '8px 0 0',
textAlign: 'center',
},
labelPosition === 'top' && {
margin: '0 0 8px',
},
labelPosition === 'right' && {
margin: '0 0 0 8px',
},
labelPosition === 'left' && {
margin: '0 8px 0 0',
},
],
screenReaderText: Styling_1.hiddenContentStyle,
};
};
exports.getStyles = getStyles;
});
//# sourceMappingURL=Spinner.styles.js.map