Stefan Hacker
124 lines
5.7 KiB
JavaScript
124 lines
5.7 KiB
JavaScript
define(["require", "exports", "tslib", "../../Styling", "../../Utilities"], function (require, exports, tslib_1, Styling_1, Utilities_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = getStyles;
|
|
var GlobalClassNames = {
|
|
root: 'ms-Shimmer-container',
|
|
shimmerWrapper: 'ms-Shimmer-shimmerWrapper',
|
|
shimmerGradient: 'ms-Shimmer-shimmerGradient',
|
|
dataWrapper: 'ms-Shimmer-dataWrapper',
|
|
};
|
|
var BACKGROUND_OFF_SCREEN_POSITION = '100%';
|
|
var shimmerAnimation = (0, Utilities_1.memoizeFunction)(function () {
|
|
return (0, Styling_1.keyframes)({
|
|
'0%': {
|
|
transform: "translateX(-".concat(BACKGROUND_OFF_SCREEN_POSITION, ")"),
|
|
},
|
|
'100%': {
|
|
transform: "translateX(".concat(BACKGROUND_OFF_SCREEN_POSITION, ")"),
|
|
},
|
|
});
|
|
});
|
|
var shimmerAnimationRTL = (0, Utilities_1.memoizeFunction)(function () {
|
|
return (0, Styling_1.keyframes)({
|
|
'100%': {
|
|
transform: "translateX(-".concat(BACKGROUND_OFF_SCREEN_POSITION, ")"),
|
|
},
|
|
'0%': {
|
|
transform: "translateX(".concat(BACKGROUND_OFF_SCREEN_POSITION, ")"),
|
|
},
|
|
});
|
|
});
|
|
function getStyles(props) {
|
|
var _a;
|
|
var isDataLoaded = props.isDataLoaded, className = props.className, theme = props.theme, transitionAnimationInterval = props.transitionAnimationInterval, shimmerColor = props.shimmerColor, shimmerWaveColor = props.shimmerWaveColor, improveCSSPerformance = props.improveCSSPerformance;
|
|
var semanticColors = theme.semanticColors;
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
var isRTL = (0, Utilities_1.getRTL)(theme);
|
|
return {
|
|
root: [
|
|
classNames.root,
|
|
theme.fonts.medium,
|
|
{
|
|
position: 'relative',
|
|
height: 'auto',
|
|
},
|
|
className,
|
|
],
|
|
shimmerWrapper: [
|
|
classNames.shimmerWrapper,
|
|
{
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
transform: 'translateZ(0)',
|
|
backgroundColor: shimmerColor || semanticColors.disabledBackground,
|
|
transition: "opacity ".concat(transitionAnimationInterval, "ms"),
|
|
selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = tslib_1.__assign({ background: "WindowText\n linear-gradient(\n to right,\n transparent 0%,\n Window 50%,\n transparent 100%)\n 0 0 / 90% 100%\n no-repeat" }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
|
|
_a),
|
|
},
|
|
isDataLoaded && {
|
|
opacity: '0',
|
|
position: 'absolute',
|
|
top: '0',
|
|
bottom: '0',
|
|
left: '0',
|
|
right: '0',
|
|
},
|
|
improveCSSPerformance
|
|
? {
|
|
selectors: {
|
|
'> div:last-child': {
|
|
transform: 'translateZ(0)',
|
|
},
|
|
},
|
|
}
|
|
: {
|
|
selectors: {
|
|
'> *': {
|
|
transform: 'translateZ(0)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
shimmerGradient: [
|
|
classNames.shimmerGradient,
|
|
{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
background: "".concat(shimmerColor || semanticColors.disabledBackground, "\n linear-gradient(\n to right,\n ").concat(shimmerColor || semanticColors.disabledBackground, " 0%,\n ").concat(shimmerWaveColor || semanticColors.bodyDivider, " 50%,\n ").concat(shimmerColor || semanticColors.disabledBackground, " 100%)\n 0 0 / 90% 100%\n no-repeat"),
|
|
transform: "translateX(-".concat(BACKGROUND_OFF_SCREEN_POSITION, ")"),
|
|
animationDuration: '2s',
|
|
animationTimingFunction: 'ease-in-out',
|
|
animationDirection: 'normal',
|
|
animationIterationCount: 'infinite',
|
|
animationName: isRTL ? shimmerAnimationRTL() : shimmerAnimation(),
|
|
},
|
|
],
|
|
dataWrapper: [
|
|
classNames.dataWrapper,
|
|
{
|
|
position: 'absolute',
|
|
top: '0',
|
|
bottom: '0',
|
|
left: '0',
|
|
right: '0',
|
|
opacity: '0',
|
|
background: 'none',
|
|
backgroundColor: 'transparent',
|
|
border: 'none',
|
|
transition: "opacity ".concat(transitionAnimationInterval, "ms"),
|
|
},
|
|
isDataLoaded && {
|
|
opacity: '1',
|
|
position: 'static',
|
|
},
|
|
],
|
|
screenReaderText: Styling_1.hiddenContentStyle,
|
|
};
|
|
}
|
|
});
|
|
//# sourceMappingURL=Shimmer.styles.js.map
|