censa_front_end_library/css/src/components/stepper.css

React components library project for censa Design System

.vertical-stepper.vertical-stepper-wrap .step {
  padding: 10px;
  margin: 15px 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}

.vertical-stepper.vertical-stepper-wrap .step.active {
  background-color: transparent; /* Active step background color */
  color: #0a080c; /* Active step text color */
}
.vertical-stepper.vertical-stepper-wrap .step.active i {
  color: #8025e3;
  background-color: #f9f4ff;
  border-radius: 50%;
  border: 2px solid #f9f4ff;
  padding: 12px;
}
.vertical-stepper.vertical-stepper-wrap .step.active .vertical-line {
  background-color: #8025e3;
}
.vertical-stepper.vertical-stepper-wrap .step.completed {
  background-color: transparent; /* Completed step background color */
  color: #9b9a9d; /* Completed step text color */
}
.vertical-stepper.vertical-stepper-wrap .step.completed i {
  color: #2fa843;
  border: 2px solid #2fa843;
  padding: 12px;
  border-radius: 50%;
  background-color: #fff;
}
.vertical-stepper.vertical-stepper-wrap .step.completed .vertical-line {
  background-color: #2fa843;
}
.vertical-stepper.vertical-stepper-wrap .step.inactive {
  color: #9b9a9d;
}
.vertical-stepper.vertical-stepper-wrap .step.inactive i {
  color: #9b9a9d;
  background-color: #f4f3f5;
  border-radius: 50%;
  padding: 12px;
  border: 2px solid #f4f3f5;
}
.vertical-stepper.vertical-stepper-wrap .step span {
  margin-left: 10px;
  font-weight: 600;
  color: #9b9a9d;
}
.vertical-stepper.vertical-stepper-wrap .vertical-stepper {
  display: flex;
  flex-direction: column;
}
.vertical-stepper.vertical-stepper-wrap .step-content {
  display: flex;
  align-items: center;
  z-index: 999;
}
/* .vertical-line {
  position: absolute;
  top: 20%;
  left: calc(47% - 1px);
  width: 2px;
  height: 100%;
  background-color: #f4f3f5;
} */
.vertical-stepper.vertical-stepper-wrap .vertical-line {
  position: absolute;
  top: 12px;
  left: calc(4% - -25px);
  bottom: -26px;
  width: 2px;
  background-color: #f4f3f5;
  z-index: -9;
}

.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: 2;
  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 {
  left: 0%;
  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: 56%;
  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;
}

.vertical-stepper .step.pending i {
  color: #ffaf01;
  border: 1px solid #ffaf01;
  background-color: #ffff;
  border-radius: 50%;
  padding: 12px;
}
.vertical-stepper .step.pending .vertical-line {
  background-color: #ffaf01;
}

.vertical-stepper .step.rejected i {
  color: #f10114;
  border: 1px solid #f10114;
  background-color: #ffff;
  border-radius: 50%;
  padding: 12px;
}
.vertical-stepper .step.rejected .vertical-line {
  background-color: #f10114;
}

.horizontal-line {
  width: 100%;
  height: 2px;
  background-color: #ccc; /* Adjust the color of the line */
  margin: 20px 0; /* Adjust the spacing between steps */
}