@fluent-windows/core/Progress/Progress.styled.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = void 0;

var root = function root(theme) {
  return {
    position: 'relative',
    overflow: 'hidden',
    height: 4,
    backgroundColor: theme.colors.standard["default"]
  };
};

var progress = function progress(theme) {
  return {
    width: '100%',
    transformOrigin: 'left',
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    // isIndeterminate false
    background: theme.colors.primary["default"],
    transition: 'transform 0.43s linear',
    // keyframes
    '@global': {
      '@keyframes indeterminateProgress': {
        from: {
          transform: 'translateX(-130%)'
        },
        to: {
          transform: 'translateX(100%)'
        }
      }
    }
  };
};

var isIndeterminate = function isIndeterminate(theme) {
  return {
    background: "linear-gradient(to right,\n    ".concat(theme.colors.standard["default"], " 0%,\n    ").concat(theme.colors.primary["default"], " 50%,\n    ").concat(theme.colors.standard["default"], " 100%\n  )"),
    animation: '$indeterminateProgress 2.6s infinite'
  };
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    progress: progress(theme),
    isIndeterminate: isIndeterminate(theme)
  };
};

exports.styles = styles;