@helpscout/hsds-react/components/ProgressBar/ProgressBar.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.BarUI = exports.ProgressBarUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var _forEach = _interopRequireDefault(require("../../styles/utilities/forEach"));

var height = 6;
var sizes = {
  lg: 10,
  md: height,
  sm: 2
};

function makeSizeStyles() {
  return (0, _forEach.default)(sizes, function (name, size) {
    return "\n      &.is-" + name + " {\n        height: " + size + "px;\n      }\n    ";
  });
}

var ProgressBarUI = _styledComponents.default.div.withConfig({
  displayName: "ProgressBarcss__ProgressBarUI",
  componentId: "sc-1j4th2x-0"
})(["background-color:", ";border-radius:200px;height:", "px;width:100%;", ";"], (0, _color.getColor)('grey.300'), height, makeSizeStyles());

exports.ProgressBarUI = ProgressBarUI;

var BarUI = _styledComponents.default.div.withConfig({
  displayName: "ProgressBarcss__BarUI",
  componentId: "sc-1j4th2x-1"
})(["background:linear-gradient( to right,", ",", " );border-radius:200px;height:100%;transition:width 0.3s ease;width:", ";"], (0, _color.getColor)('green.400'), (0, _color.getColor)('green.500'), function (props) {
  return props.width ? props.width : '0%';
});

exports.BarUI = BarUI;