@alifd/next/lib/progress/index.css

A configurable component library for web built on React.

.next-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  top: 0;
  margin: -1px; }

.next-progress-circle[dir=rtl] .next-progress-circle-container {
  transform: scaleX(-1); }

.next-progress-line[dir=rtl] .next-progress-line-overlay {
  left: auto;
  right: 0; }

.next-progress-line {
  box-sizing: border-box; }
  .next-progress-line *,
  .next-progress-line *:before,
  .next-progress-line *:after {
    box-sizing: border-box; }
  .next-progress-line {
    width: 100%;
    display: inline-block;
    position: relative; }
    .next-progress-line-container {
      display: inline-block;
      width: 100%;
      vertical-align: middle; }
    .next-progress-line-underlay {
      position: relative;
      overflow: hidden;
      width: 100%;
      background: #EBECF0;
      background: var(--progress-line-underlay-color, #EBECF0); }
    .next-progress-line-overlay {
      position: absolute;
      left: 0;
      top: 0;
      transition: all 300ms ease;
      transition: all var(--motion-duration-standard, 300ms) var(--motion-ease, ease); }
      .next-progress-line-overlay-normal {
        background: #5584FF;
        background: var(--progress-line-normal-color, #5584FF); }
      .next-progress-line-overlay-success {
        background: #46BC15;
        background: var(--progress-line-success-color, #46BC15); }
      .next-progress-line-overlay-error {
        background: #FF3000;
        background: var(--progress-line-error-color, #FF3000); }
      .next-progress-line-overlay-started {
        background: #FF3000;
        background: var(--progress-line-started-color, #FF3000); }
      .next-progress-line-overlay-middle {
        background: #FF9300;
        background: var(--progress-line-middle-color, #FF9300); }
      .next-progress-line-overlay-finishing {
        background: #46BC15;
        background: var(--progress-line-finishing-color, #46BC15); }
  .next-progress-line.next-small .next-progress-line-underlay {
    border-radius: 20px;
    border-radius: var(--progress-line-radius-s, 20px);
    height: 4px;
    height: var(--progress-line-height-size-s, 4px); }
  .next-progress-line.next-small .next-progress-line-overlay {
    height: 4px;
    height: var(--progress-line-height-size-s, 4px);
    border-radius: 20px;
    border-radius: var(--progress-line-radius-s, 20px);
    top: 50%;
    margin-top: -2px;
    margin-top: calc(0px - var(--progress-line-height-size-s, 4px)/2); }
  .next-progress-line.next-small .next-progress-line-text {
    font-size: 12px;
    font-size: var(--progress-line-font-s, 12px);
    line-height: 4px;
    line-height: var(--progress-line-height-size-s, 4px); }
  .next-progress-line.next-medium .next-progress-line-underlay {
    border-radius: 20px;
    border-radius: var(--progress-line-radius-m, 20px);
    height: 8px;
    height: var(--progress-line-height-size-m, 8px); }
  .next-progress-line.next-medium .next-progress-line-overlay {
    height: 8px;
    height: var(--progress-line-height-size-m, 8px);
    border-radius: 20px;
    border-radius: var(--progress-line-radius-m, 20px);
    top: 50%;
    margin-top: -4px;
    margin-top: calc(0px - var(--progress-line-height-size-m, 8px)/2); }
  .next-progress-line.next-medium .next-progress-line-text {
    font-size: 12px;
    font-size: var(--progress-line-font-m, 12px);
    line-height: 8px;
    line-height: var(--progress-line-height-size-m, 8px); }
  .next-progress-line.next-large .next-progress-line-underlay {
    border-radius: 20px;
    border-radius: var(--progress-line-radius-l, 20px);
    height: 12px;
    height: var(--progress-line-height-size-l, 12px); }
  .next-progress-line.next-large .next-progress-line-overlay {
    height: 12px;
    height: var(--progress-line-height-size-l, 12px);
    border-radius: 20px;
    border-radius: var(--progress-line-radius-l, 20px);
    top: 50%;
    margin-top: -6px;
    margin-top: calc(0px - var(--progress-line-height-size-l, 12px)/2); }
  .next-progress-line.next-large .next-progress-line-text {
    font-size: 12px;
    font-size: var(--progress-line-font-l, 12px);
    line-height: 12px;
    line-height: var(--progress-line-height-size-l, 12px); }
  .next-progress-line-show-info .next-progress-line-container {
    padding-right: 60px;
    margin-right: -60px; }
  .next-progress-line-show-info .next-progress-line-text {
    width: 50px;
    text-align: left;
    margin-left: 10px;
    vertical-align: middle;
    display: inline-block;
    color: #333333;
    color: var(--progress-line-font-color, #333333); }
  .next-progress-line-show-border .next-progress-line-underlay {
    border: 1px solid #DCDEE3;
    border: var(--progress-line-underlay-border-width, 1px) solid var(--progress-line-underlay-border-color, #DCDEE3); }
  .next-progress-line-show-border.next-small .next-progress-line-underlay {
    border-radius: 20px;
    border-radius: var(--progress-line-radius-s, 20px);
    height: 6px;
    height: calc(var(--progress-line-height-size-s, 4px) + var(--progress-line-underlay-border-width, 1px)*2); }
  .next-progress-line-show-border.next-small .next-progress-line-overlay {
    height: 4px;
    height: var(--progress-line-height-size-s, 4px);
    border-radius: 20px;
    border-radius: var(--progress-line-radius-s, 20px);
    top: 50%;
    margin-top: -2px;
    margin-top: calc(0px - var(--progress-line-height-size-s, 4px)/2); }
  .next-progress-line-show-border.next-small .next-progress-line-text {
    font-size: 12px;
    font-size: var(--progress-line-font-s, 12px);
    line-height: 6px;
    line-height: calc(var(--progress-line-height-size-s, 4px) + var(--progress-line-underlay-border-width, 1px)*2); }
  .next-progress-line-show-border.next-medium .next-progress-line-underlay {
    border-radius: 20px;
    border-radius: var(--progress-line-radius-m, 20px);
    height: 10px;
    height: calc(var(--progress-line-height-size-m, 8px) + var(--progress-line-underlay-border-width, 1px)*2); }
  .next-progress-line-show-border.next-medium .next-progress-line-overlay {
    height: 8px;
    height: var(--progress-line-height-size-m, 8px);
    border-radius: 20px;
    border-radius: var(--progress-line-radius-m, 20px);
    top: 50%;
    margin-top: -4px;
    margin-top: calc(0px - var(--progress-line-height-size-m, 8px)/2); }
  .next-progress-line-show-border.next-medium .next-progress-line-text {
    font-size: 12px;
    font-size: var(--progress-line-font-m, 12px);
    line-height: 10px;
    line-height: calc(var(--progress-line-height-size-m, 8px) + var(--progress-line-underlay-border-width, 1px)*2); }
  .next-progress-line-show-border.next-large .next-progress-line-underlay {
    border-radius: 20px;
    border-radius: var(--progress-line-radius-l, 20px);
    height: 14px;
    height: calc(var(--progress-line-height-size-l, 12px) + var(--progress-line-underlay-border-width, 1px)*2); }
  .next-progress-line-show-border.next-large .next-progress-line-overlay {
    height: 12px;
    height: var(--progress-line-height-size-l, 12px);
    border-radius: 20px;
    border-radius: var(--progress-line-radius-l, 20px);
    top: 50%;
    margin-top: -6px;
    margin-top: calc(0px - var(--progress-line-height-size-l, 12px)/2); }
  .next-progress-line-show-border.next-large .next-progress-line-text {
    font-size: 12px;
    font-size: var(--progress-line-font-l, 12px);
    line-height: 14px;
    line-height: calc(var(--progress-line-height-size-l, 12px) + var(--progress-line-underlay-border-width, 1px)*2); }

.next-progress-circle {
  box-sizing: border-box; }
  .next-progress-circle *,
  .next-progress-circle *:before,
  .next-progress-circle *:after {
    box-sizing: border-box; }
  .next-progress-circle {
    position: relative;
    display: inline-block; }
    .next-progress-circle-underlay {
      stroke-width: 8px;
      stroke-width: var(--progress-circle-underlay-width, 8px);
      stroke: #EBECF0;
      stroke: var(--progress-circle-underlay-color, #EBECF0); }
    .next-progress-circle-overlay {
      transition: all 300ms ease;
      transition: all var(--motion-duration-standard, 300ms) var(--motion-ease, ease);
      stroke-linecap: round;
      stroke-linecap: var(--progress-circle-corner, round);
      stroke-width: 8px;
      stroke-width: var(--progress-circle-overlay-width, 8px); }
      .next-progress-circle-overlay-normal {
        stroke: #5584FF;
        stroke: var(--progress-circle-normal-color, #5584FF); }
      .next-progress-circle-overlay-success {
        stroke: #46BC15;
        stroke: var(--progress-circle-success-color, #46BC15); }
      .next-progress-circle-overlay-error {
        stroke: #FF3000;
        stroke: var(--progress-circle-error-color, #FF3000); }
      .next-progress-circle-overlay-started {
        stroke: #FF3000;
        stroke: var(--progress-circle-started-color, #FF3000); }
      .next-progress-circle-overlay-middle {
        stroke: #FF9300;
        stroke: var(--progress-circle-middle-color, #FF9300); }
      .next-progress-circle-overlay-finishing {
        stroke: #46BC15;
        stroke: var(--progress-circle-finishing-color, #46BC15); }
  .next-progress-circle.next-small {
    width: 100px;
    width: var(--progress-circle-size-s, 100px);
    height: 100px;
    height: var(--progress-circle-size-s, 100px);
    font-size: 20px;
    font-size: var(--progress-circle-font-s, 20px); }
  .next-progress-circle.next-medium {
    width: 116px;
    width: var(--progress-circle-size-m, 116px);
    height: 116px;
    height: var(--progress-circle-size-m, 116px);
    font-size: 24px;
    font-size: var(--progress-circle-font-m, 24px); }
  .next-progress-circle.next-large {
    width: 132px;
    width: var(--progress-circle-size-l, 132px);
    height: 132px;
    height: var(--progress-circle-size-l, 132px);
    font-size: 36px;
    font-size: var(--progress-circle-font-l, 36px); }
  .next-progress-circle-text {
    display: block;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    text-align: center;
    line-height: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: transform 300ms ease;
    transition: transform var(--motion-duration-standard, 300ms) var(--motion-ease, ease);
    color: #333333;
    color: var(--progress-circle-text-color, #333333); }