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

ActiveCollab Components

import styled, { css, keyframes } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { Trigger } from "../Trigger";
const StepPulse = keyframes(["0%,100%{opacity:1;}50%{opacity:0.35;}"]);
const StepSequenceStyle = 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, StepPulse);
export const StyledStepSequenceTrigger = styled(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";
export const StyledStepSequence = styled.div.withConfig({
  displayName: "Styles__StyledStepSequence",
  componentId: "sc-hp7ywn-1"
})(["", ""], StepSequenceStyle);
StyledStepSequence.displayName = "StyledStepSequence";
//# sourceMappingURL=Styles.js.map