@inkline/inkline/components/IProgressBar/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Progress bar
 */
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  height: 100%;
  color: var(--progress-bar--color);
  background: var(--progress-bar--background);
}

/**
 * Color variants
 */
.progress-bar.-primary {
  --progress-bar--color: var(
      --progress-bar--primary--color,
      var(--contrast-text-color-primary)
  );
  --progress-bar--background: var(--progress-bar--primary--background, var(--color-primary));
}
.progress-bar.-secondary {
  --progress-bar--color: var(
      --progress-bar--secondary--color,
      var(--contrast-text-color-secondary)
  );
  --progress-bar--background: var(
      --progress-bar--secondary--background,
      var(--color-secondary)
  );
}
.progress-bar.-light {
  --progress-bar--color: var(--progress-bar--light--color, var(--contrast-text-color-light));
  --progress-bar--background: var(--progress-bar--light--background, var(--color-white));
}
.progress-bar.-dark {
  --progress-bar--color: var(--progress-bar--dark--color, var(--contrast-text-color-dark));
  --progress-bar--background: var(--progress-bar--dark--background, var(--color-dark));
}
.progress-bar.-info {
  --progress-bar--color: var(--progress-bar--info--color, var(--contrast-text-color-info));
  --progress-bar--background: var(--progress-bar--info--background, var(--color-info));
}
.progress-bar.-success {
  --progress-bar--color: var(
      --progress-bar--success--color,
      var(--contrast-text-color-success)
  );
  --progress-bar--background: var(--progress-bar--success--background, var(--color-success));
}
.progress-bar.-warning {
  --progress-bar--color: var(
      --progress-bar--warning--color,
      var(--contrast-text-color-warning)
  );
  --progress-bar--background: var(--progress-bar--warning--background, var(--color-warning));
}
.progress-bar.-danger {
  --progress-bar--color: var(
      --progress-bar--danger--color,
      var(--contrast-text-color-danger)
  );
  --progress-bar--background: var(--progress-bar--danger--background, var(--color-danger));
}