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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.ProgressLineUI = exports.LineUI = exports.CircleUI = exports.GhostTitleUI = exports.StepUI = exports.StepWrapperUI = exports.StepperUI = exports.config = void 0;

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

var _Text = _interopRequireDefault(require("../Text"));

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

var config = {
  activeColor: (0, _color.getColor)('green.500'),
  backgroundColor: 'white',
  inactiveColor: (0, _color.getColor)('grey.500'),
  circleSize: '15px',
  lineHeight: '3px',
  lineColor: (0, _color.getColor)('grey.400'),
  progressLineColor: (0, _color.getColor)('green.500'),
  textActiveColor: (0, _color.getColor)('charcoal.500'),
  textInactiveColor: (0, _color.getColor)('charcoal.200'),
  spacingOffset: '45px',
  circleTransition: '100ms ease',
  transition: '200ms ease'
};
exports.config = config;
var StepperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Steppercss__StepperUI",
  componentId: "epqban-0"
})(["position:relative;margin:0 auto;"]);
exports.StepperUI = StepperUI;
var StepWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Steppercss__StepWrapperUI",
  componentId: "epqban-1"
})(["display:flex;"]);
exports.StepWrapperUI = StepWrapperUI;
var StepUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Steppercss__StepUI",
  componentId: "epqban-2"
})(["color:", ";align-items:center;display:flex;flex-direction:column;padding-left:", ";padding-right:", ";padding-bottom:calc(12px + ", ");position:relative;text-align:center;&.is-clickable{cursor:pointer;}&.is-active{color:", ";font-weight:500;}&:first-of-type{.c-StepperStepLine,.c-StepperStepProgress{left:50%;}}&:last-of-type{.c-StepperStepLine,.c-StepperStepProgress{right:50%;}.c-StepperStepProgress{width:50%;}}"], config.textInactiveColor, config.spacingOffset, config.spacingOffset, config.circleSize, config.textActiveColor);
exports.StepUI = StepUI;
var GhostTitleUI = (0, _styledComponents.default)(_Text.default).withConfig({
  displayName: "Steppercss__GhostTitleUI",
  componentId: "epqban-3"
})(["display:block;font-weight:500;height:0;visibility:hidden;"]);
exports.GhostTitleUI = GhostTitleUI;
var CircleUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Steppercss__CircleUI",
  componentId: "epqban-4"
})(["background:", ";box-shadow:0 0 0 3px ", ";border:3px solid currentColor;border-radius:50%;color:", ";position:absolute;bottom:0;left:50%;margin-left:calc(", " / 2 * -1);height:", ";width:", ";transform:translateZ(0);transition:all ", ";will-change:box-shadow,border;z-index:1;", ";"], config.backgroundColor, config.backgroundColor, config.inactiveColor, config.circleSize, config.circleSize, config.circleSize, config.circleTransition, function (_ref) {
  var isActive = _ref.isActive;
  return isActive && "\n    box-shadow: 0 0 0 0;\n    color: " + config.activeColor + ";\n  ";
});
exports.CircleUI = CircleUI;
var LineUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Steppercss__LineUI",
  componentId: "epqban-5"
})(["background:", ";bottom:6px;left:0;position:absolute;right:0;height:", ";"], config.lineColor, config.lineHeight);
exports.LineUI = LineUI;
LineUI.defaultProps = {
  className: 'c-StepperStepLine'
};
var ProgressLineUI = (0, _styledComponents.default)(LineUI).withConfig({
  displayName: "Steppercss__ProgressLineUI",
  componentId: "epqban-6"
})(["background:", ";transition:transform ", ";transform:scaleX(0);transform-origin:left;width:100%;will-change:transform;&.is-active{transform:scaleX(1.1);}"], config.progressLineColor, config.transition);
exports.ProgressLineUI = ProgressLineUI;