office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
90 lines • 3.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
var GlobalClassNames = {
root: 'ms-Shimmer-container',
shimmerWrapper: 'ms-Shimmer-shimmerWrapper',
dataWrapper: 'ms-Shimmer-dataWrapper'
};
var BACKGROUND_OFF_SCREEN_POSITION = '1000%';
var shimmerAnimation = Styling_1.keyframes({
'0%': {
backgroundPosition: "-" + BACKGROUND_OFF_SCREEN_POSITION
},
'100%': {
backgroundPosition: BACKGROUND_OFF_SCREEN_POSITION
}
});
var shimmerAnimationRTL = Styling_1.keyframes({
'100%': {
backgroundPosition: "-" + BACKGROUND_OFF_SCREEN_POSITION
},
'0%': {
backgroundPosition: BACKGROUND_OFF_SCREEN_POSITION
}
});
function getStyles(props) {
var isDataLoaded = props.isDataLoaded, className = props.className, theme = props.theme, transitionAnimationInterval = props.transitionAnimationInterval;
var palette = theme.palette;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
var isRTL = Utilities_1.getRTL();
return {
root: [
classNames.root,
{
position: 'relative',
height: 'auto'
},
className
],
shimmerWrapper: [
classNames.shimmerWrapper,
{
background: palette.neutralLighter + "\n linear-gradient(\n to right,\n " + palette.neutralLighter + " 0%,\n " + palette.neutralLight + " 50%,\n " + palette.neutralLighter + " 100%)\n 0 0 / 90% 100%\n no-repeat",
animationDuration: '2s',
animationTimingFunction: 'ease-in-out',
animationDirection: 'normal',
animationIterationCount: 'infinite',
animationName: isRTL ? shimmerAnimationRTL : shimmerAnimation,
transition: "opacity " + transitionAnimationInterval + "ms",
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
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"
},
_a)
},
isDataLoaded && {
opacity: '0',
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0'
}
],
dataWrapper: [
classNames.dataWrapper,
{
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0',
opacity: '0',
background: 'none',
backgroundColor: 'transparent',
border: 'none',
transition: "opacity " + transitionAnimationInterval + "ms"
},
isDataLoaded && {
opacity: '1',
position: 'static'
}
],
screenReaderText: Styling_1.hiddenContentStyle
};
var _a;
}
exports.getStyles = getStyles;
//# sourceMappingURL=Shimmer.styles.js.map