@roadtrip/css/styles/components/_progress-bar.css

CSS framework for Roadtrip Design System

/*
 * Progress Bar
 *
 * Index
 * - Progress
 * - Progress Bar
 *
 */


/* PROGRESS
 -------------------- */

.progress-element-info {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.progress-element-label {
  font-size: var(--road-label-medium);
  text-align: left;
}

.progress-element-step {
  font-size: var(--road-label-medium);
  text-align: right;
}

.progress {
  display: flex;
  height: 0.25rem;
  overflow: hidden;
  font-size: var(--road-label-small);
  background-color: var(--road-surface-disabled);
  border-radius: 0.25rem;
}

.progress-light {
  background-color: var(--road-overlay-inverse);
}

/* PROGRESS BAR
 -------------------- */

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--road-grey-100-new);
  text-align: center;
  white-space: nowrap;
  background-color: var(--road-primary);
  transition: width 0.6s ease;
}