@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 2.16 kB
CSS
.cdx-progress-bar{box-sizing:border-box;overflow-x:hidden}.cdx-progress-bar__bar{width:33.33%;height:100%}[dir] .cdx-progress-bar__bar{background-color:var(--background-color-progressive, #36c)}[dir] .cdx-progress-bar--disabled .cdx-progress-bar__bar{background-color:var(--background-color-disabled, #dadde3)}[dir] .cdx-progress-bar:not(.cdx-progress-bar--disabled) .cdx-progress-bar__bar:not(.cdx-progress-bar__bar--determinate){animation-duration:1.6s;animation-timing-function:linear;animation-iteration-count:infinite}[dir=ltr] .cdx-progress-bar:not(.cdx-progress-bar--disabled) .cdx-progress-bar__bar:not(.cdx-progress-bar__bar--determinate){animation-name:cdx-animation-progress-bar__bar-ltr}[dir=rtl] .cdx-progress-bar:not(.cdx-progress-bar--disabled) .cdx-progress-bar__bar:not(.cdx-progress-bar__bar--determinate){animation-name:cdx-animation-progress-bar__bar-rtl}.cdx-progress-bar__bar--determinate{width:calc((var(--cdx-progress-value, 0) / var(--cdx-progress-max, 100)) * 100%)}.cdx-progress-bar:not(.cdx-progress-bar--inline){position:relative;z-index:1;height:.75rem;max-width:none}[dir] .cdx-progress-bar:not(.cdx-progress-bar--inline){background-color:var(--background-color-base, #fff);border:1px solid var(--border-color-progressive, #36c);border-width:1px;border-style:solid;border-color:var(--border-color-progressive, #36c);border-radius:2px}[dir] .cdx-progress-bar:not(.cdx-progress-bar--inline).cdx-progress-bar--disabled{border-color:var(--border-color-disabled, #c8ccd1)}.cdx-progress-bar--inline{width:100%;height:.25rem}.cdx-progress-bar__label{color:var(--color-base, #202122);font-size:var(--font-size-small, .875rem);white-space:wrap}.cdx-progress-bar__labels{display:flex;justify-content:space-between}[dir=ltr] .cdx-progress-bar__label--start{text-align:left}[dir=rtl] .cdx-progress-bar__label--start,[dir=ltr] .cdx-progress-bar__label--end{text-align:right}[dir=rtl] .cdx-progress-bar__label--end{text-align:left}@keyframes cdx-animation-progress-bar__bar-ltr{0%{transform:translate(-100%)}to{transform:translate(300%)}}@keyframes cdx-animation-progress-bar__bar-rtl{0%{transform:translate(100%)}to{transform:translate(-300%)}}