@enact/sandstone/ProgressBar/ProgressBar.module.css

Large-screen/TV support library for Enact, containing a variety of UI components.

.progressBar {
  height: 0.25rem;
  margin: 0.75rem;
}
.progressBar.showAnchor::after {
  content: "";
  position: absolute;
  transform: translate(-50%, -50%);
}
.progressBar .bar {
  border-radius: 0.125rem;
  overflow: hidden;
}
.progressBar.horizontal.showAnchor::after {
  width: 0.125rem;
  height: 1rem;
  top: 50%;
  left: calc(var(--ui-progressbar-proportion-anchor) * 100%);
}
.progressBar.vertical {
  min-height: 5rem;
  width: 0.25rem;
}
.progressBar.vertical.showAnchor::after {
  width: 1rem;
  height: 0.125rem;
  bottom: calc(var(--ui-progressbar-proportion-anchor) * 100%);
  left: 50%;
  transform: translate(-50%, 50%);
}
.progressBar.radial {
  height: 1.5rem;
  width: 1.5rem;
}
.progressBar.radial .bar {
  border-color: inherit;
  border-width: 0.1875rem;
  overflow: visible;
}
.progressBar.radial .fill,
.progressBar.radial .load {
  top: -0.1875rem;
  right: -0.1875rem;
  bottom: -0.1875rem;
  left: -0.1875rem;
}
.progressBar.radial .fill::before,
.progressBar.radial .load::before,
.progressBar.radial .fill::after,
.progressBar.radial .load::after {
  border-color: inherit;
  border-width: 0.1875rem;
}
.progressBar:global(.neutral) .bar {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
.progressBar:global(.neutral) .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
.progressBar:global(.neutral) .load {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
.progressBar:global(.neutral).radial .bar,
.progressBar:global(.neutral).radial .fill,
.progressBar:global(.neutral).radial .load {
  background-color: transparent;
}
.progressBar:global(.neutral).radial .bar {
  border-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
.progressBar:global(.neutral).radial .fill {
  border-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
.progressBar:global(.neutral).radial .load {
  border-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
.progressBar:global(.neutral).highlighted .fill {
  background-color: var(--sand-progress-highlighted-color, #ffffff);
}
.progressBar:global(.neutral).highlighted.radial .fill {
  background-color: transparent;
  border-color: var(--sand-progress-highlighted-color, #ffffff);
}
.progressBar:global(.neutral).showAnchor::after {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast) .bar {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast) .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast) .load {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .bar,
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .fill,
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .load {
  background-color: transparent;
}
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .bar {
  border-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .fill {
  border-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .load {
  border-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).highlighted .fill {
  background-color: var(--sand-progress-highlighted-color, #ffffff);
}
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).highlighted.radial .fill {
  background-color: transparent;
  border-color: var(--sand-progress-highlighted-color, #ffffff);
}
:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).showAnchor::after {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
.progressBar:global(.light) .bar {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 161, 161, 161), var(--sand-progress-bg-color-alpha, 40%));
}
.progressBar:global(.light) .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65));
}
.progressBar:global(.light) .load {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65), 30%);
}
.progressBar:global(.light).radial .bar,
.progressBar:global(.light).radial .fill,
.progressBar:global(.light).radial .load {
  background-color: transparent;
}
.progressBar:global(.light).radial .bar {
  border-color: rgb(var(--sand-progress-bg-color-rgb, 161, 161, 161), var(--sand-progress-bg-color-alpha, 40%));
}
.progressBar:global(.light).radial .fill {
  border-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65));
}
.progressBar:global(.light).radial .load {
  border-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65), 30%);
}
.progressBar:global(.light).highlighted .fill {
  background-color: var(--sand-progress-highlighted-color, #000000);
}
.progressBar:global(.light).highlighted.radial .fill {
  background-color: transparent;
  border-color: var(--sand-progress-highlighted-color, #000000);
}
.progressBar:global(.light).showAnchor::after {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 161, 161, 161), var(--sand-progress-bg-color-alpha, 40%));
}
.progressBar:global(.game) .bar {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
.progressBar:global(.game) .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
.progressBar:global(.game) .load {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
.progressBar:global(.game).radial .bar,
.progressBar:global(.game).radial .fill,
.progressBar:global(.game).radial .load {
  background-color: transparent;
}
.progressBar:global(.game).radial .bar {
  border-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
.progressBar:global(.game).radial .fill {
  border-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
.progressBar:global(.game).radial .load {
  border-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
.progressBar:global(.game).highlighted .fill {
  background-color: var(--sand-progress-highlighted-color, #ffffff);
}
.progressBar:global(.game).highlighted.radial .fill {
  background-color: transparent;
  border-color: var(--sand-progress-highlighted-color, #ffffff);
}
.progressBar:global(.game).showAnchor::after {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
:global(.green) .progressBar:global(.game) .bar {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
:global(.green) .progressBar:global(.game) .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.green) .progressBar:global(.game) .load {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.green) .progressBar:global(.game).radial .bar,
:global(.green) .progressBar:global(.game).radial .fill,
:global(.green) .progressBar:global(.game).radial .load {
  background-color: transparent;
}
:global(.green) .progressBar:global(.game).radial .bar {
  border-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
:global(.green) .progressBar:global(.game).radial .fill {
  border-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.green) .progressBar:global(.game).radial .load {
  border-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.green) .progressBar:global(.game).highlighted .fill {
  background-color: var(--sand-progress-highlighted-color, #ffffff);
}
:global(.green) .progressBar:global(.game).highlighted.radial .fill {
  background-color: transparent;
  border-color: var(--sand-progress-highlighted-color, #ffffff);
}
:global(.green) .progressBar:global(.game).showAnchor::after {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
:global(.orange) .progressBar:global(.game) .bar {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
:global(.orange) .progressBar:global(.game) .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.orange) .progressBar:global(.game) .load {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.orange) .progressBar:global(.game).radial .bar,
:global(.orange) .progressBar:global(.game).radial .fill,
:global(.orange) .progressBar:global(.game).radial .load {
  background-color: transparent;
}
:global(.orange) .progressBar:global(.game).radial .bar {
  border-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}
:global(.orange) .progressBar:global(.game).radial .fill {
  border-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.orange) .progressBar:global(.game).radial .load {
  border-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.orange) .progressBar:global(.game).highlighted .fill {
  background-color: var(--sand-progress-highlighted-color, #ffffff);
}
:global(.orange) .progressBar:global(.game).highlighted.radial .fill {
  background-color: transparent;
  border-color: var(--sand-progress-highlighted-color, #ffffff);
}
:global(.orange) .progressBar:global(.game).showAnchor::after {
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), var(--sand-progress-bg-color-alpha, 100%));
}