Stefan Hacker
116 lines
4.3 KiB
JavaScript
116 lines
4.3 KiB
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
|