@activecollab/components/dist/cjs/components/StepSequence/Styles.js

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledStepSequenceTrigger = exports.StyledStepSequence = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _BoxSizingStyle = require("../BoxSizingStyle");
var _Trigger = require("../Trigger");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var StepPulse = (0, _styledComponents.keyframes)(["0%,100%{opacity:1;}50%{opacity:0.35;}"]);
var StepSequenceStyle = (0, _styledComponents.css)(["", " display:inline-flex;align-items:center;padding:6px 8px;.c-step-sequence__step--success,.c-step-sequence__connector--success{--step-sequence-surface:var(--color-sucess-green);--step-sequence-ring:var(--color-sucess-green);--step-sequence-line:var(--color-sucess-green);}.c-step-sequence__step--info,.c-step-sequence__connector--info{--step-sequence-surface:var(--color-progress-blue);--step-sequence-ring:var(--color-progress-blue);--step-sequence-line:var(--color-progress-blue);}.c-step-sequence__step--warning,.c-step-sequence__connector--warning{--step-sequence-surface:var(--color-orange);--step-sequence-ring:var(--color-orange);--step-sequence-line:var(--color-orange);}.c-step-sequence__step--danger,.c-step-sequence__connector--danger{--step-sequence-surface:var(--red-alert);--step-sequence-ring:var(--red-alert);--step-sequence-line:var(--red-alert);}.c-step-sequence__step--neutral,.c-step-sequence__connector--neutral{--step-sequence-surface:var(--color-theme-500);--step-sequence-ring:var(--color-theme-400);--step-sequence-line:var(--color-theme-400);}.c-step-sequence__step{width:22px;height:22px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;svg{display:block;}}.c-step-sequence__step--solid{background:var(--step-sequence-surface);}.c-step-sequence__step--outline{background:transparent;border:2px solid var(--step-sequence-ring);}.c-step-sequence__step--dashed{background:transparent;border:2px dashed var(--step-sequence-ring);}.c-step-sequence__step--pulse > *{animation:", " 1.4s ease-in-out infinite;}.c-step-sequence__dot{width:6px;height:6px;border-radius:50%;background:var(--step-sequence-surface);}.c-step-sequence__step--solid .c-step-sequence__dot{width:8px;height:8px;background:var(--only-white);}.c-step-sequence__connector{width:13px;height:2px;flex-shrink:0;background:var(--step-sequence-line);}"], _BoxSizingStyle.BoxSizingStyle, StepPulse);
var StyledStepSequenceTrigger = exports.StyledStepSequenceTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
  displayName: "Styles__StyledStepSequenceTrigger",
  componentId: "sc-hp7ywn-0"
})(["", " border-radius:8px;transition:background-color 200ms ease;&:hover{background-color:var(--color-theme-200);}&:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px;}"], StepSequenceStyle);
StyledStepSequenceTrigger.displayName = "StyledStepSequenceTrigger";
var StyledStepSequence = exports.StyledStepSequence = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledStepSequence",
  componentId: "sc-hp7ywn-1"
})(["", ""], StepSequenceStyle);
StyledStepSequence.displayName = "StyledStepSequence";
//# sourceMappingURL=Styles.js.map