@procore/core-react/dist/ProgressBar/ProgressBar.styles.js

React library of Procore Design Guidelines

import styled, { css, keyframes } from 'styled-components';
import { Loader } from '../Loader/Loader';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
var loaderGridUnit = spacing.sm;
var animationDelay = '300ms';
var fadeIn = /*#__PURE__*/keyframes(["from{opacity:1;}to{opacity:0;}"]);
export var StyledProgressBarLoader = /*#__PURE__*/styled(Loader).withConfig({
  displayName: "StyledProgressBarLoader",
  componentId: "core-12_44_0__sc-vdy2wl-0"
})([""]);
export var StyledProgressBar = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledProgressBar",
  componentId: "core-12_44_0__sc-vdy2wl-1"
})(["background-color:", ";border-radius:", "px;border:1px solid ", ";display:block;height:", "px;margin:", "px 0;overflow:hidden;position:relative;transition:background-color 0s linear;", " ", ";"], function (_ref) {
  var $complete = _ref.$complete;
  return $complete ? colors.blue50 : colors.gray94;
}, loaderGridUnit * 2, colors.gray50, loaderGridUnit, loaderGridUnit * 2, function (_ref2) {
  var $finalized = _ref2.$finalized;
  return $finalized && css(["transition-delay:", ";", "{animation:", " 0 ease-out ", " forwards;}"], animationDelay, StyledProgressBarLoader, fadeIn, animationDelay);
}, function (_ref3) {
  var $complete = _ref3.$complete,
    $finalized = _ref3.$finalized;
  return $complete && !$finalized && css(["", "{opacity:0;}"], StyledProgressBarLoader);
});
//# sourceMappingURL=ProgressBar.styles.js.map