censa_ui/css/src/components/stepper.css

React components library project for censa Design System

.Stepper {
  display: flex;
  position: relative;
  z-index: 9;
}
.Step {
  display: flex;
  align-items: center;
  padding-left: var(--spacing-l);
  padding-right: var(--spacing-l);
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
  border-radius: var(--spacing-2);
  cursor: pointer;
}

/* .Step:hover {
  background-color: var(--secondary);
} */

/* .Step:active {
  background-color: var(--secondary-dark);
} */

.Step:focus,
.Step:focus-visible {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
  outline: none;
}

/* Completed State */

.Step--completed {
  color: var(--primary-dark);
}



/* .Step--completed:hover {
  background-color: var(--secondary);
} */

/* .Step--completed:active {
  background-color: var(--secondary-dark);
} */

.Step--completed:focus,
.Step--completed:focus-visible {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
  outline: none;
}

.white-background {
  background-color: #F9F4FF;
}

/* Active State */

/* .Step--active {
  background-color: var(--primary-lightest);
  color: var(--primary-dark);
  transition-delay: var(--duration--fast-02);
} */

/* .Step--active:hover {
  background-color: var(--primary-lighter);
} */

/* .Step--active:focus,
.Step--active:focus-visible {
  background-color: var(--primary-lightest);
  box-shadow: var(--shadow-spread) var(--primary-shadow);
  outline: none;
} */

/* .Step--active:active {
  background-color: var(--primary-lighter);
  color: var(--primary-darker);
} */

.Step--active:active .Stepper-text {
  color: var(--stone-dark);
}

.Step.Stepper-animate.Step--active .color-primary-dark {
  color: var(--night);
}
.Step.Stepper-animate .color-inverse-lightest{
  color: var(--night);
}

.Step.Stepper-animate.Step--active i {
  color: #8025E3;
}
.Step.Stepper-animate.Step--completed i{color: #2FA843;}

.Step.Stepper-animate i{width: 48px !important; height: 48px; border-radius: 50%; text-align: center; line-height: 3; color: #9B9A9D; border: 2px solid #F9F4FF;}

/* Disabled State */

.Step--disabled {
  cursor: not-allowed;
  color: var(--inverse-lightest);
  pointer-events: none;
}

.Stepper-animate {
  transition-delay: var(--duration--fast-02);
  transition: var(--duration--fast-02) var(--standard-productive-curve);
}

.horizontal_stepper .Stepper .Stepper-animate:not(:first-child)::before {
  right: 23%;
  top: 2rem;
  height: 0.1rem;
  width: 55%;
  content: ' ';
  z-index: -9;
}
.Stepper .Step.Stepper-animate{background: #fff;}


.completedsteps .Stepper .Stepper-animate:not(:first-child)::before {
  right: 60%;
  top: 2rem;
  height: 0.1rem;
  width: 25%;
  content: ' ';
  z-index: -9;
}
.activestep .Stepper .Stepper-animate:not(:first-child)::before {
  right: 60%;
  top: 2rem;
  height: 0.1rem;
  width: 26%;
  content: ' ';
  z-index: -9;
}
.allstepper .Stepper .Stepper-animate:not(:first-child)::before {
  right: 58%;
  top: 2rem;
  height: 0.1rem;
  width: 27%;
  content: ' ';
  z-index: -9;
}
.Step .Stepper-animate i { background-color: #000;}
.stepper-horizantal .Stepper {display: block;}
.stepper-horizantal .Step {margin-bottom: 20px;}
.Step.Stepper-animate.Step--completed i.white-background{background-color: #F5FBF5; border: 2px solid #2FA843;}
.stepper-horizantal .my-4{margin-top:0px !important; margin-bottom:0px !important; }
.Step.Stepper-animate.Step--active i.white-background{background-color: #F9F4FF; }


.stepper-horizantal .Step--completed::before{
  left: 29% !important;
  top: 2rem !important;
  height: 100%;
  width: 2px;
  z-index: -9;
  content: '';
  position: absolute;
  inset: 0px;
  transition: right 300ms ease 0s;
  background-color: #2fa843 !important;
}
.stepper-horizantal .Stepper .linewrap {
  bottom: 0px;
  top: 2rem;
  content: ' ';
  z-index: -9;
  position: relative;
  /* border-left: 2px solid #9b9a9d; */
}
.stepper-horizantal .Step.Stepper-animate::before {
  left: 29% !important;
  top: 2rem !important;
  height: 100%;
  width: 2px;
  z-index: -9;
  content: '';
  position: absolute;
  inset: 0px;
  transition: right 300ms ease 0s;
  background-color: #e7e7e8;
}
.stepper-horizantal .Stepper .Stepper-animate:last-child:before {
  background-color: transparent !important;
}
 .Stepper .Stepper-animate:not(:first-child)::before {
  bottom: 0px;
  height: 80%;
  right: 77%;
  top: 2rem;
  width: 2px;
  content: ' ';
  z-index: -9;
  position: absolute;
  background-color: #e7e7e8;
}