office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
113 lines • 4.31 kB
JavaScript
define(["require", "exports", "../../Styling", "../../Utilities"], function (require, exports, Styling_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GlobalClassNames = {
root: 'ms-ProgressIndicator',
itemName: 'ms-ProgressIndicator-itemName',
itemDescription: 'ms-ProgressIndicator-itemDescription',
itemProgress: 'ms-ProgressIndicator-itemProgress',
progressTrack: 'ms-ProgressIndicator-progressTrack',
progressBar: 'ms-ProgressIndicator-progressBar'
};
var IndeterminateProgress = Styling_1.keyframes({
'0%': {
left: '-30%'
},
'100%': {
left: '100%'
}
});
var IndeterminateProgressRTL = Styling_1.keyframes({
'100%': {
right: '-30%'
},
'0%': {
right: '100%'
}
});
exports.getStyles = function (props) {
var isRTL = Utilities_1.getRTL();
var className = props.className, indeterminate = props.indeterminate, theme = props.theme, _a = props.barHeight, barHeight = _a === void 0 ? 2 : _a;
var palette = theme.palette, semanticColors = theme.semanticColors;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
var marginBetweenText = 8;
var textHeight = 18;
return {
root: [
classNames.root,
{
fontWeight: Styling_1.FontWeights.regular
},
className
],
itemName: [
classNames.itemName,
Styling_1.noWrap,
{
color: semanticColors.bodyText,
fontSize: Styling_1.FontSizes.medium,
paddingTop: marginBetweenText / 2,
lineHeight: textHeight + 2
}
],
itemDescription: [
classNames.itemDescription,
{
color: semanticColors.bodySubtext,
fontSize: Styling_1.FontSizes.xSmall,
lineHeight: textHeight
}
],
itemProgress: [
classNames.itemProgress,
{
position: 'relative',
overflow: 'hidden',
height: barHeight,
padding: marginBetweenText + "px 0"
}
],
progressTrack: [
classNames.progressTrack,
{
position: 'absolute',
width: '100%',
height: barHeight,
backgroundColor: palette.neutralLight,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
borderBottom: '1px solid WindowText'
},
_b)
}
],
progressBar: [
{
backgroundColor: palette.themePrimary,
height: barHeight,
position: 'absolute',
transition: 'width .3s ease',
width: 0,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
backgroundColor: 'WindowText'
},
_c)
},
indeterminate
? {
position: 'absolute',
minWidth: '33%',
background: "linear-gradient(to right, transparent 0%, " + palette.themePrimary + " 50%, transparent 100%)",
animation: (isRTL ? IndeterminateProgressRTL : IndeterminateProgress) + " 3s infinite"
}
: {
transition: 'width .15s linear'
},
classNames.progressBar
]
};
var _b, _c;
};
});
//# sourceMappingURL=ProgressIndicator.styles.js.map