winbox-ui-next/lib/progress/style/index.less

We Design Vue 2.0: A Vue.js 3 UI Library

@import '../../style/theme/index.less';
@import './token.less';

@progress-prefix-cls: ~'@{prefix}-progress';

.@{progress-prefix-cls} {
  position: relative;
  font-size: @progress-line-size-default-font-size;
  line-height: 1;

  &-type-line,
  &-type-steps {
    display: inline-block;
    width: 100%;
    max-width: 100%;
  }

  &-type-line {
    &.@{progress-prefix-cls}-size-mini {
      width: auto;
    }
  }

  &-line,
  &-steps {
    &-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 100%;
      height: 100%;
    }

    &-text {
      flex-grow: 1;
      flex-shrink: 0;
      min-width: @progress-line-size-text-width;
      margin-left: @progress-line-margin-text-left;
      color: @progress-line-color-text;
      font-size: @progress-line-size-default-font-size;
      white-space: nowrap;
      text-align: right;

      .@{prefix}-icon {
        margin-left: @progress-line-margin-icon-left;
        font-size: @progress-line-size-default-icon-size;
      }
    }
  }

  // type = line
  &-line {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    background-color: @progress-line-color-line-bg;
    border-radius: 100px;

    &-bar {
      position: relative;
      max-width: 100%;
      height: 100%;
      background-color: @progress-line-color-inner-bg;
      border-radius: 100px;
      transition: width 0.6s @transition-timing-function-standard,
        background 0.3s @transition-timing-function-standard;

      &-buffer {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%;
        height: 100%;
        background-color: @progress-line-color-buffer-bg;
        border-radius: 0 100px 100px 0;
        transition: all 0.6s @transition-timing-function-standard;
      }

      &-animate::after {
        position: absolute;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent 25%,
          rgba(255, 255, 255, 0.5) 50%,
          transparent 75%
        );
        background-size: 400% 100%;
        border-radius: inherit;
        animation: ~'@{prefix}-progress-loading' 1.5s @transition-timing-function-standard
          infinite;
        content: '';
      }
    }

    &-text {
      .@{prefix}-icon {
        color: @progress-line-color-icon_normal;
      }
    }
  }

  &-type-steps {
    // size small
    &.@{progress-prefix-cls}-size-small {
      width: auto;
    }

    &.@{progress-prefix-cls}-size-small .@{progress-prefix-cls}-steps-item {
      flex: unset;
      width: @progress-steps-size-small-steps-item-width;
      border-radius: @progress-steps-size-small-steps-item-width;

      &:not(:last-of-type) {
        margin-right: @progress-steps-margin-steps-item-right_small;
      }
    }
  }

  &-steps {
    display: flex;
    width: 100%;

    &-text {
      min-width: unset;
      margin-left: @progress-steps-margin-text-left;

      .@{prefix}-icon {
        color: @progress-line-color-icon_normal;
      }
    }

    &-item {
      position: relative;
      display: inline-block;
      flex: 1;
      height: 100%;
      background-color: @progress-steps-color-item-bg;

      &:not(:last-of-type) {
        margin-right: @progress-steps-margin-steps-item-right;
      }

      &:last-of-type {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
      }

      &:first-of-type {
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
      }

      &-active {
        background-color: @progress-steps-color-item-bg_normal;
      }
    }
  }

  &-status-warning {
    .@{progress-prefix-cls}-line-bar {
      background-color: @progress-line-color-inner-bg_warning;
    }

    .@{progress-prefix-cls}-steps-item-active {
      background-color: @progress-steps-color-item-bg_warning;
    }

    .@{progress-prefix-cls}-line-text .@{prefix}-icon,
    .@{progress-prefix-cls}-steps-text .@{prefix}-icon {
      color: @progress-line-color-icon_warning;
    }
  }

  &-status-success {
    .@{progress-prefix-cls}-line-bar {
      background-color: @progress-line-color-inner-bg_success;
    }

    .@{progress-prefix-cls}-steps-item-active {
      background-color: @progress-steps-color-item-bg_success;
    }

    .@{progress-prefix-cls}-line-text .@{prefix}-icon,
    .@{progress-prefix-cls}-steps-text .@{prefix}-icon {
      color: @progress-line-color-icon_success;
    }
  }

  &-status-danger {
    .@{progress-prefix-cls}-line-bar {
      background-color: @progress-line-color-inner-bg_error;
    }

    .@{progress-prefix-cls}-steps-item-active {
      background-color: @progress-steps-color-item-bg_error;
    }

    .@{progress-prefix-cls}-line-text .@{prefix}-icon,
    .@{progress-prefix-cls}-steps-text .@{prefix}-icon {
      color: @progress-line-color-icon_error;
    }
  }

  // size
  &-size-mini {
    .@{progress-prefix-cls}-circle-bg {
      stroke: @progress-circle-size-mini-color-mask-stroke;
    }

    .@{progress-prefix-cls}-circle-bar {
      stroke: @progress-circle-color-path-stroke;
    }

    &.@{progress-prefix-cls}-status-warning {
      .@{progress-prefix-cls}-circle-bg {
        stroke: @progress-circle-size-mini-color-mask-stroke_warning;
      }
    }

    &.@{progress-prefix-cls}-status-danger {
      .@{progress-prefix-cls}-circle-bg {
        stroke: @progress-circle-size-mini-color-mask-stroke_error;
      }
    }

    &.@{progress-prefix-cls}-status-success {
      .@{progress-prefix-cls}-circle-bg {
        stroke: @progress-circle-size-mini-color-mask-stroke_success;
      }
    }

    .@{progress-prefix-cls}-circle-wrapper .@{prefix}-icon-check {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    .@{progress-prefix-cls}-circle-text {
      position: static;
      top: unset;
      left: unset;
      transform: unset;
    }
  }

  &-size-small {
    .@{progress-prefix-cls}-line-text {
      margin-left: @progress-line-size-small-margin-text-left;
      font-size: @progress-line-size-small-font-size;
    }

    .@{progress-prefix-cls}-line-text .@{prefix}-icon {
      font-size: @progress-line-size-small-icon-size;
    }
  }

  &-size-medium {
    .@{progress-prefix-cls}-line-text {
      margin-left: @progress-line-size-medium-margin-text-left;
      font-size: @progress-line-size-medium-font-size;
    }

    .@{progress-prefix-cls}-line-text .@{prefix}-icon {
      font-size: @progress-line-size-medium-icon-size;
    }
  }
}

