office-ui-fabric-react/lib-es2015/components/ProgressIndicator/ProgressIndicator.styles.js

Reusable React components for building experiences for Office 365.

import { FontSizes, FontWeights, HighContrastSelector, keyframes, noWrap, getGlobalClassNames } from '../../Styling';
import { getRTL } from '../../Utilities';
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 = keyframes({
    '0%': {
        left: '-30%',
    },
    '100%': {
        left: '100%',
    }
});
var IndeterminateProgressRTL = keyframes({
    '100%': {
        right: '-30%',
    },
    '0%': {
        right: '100%',
    }
});
export var getStyles = function (props) {
    var isRTL = 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 = getGlobalClassNames(GlobalClassNames, theme);
    var marginBetweenText = 8;
    var textHeight = 18;
    return ({
        root: [
            classNames.root,
            {
                fontWeight: FontWeights.regular,
            },
            className
        ],
        itemName: [
            classNames.itemName,
            noWrap,
            {
                color: semanticColors.bodyText,
                fontSize: FontSizes.medium,
                paddingTop: marginBetweenText / 2,
                lineHeight: textHeight + 2,
            }
        ],
        itemDescription: [
            classNames.itemDescription,
            {
                color: semanticColors.bodySubtext,
                fontSize: 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[HighContrastSelector] = {
                        borderBottom: '1px solid WindowText',
                    },
                    _b)
            }
        ],
        progressBar: [
            {
                backgroundColor: palette.themePrimary,
                height: barHeight,
                position: 'absolute',
                transition: 'width .3s ease',
                width: 0,
                selectors: (_c = {},
                    _c[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