@sdata/web-vue 1.5.0 → 1.7.0

package/es/progress/style/index.less

@@ -1,379 +0,0 @@
-@import url('../../style/theme/index.less');
-@import url('./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%,
-          rgb(255 255 255 / 50%) 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-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-large {
-    .@{progress-prefix-cls}-line-text {
-      margin-left: @progress-line-size-large-margin-text-left;
-      font-size: @progress-line-size-large-font-size;
-    }
-
-    .@{progress-prefix-cls}-line-text .@{prefix}-icon {
-      font-size: @progress-line-size-large-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-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}-circle-text {
-      font-size: @progress-circle-size-small-font-size;
-
-      .@{prefix}-icon {
-        font-size: @progress-circle-size-small-icon-size;
-      }
-    }
-  }
-
-  &-size-large {
-    .@{progress-prefix-cls}-circle-text {
-      font-size: @progress-circle-size-large-font-size;
-
-      .@{prefix}-icon {
-        font-size: @progress-circle-size-large-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%;
-  }
-}

package/es/progress/style/token.less

@@ -1,105 +0,0 @@
-@progress-line-color-line-bg: var(~'@{sd-cssvars-prefix}-color-fill-3');
-
-@progress-line-color-inner-bg: @color-primary-6;
-
-@progress-line-color-inner-bg_success: @color-success-6;
-
-@progress-line-color-inner-bg_error: @color-danger-6;
-
-@progress-line-color-buffer-bg: var(~'@{sd-cssvars-prefix}-color-primary-light-3');
-
-@progress-line-size-large-font-size: 16px;
-
-@progress-line-size-small-font-size: @font-size-body-1;
-
-@progress-line-size-default-font-size: @font-size-body-1;
-
-@progress-line-size-large-margin-text-left: @spacing-7;
-
-@progress-line-size-small-margin-text-left: @spacing-7;
-
-@progress-line-color-icon_success: @color-success-6;
-
-@progress-line-color-icon_error: @color-danger-6;
-
-@progress-line-margin-text-left: @spacing-7;
-
-@progress-line-margin-icon-left: @spacing-2;
-
-@progress-line-color-text: var(~'@{sd-cssvars-prefix}-color-text-2');
-
-@progress-line-color-icon_normal: var(~'@{sd-cssvars-prefix}-color-text-2');
-
-@progress-line-size-text-width: @size-8;
-
-@progress-line-size-default-icon-size: 12px;
-
-@progress-line-size-small-icon-size: 12px;
-
-@progress-line-size-large-icon-size: 14px;
-
-@progress-circle-size-small-font-size: @font-size-body-2;
-
-@progress-circle-size-default-font-size: @font-size-body-3;
-
-@progress-circle-size-large-font-size: 16px;
-
-@progress-circle-size-small-icon-size: 14px;
-
-@progress-circle-size-default-icon-size: @size-4;
-
-@progress-circle-size-large-icon-size: @size-4;
-
-@progress-circle-color-text: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@progress-circle-color-mask-stroke: var(~'@{sd-cssvars-prefix}-color-fill-3');
-
-@progress-circle-size-mini-color-mask-stroke: var(~'@{sd-cssvars-prefix}-color-primary-light-3');
-
-@progress-circle-size-mini-color-mask-stroke_success: var(
-  ~'@{sd-cssvars-prefix}-color-success-light-3'
-);
-
-@progress-circle-size-mini-color-mask-stroke_error: var(
-  ~'@{sd-cssvars-prefix}-color-danger-light-3'
-);
-
-@progress-circle-color-path-stroke: @color-primary-6;
-
-@progress-circle-color-path-stroke_success: @color-success-6;
-
-@progress-circle-color-path-stroke_error: @color-danger-6;
-
-@progress-circle-color-icon_success: @color-success-6;
-
-@progress-circle-color-icon_error: @color-danger-6;
-
-@progress-steps-size-small-steps-item-width: 2px;
-
-@progress-steps-margin-steps-item-right: 3px;
-
-@progress-steps-margin-steps-item-right_small: 3px;
-
-@progress-steps-color-item-bg: var(~'@{sd-cssvars-prefix}-color-fill-3');
-
-@progress-steps-color-item-bg_normal: @color-primary-6;
-
-@progress-steps-color-item-bg_success: @color-success-6;
-
-@progress-steps-color-item-bg_error: @color-danger-6;
-
-@progress-steps-margin-text-left: @spacing-4;
-
-@progress-line-color-inner-bg_warning: @color-warning-6;
-
-@progress-line-color-icon_warning: @color-warning-6;
-
-@progress-circle-size-mini-color-mask-stroke_warning: var(
-  ~'@{sd-cssvars-prefix}-color-warning-light-3'
-);
-
-@progress-circle-color-path-stroke_warning: @color-warning-6;
-
-@progress-circle-color-icon_warning: @color-warning-6;
-
-@progress-steps-color-item-bg_warning: @color-warning-6;