// type = circle
.@{progress-prefix-cls} {
  &-type-circle {
    display: inline-block;
  }

  &-circle {
    &-wrapper {
      position: relative;
      display: inline-block;
      line-height: 1;
      text-align: center;
      vertical-align: text-bottom;
    }

    &-svg {
      transform: rotate(-90deg);
    }

    &-text {
      position: absolute;
      top: 50%;
      left: 50%;
      color: @progress-circle-color-text;
      font-size: @progress-circle-size-default-font-size;
      transform: translate(-50%, -50%);

      .@{prefix}-icon {
        color: @progress-line-color-icon_normal;
        font-size: @progress-circle-size-default-icon-size;
      }
    }

    &-bg {
      stroke: @progress-circle-color-mask-stroke;
    }

    &-bar {
      transition: stroke-dashoffset 0.6s @transition-timing-function-linear 0s,
        stroke 0.6s @transition-timing-function-linear;
      stroke: @progress-circle-color-path-stroke;
    }
  }

  &-size-small {
    .@{progress-prefix-cls}-circle-text {
      font-size: @progress-circle-size-small-font-size;

      .@{prefix}-icon {
        font-size: @progress-circle-size-small-icon-size;
      }
    }
  }

  &-size-medium {
    .@{progress-prefix-cls}-circle-text {
      font-size: @progress-circle-size-medium-font-size;

      .@{prefix}-icon {
        font-size: @progress-circle-size-medium-icon-size;
      }
    }
  }

  &-status-warning {
    .@{progress-prefix-cls}-circle-bar {
      stroke: @progress-circle-color-path-stroke_warning;
    }

    .@{prefix}-icon {
      color: @progress-circle-color-icon_warning;
    }
  }

  &-status-success {
    .@{progress-prefix-cls}-circle-bar {
      stroke: @progress-circle-color-path-stroke_success;
    }

    .@{prefix}-icon {
      color: @progress-circle-color-icon_success;
    }
  }

  &-status-danger {
    .@{progress-prefix-cls}-circle-bar {
      stroke: @progress-circle-color-path-stroke_error;
    }

    .@{prefix}-icon {
      color: @progress-circle-color-icon_error;
    }
  }
}

@keyframes ~'@{prefix}-progress-loading' {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}