@sdata/web-vue 1.6.0 → 1.7.0

package/es/progress/style/index.css

@@ -20,8 +20,7 @@
   font-size: 12px;
   line-height: 1;
 }
-.sd-progress-type-line,
-.sd-progress-type-steps {
+.sd-progress-type-line, .sd-progress-type-steps {
   display: inline-block;
   width: 100%;
   max-width: 100%;
@@ -29,16 +28,14 @@
 .sd-progress-type-line.sd-progress-size-mini {
   width: auto;
 }
-.sd-progress-line-wrapper,
-.sd-progress-steps-wrapper {
+.sd-progress-line-wrapper, .sd-progress-steps-wrapper {
   display: flex;
   align-items: center;
   width: 100%;
   max-width: 100%;
   height: 100%;
 }
-.sd-progress-line-text,
-.sd-progress-steps-text {
+.sd-progress-line-text, .sd-progress-steps-text {
   flex-grow: 1;
   flex-shrink: 0;
   min-width: 32px;
@@ -48,8 +45,7 @@
   white-space: nowrap;
   text-align: right;
 }
-.sd-progress-line-text .sd-icon,
-.sd-progress-steps-text .sd-icon {
+.sd-progress-line-text .sd-icon, .sd-progress-steps-text .sd-icon {
   margin-left: 4px;
   font-size: 12px;
 }
@@ -89,7 +85,7 @@
   background-size: 400% 100%;
   border-radius: inherit;
   animation: sd-progress-loading 1.5s cubic-bezier(0.34, 0.69, 0.1, 1) infinite;
-  content: '';
+  content: "";
 }
 .sd-progress-line-text .sd-icon {
   color: var(--color-text-2);
@@ -181,6 +177,7 @@
 .sd-progress-size-large .sd-progress-line-text .sd-icon {
   font-size: 14px;
 }
+
 .sd-progress-type-circle {
   display: inline-block;
 }
@@ -270,6 +267,7 @@
 .sd-progress-status-danger .sd-icon {
   color: rgb(var(--danger-6));
 }
+
 @keyframes sd-progress-loading {
   0% {
     background-position: 100% 50%;
@@ -277,4 +275,4 @@
   100% {
     background-position: 0 50%;
   }
-}
+}

package/es/progress/style/index.d.ts

@@ -1,3 +1,3 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../tooltip/style';
-import './index.less';
+import './index.scss';

package/es/progress/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/progress/style/index.scss

@@ -0,0 +1,380 @@
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+@use '@components/progress/style/token.scss' as *;
+
+$progress-prefix-cls: string.unquote('#{$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.scss

@@ -0,0 +1,119 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$progress-line-color-line-bg: var(string.unquote('#{global.$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(
+  string.unquote('#{global.$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(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$progress-line-color-icon_normal: var(string.unquote('#{global.$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(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+$progress-circle-color-mask-stroke: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);
+
+$progress-circle-size-mini-color-mask-stroke: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+
+$progress-circle-size-mini-color-mask-stroke_success: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-success-light-3')
+);
+
+$progress-circle-size-mini-color-mask-stroke_error: var(
+  string.unquote('#{global.$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(string.unquote('#{global.$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(
+  string.unquote('#{global.$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;

package/es/radio/style/index.css

@@ -15,8 +15,8 @@
 /******** link *******/
 /******** radius *******/
 /********* icon hover *********/
-.sd-radio > input[type='radio'],
-.sd-radio-button > input[type='radio'] {
+.sd-radio > input[type=radio],
+.sd-radio-button > input[type=radio] {
   position: absolute;
   top: 0;
   left: 0;
@@ -24,14 +24,16 @@
   height: 0;
   opacity: 0;
 }
-.sd-radio > input[type='radio']:focus + .sd-radio-icon-hover::before,
-.sd-radio-button > input[type='radio']:focus + .sd-radio-icon-hover::before {
-  background-color: var(--color-fill-2);
+.sd-radio > input[type=radio]:focus + .sd-radio-icon-hover::before,
+.sd-radio-button > input[type=radio]:focus + .sd-radio-icon-hover::before {
+  background-color: var(--color-neutral-2);
 }
+
 .sd-icon-hover.sd-radio-icon-hover::before {
   width: 24px;
   height: 24px;
 }
+
 .sd-radio {
   position: relative;
   display: inline-flex;
@@ -67,7 +69,7 @@
   border-radius: var(--border-radius-circle);
   transform: scale(1);
   transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
-  content: '';
+  content: "";
 }
 .sd-radio:hover .sd-radio-icon {
   border-color: var(--color-neutral-3);
@@ -101,8 +103,7 @@
 .sd-radio-disabled:hover .sd-radio-icon {
   border-color: var(--color-neutral-3);
 }
-.sd-radio-checked.sd-radio-disabled .sd-radio-icon,
-.sd-radio-checked.sd-radio-disabled:hover .sd-radio-icon {
+.sd-radio-checked.sd-radio-disabled .sd-radio-icon, .sd-radio-checked.sd-radio-disabled:hover .sd-radio-icon {
   background-color: var(--color-primary-light-3);
   border-color: transparent;
 }
@@ -113,8 +114,9 @@
   color: var(--color-text-4);
 }
 .sd-radio:hover .sd-radio-icon-hover::before {
-  background-color: var(--color-fill-2);
+  background-color: var(--color-neutral-2);
 }
+
 .sd-radio-group {
   display: inline-block;
   box-sizing: border-box;
@@ -129,6 +131,7 @@
   background-color: var(--color-fill-2);
   border-radius: var(--border-radius-small);
 }
+
 .sd-radio-button {
   position: relative;
   display: inline-block;
@@ -156,12 +159,9 @@
   background-color: var(--color-neutral-3);
   transform: translateY(-50%);
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
-  content: '';
+  content: "";
 }
-.sd-radio-button:hover::before,
-.sd-radio-button:hover + .sd-radio-button::before,
-.sd-radio-button.sd-radio-checked::before,
-.sd-radio-button.sd-radio-checked + .sd-radio-button::before {
+.sd-radio-button:hover::before, .sd-radio-button:hover + .sd-radio-button::before, .sd-radio-button.sd-radio-checked::before, .sd-radio-button.sd-radio-checked + .sd-radio-button::before {
   opacity: 0;
 }
 .sd-radio-button:hover {
@@ -181,6 +181,7 @@
   color: var(--color-primary-light-3);
   background-color: var(--color-bg-5);
 }
+
 .sd-radio-group-size-small {
   line-height: 28px;
 }
@@ -205,15 +206,17 @@
   font-size: 12px;
   line-height: 18px;
 }
+
 .sd-radio-group-direction-vertical .sd-radio {
   display: flex;
   margin-right: 0;
   line-height: 32px;
 }
-body[sd-theme='dark'] .sd-radio-button.sd-radio-checked,
-body[sd-theme='dark'] .sd-radio-button:not(.sd-radio-disabled):hover {
+
+:where(body, [sd-theme])[sd-theme=dark] .sd-radio-button.sd-radio-checked,
+:where(body, [sd-theme])[sd-theme=dark] .sd-radio-button:not(.sd-radio-disabled):hover {
   background-color: var(--color-fill-3);
 }
-body[sd-theme='dark'] .sd-radio-button::after {
+:where(body, [sd-theme])[sd-theme=dark] .sd-radio-button::after {
   background-color: var(--color-bg-3);
-}
+}

package/es/radio/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.scss';
+import './index.scss';

package/es/radio/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";