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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.BulletUI = exports.ProgressBulletUI = exports.DotStepperUI = void 0;

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

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

var BULLET_SIZE = 6;
var BULLET_MARGIN = 5;

var getProgressWidth = function getProgressWidth(step) {
  return step * BULLET_SIZE + (step - 1) * BULLET_MARGIN;
};

var DotStepperUI = (0, _styledComponents.default)('ol').withConfig({
  displayName: "DotSteppercss__DotStepperUI",
  componentId: "phl3b7-0"
})(["display:flex;list-style:none;margin:0;padding:", "px;position:relative;"], BULLET_MARGIN);
exports.DotStepperUI = DotStepperUI;
var ProgressBulletUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "DotSteppercss__ProgressBulletUI",
  componentId: "phl3b7-1"
})(["position:absolute;top:", "px;left:", "px;background:", ";width:", "px;height:", "px;border-radius:", "px;transition:all 0.15s ease-out;&::after{content:'';width:", "px;height:", "px;top:0;right:0;position:absolute;border-radius:", "px;background:", ";}"], BULLET_MARGIN, BULLET_MARGIN, (0, _color.getColor)('green.300'), function (_ref) {
  var step = _ref.step;
  return getProgressWidth(step);
}, BULLET_SIZE, BULLET_SIZE, BULLET_SIZE, BULLET_SIZE, BULLET_SIZE, (0, _color.getColor)('green.500'));
exports.ProgressBulletUI = ProgressBulletUI;
var BulletUI = (0, _styledComponents.default)('li').withConfig({
  displayName: "DotSteppercss__BulletUI",
  componentId: "phl3b7-2"
})(["float:left;width:", "px;height:", "px;border-radius:", "px;background:", ";overflow:hidden;margin:0 0 0 ", "px;text-indent:-9999px;&:first-child{margin:0;}"], BULLET_SIZE, BULLET_SIZE, BULLET_SIZE, (0, _color.getColor)('grey.500'), BULLET_MARGIN);
exports.BulletUI = BulletUI;