@sdata/web-vue 1.5.0 → 1.7.0

package/es/steps/style/dot.less

@@ -1,202 +0,0 @@
-@import url('./token.less');
-
-@steps-dot-item-icon-margin-left: (@steps-label-vertical-content-width / 2) -
-  (@steps-dot-size-item-icon / 2);
-@steps-dot-vertical-item-dot-margin-top-active: @steps-dot-vertical-item-dot-margin-top -
-  (@steps-dot-size-item-icon-active - @steps-dot-size-item-icon);
-// Dot
-.@{steps-prefix-cls} {
-  &-mode-dot &-item {
-    position: relative;
-    flex: 1;
-    margin-right: @steps-dot-size-item-icon + @steps-dot-size-item-icon-gap * 2;
-    overflow: visible;
-    white-space: nowrap;
-    text-align: left;
-
-    &:last-child {
-      flex: none;
-      margin-right: 0;
-    }
-  }
-
-  &-mode-dot &-item-active &-item-title {
-    font-weight: @steps-dot-font-weight-item-title_active;
-  }
-
-  &-mode-dot &-item-node {
-    display: inline-block;
-    box-sizing: border-box;
-    width: @steps-dot-size-item-icon;
-    height: @steps-dot-size-item-icon;
-    vertical-align: top;
-    border-radius: @steps-dot-border-radius-item-icon;
-  }
-
-  &-mode-dot &-item-active &-item-node {
-    width: @steps-dot-size-item-icon-active;
-    height: @steps-dot-size-item-icon-active;
-  }
-
-  &-mode-dot &-item-wait &-item-node {
-    background-color: @steps-dot-color-item-bg_wait;
-    border-color: @steps-dot-color-item-border_wait;
-  }
-
-  &-mode-dot &-item-process &-item-node {
-    background-color: @steps-dot-color-item-bg_process;
-    border-color: @steps-dot-color-item-border_process;
-  }
-
-  &-mode-dot &-item-finish &-item-node {
-    background-color: @steps-dot-color-item-bg_finish;
-    border-color: @steps-dot-color-item-border_finish;
-  }
-
-  &-mode-dot &-item-error &-item-node {
-    background-color: @steps-dot-color-item-bg_error;
-    border-color: @steps-dot-color-item-border_error;
-  }
-
-  &-mode-dot&-horizontal &-item-node {
-    margin-left: @steps-dot-item-icon-margin-left;
-  }
-
-  &-mode-dot&-horizontal &-item-active &-item-node {
-    margin-top: -((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
-    margin-left: @steps-dot-item-icon-margin-left -
-      ((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
-  }
-
-  &-mode-dot &-item-content {
-    display: inline-block;
-  }
-
-  &-mode-dot &-item-title {
-    position: relative;
-    display: inline-block;
-    margin-top: @steps-dot-horizontal-item-title-margin-top;
-    font-size: @steps-size-default-font-size-title;
-  }
-
-  &-mode-dot &-item-wait &-item-title {
-    color: @steps-dot-color-item-title_wait;
-  }
-
-  &-mode-dot &-item-process &-item-title {
-    color: @steps-dot-color-item-title_process;
-  }
-
-  &-mode-dot &-item-finish &-item-title {
-    color: @steps-dot-color-item-title_finish;
-  }
-
-  &-mode-dot &-item-error &-item-title {
-    color: @steps-dot-color-item-title_error;
-  }
-
-  &-mode-dot &-item-description {
-    margin-top: @steps-dot-horizontal-item-description-margin-top;
-    font-size: @steps-size-default-font-size-description;
-    white-space: normal;
-  }
-
-  &-mode-dot &-item-wait &-item-description {
-    color: @steps-dot-color-item-description_wait;
-  }
-
-  &-mode-dot &-item-process &-item-description {
-    color: @steps-dot-color-item-description_process;
-  }
-
-  &-mode-dot &-item-finish &-item-description {
-    color: @steps-dot-color-item-description_finish;
-  }
-
-  &-mode-dot &-item-error &-item-description {
-    color: @steps-dot-color-item-description_error;
-  }
-
-  &-mode-dot &-item:not(:last-child) &-item-tail {
-    position: absolute;
-    top: ((@steps-dot-size-item-icon - @steps-dot-size-item-tail) / 2);
-    left: @steps-dot-item-icon-margin-left + @steps-dot-size-item-icon +
-      @steps-dot-size-item-icon-gap;
-    box-sizing: border-box;
-    width: 100%;
-    height: @steps-dot-size-item-tail;
-    background-color: @steps-dot-color-item-tail_wait;
-  }
-
-  &-mode-dot &-item:not(:last-child)&-item-process &-item-tail {
-    background-color: @steps-dot-color-item-tail_wait;
-  }
-
-  &-mode-dot &-item:not(:last-child)&-item-finish &-item-tail {
-    background-color: @steps-dot-color-item-tail_process;
-  }
-
-  &-mode-dot &-item:not(:last-child)&-item-next-error &-item-tail {
-    background-color: @steps-dot-color-item-tail_error;
-  }
-
-  // Dot vertical
-  &-mode-dot&-vertical &-item-node {
-    margin-right: @steps-dot-vertical-item-icon-margin-right;
-  }
-
-  &-mode-dot&-vertical &-item-content {
-    overflow: hidden;
-  }
-
-  &-mode-dot&-vertical &-item-title {
-    margin-top: @steps-dot-vertical-item-dot-margin-top + (@steps-dot-size-item-icon / 2) -
-      (@steps-size-default / 2);
-  }
-
-  &-mode-dot&-vertical &-item-description {
-    margin-top: @steps-dot-vertical-item-description-margin-top;
-  }
-
-  &-mode-dot&-vertical &-item:not(:last-child) &-item-tail {
-    position: absolute;
-    bottom: 0;
-    left: (@steps-dot-size-item-icon / 2);
-    box-sizing: border-box;
-    width: 1px;
-    height: 100%;
-    padding-top: (@steps-dot-size-item-icon + 4px + @steps-dot-size-item-icon-gap);
-    padding-bottom: 2px;
-    background-color: transparent;
-    transform: translateX(-50%);
-
-    &::after {
-      display: block;
-      width: 100%;
-      height: 100%;
-      background-color: @steps-dot-color-item-tail_wait;
-      content: '';
-    }
-  }
-
-  &-mode-dot&-vertical &-item:not(:last-child)&-item-process &-item-tail::after {
-    background-color: @steps-dot-color-item-tail_wait;
-  }
-
-  &-mode-dot&-vertical &-item:not(:last-child)&-item-finish &-item-tail::after {
-    background-color: @steps-dot-color-item-tail_process;
-  }
-
-  &-mode-dot&-vertical &-item:not(:last-child)&-item-next-error &-item-tail::after {
-    background-color: @steps-dot-color-item-tail_error;
-  }
-
-  &-mode-dot&-vertical &-item &-item-node {
-    margin-top: @steps-dot-vertical-item-dot-margin-top;
-  }
-
-  &-mode-dot&-vertical &-item-active &-item-node {
-    margin-top: @steps-dot-vertical-item-dot-margin-top-active;
-    margin-left: -((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
-  }
-}

package/es/steps/style/index.less

@@ -1,74 +0,0 @@
-@import url('./token.less');
-@import url('./circle.less');
-@import url('./dot.less');
-@import url('./arrow.less');
-@import url('./navigation.less');
-
-@steps-prefix-cls: ~'@{prefix}-steps';
-
-.@{steps-prefix-cls} {
-  display: flex;
-
-  &-changeable {
-    .@{steps-prefix-cls}-item-title,
-    .@{steps-prefix-cls}-item-description {
-      transition: all @transition-duration-1 @transition-timing-function-linear;
-    }
-  }
-
-  &-changeable &-item:not(&-item-active, &-item-disabled) {
-    cursor: pointer;
-
-    &:hover {
-      .@{steps-prefix-cls}-item-content {
-        .@{steps-prefix-cls}-item-title,
-        .@{steps-prefix-cls}-item-description {
-          color: @color-primary-6;
-        }
-      }
-    }
-  }
-}
-
-// Line Less
-.@{steps-prefix-cls} {
-  &-line-less &-item-title::after {
-    display: none !important;
-  }
-}
-
-// Direction
-.@{steps-prefix-cls} {
-  &-vertical {
-    flex-direction: column;
-  }
-
-  &-vertical &-item {
-    &:not(:last-child) {
-      min-height: 90px;
-    }
-
-    &-title::after {
-      display: none !important;
-    }
-
-    &-description {
-      max-width: none;
-    }
-  }
-}
-
-// Label vertical
-.@{steps-prefix-cls} {
-  &-label-vertical &-item {
-    &-content {
-      display: block;
-      width: @steps-label-vertical-content-width;
-      text-align: center;
-    }
-
-    &-description {
-      max-width: none;
-    }
-  }
-}

package/es/steps/style/navigation.less

@@ -1,56 +0,0 @@
-@import url('./token.less');
-
-// Navigation
-.@{steps-prefix-cls} {
-  &-mode-navigation&-label-horizontal &-item:not(:last-child) &-item-title::after {
-    display: none;
-  }
-
-  &-mode-navigation &-item {
-    margin-right: @steps-navigation-margin-right;
-    padding-right: @steps-navigation-spacing-arrow-right;
-    padding-left: @steps-navigation-padding-left;
-
-    &:last-child {
-      flex: 1;
-    }
-
-    &-content {
-      margin-bottom: 20px;
-    }
-
-    &-description {
-      padding-right: 20px;
-    }
-
-    &-active::after {
-      position: absolute;
-      right: @steps-navigation-spacing-ink-right;
-      bottom: 0;
-      left: @steps-navigation-spacing-ink-left;
-      display: block;
-      height: 2px;
-      background-color: @color-primary-6;
-      content: '';
-    }
-
-    &-active:last-child::after {
-      width: 100%;
-    }
-  }
-
-  &-mode-navigation &-item:not(:last-child) &-item-content::after {
-    position: absolute;
-    top: @steps-navigation-size-arrow-top;
-    right: 30px;
-    display: inline-block;
-    width: @steps-navigation-size-arrow;
-    height: @steps-navigation-size-arrow;
-    background-color: var(~'@{sd-cssvars-prefix}-color-bg-2');
-    border: @steps-navigation-size-arrow-line-width solid @steps-navigation-color-arrow;
-    border-bottom: none;
-    border-left: none;
-    transform: rotate(45deg);
-    content: '';
-  }
-}

package/es/steps/style/token.less

@@ -1,143 +0,0 @@
-@import url('../../style/theme/index.less');
-
-// Two size: Default and small
-@steps-size-default: @size-7;
-@steps-size-small: @size-6;
-@steps-size-default-arrow: @size-18;
-@steps-size-small-arrow: @size-10;
-
-@steps-size-default-font-size-icon: @size-4;
-@steps-size-default-font-size-title: @font-size-title-1;
-@steps-size-default-font-size-description: @font-size-body-1;
-@steps-size-small-font-size-icon: 14px;
-@steps-size-small-font-size-title: @font-size-body-3;
-@steps-size-small-font-size-description: @font-size-body-1;
-
-@steps-label-vertical-content-width: 140px;
-@steps-direction-horizontal-description-width: 140px;
-
-// Circle
-@steps-circle-size-item-tail: @border-1;
-@steps-circle-size-item-icon-gap: 12px;
-
-@steps-circle-font-weight-item-title_active: @font-weight-500;
-
-@steps-circle-border-radius-item-icon: @radius-circle;
-
-@steps-circle-horizontal-item-description-margin-top: @spacing-1;
-@steps-circle-vertical-item-description-margin-top: @spacing-1;
-
-@steps-circle-color-item-bg_wait: var(~'@{sd-cssvars-prefix}-color-fill-2');
-@steps-circle-color-item-border_wait: @color-transparent;
-@steps-circle-color-item-icon-text_wait: var(~'@{sd-cssvars-prefix}-color-text-2');
-@steps-circle-color-item-tail_wait: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-@steps-circle-color-item-title_wait: var(~'@{sd-cssvars-prefix}-color-text-2');
-@steps-circle-color-item-description_wait: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@steps-circle-color-item-bg_process: @color-primary-6;
-@steps-circle-color-item-border_process: @color-transparent;
-@steps-circle-color-item-icon-text_process: var(~'@{sd-cssvars-prefix}-color-white');
-@steps-circle-color-item-tail_process: @color-primary-6;
-@steps-circle-color-item-title_process: var(~'@{sd-cssvars-prefix}-color-text-1');
-@steps-circle-color-item-description_process: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@steps-circle-color-item-bg_finish: var(~'@{sd-cssvars-prefix}-color-primary-light-1');
-@steps-circle-color-item-border_finish: @color-transparent;
-@steps-circle-color-item-icon-text_finish: @color-primary-6;
-@steps-circle-color-item-title_finish: var(~'@{sd-cssvars-prefix}-color-text-1');
-@steps-circle-color-item-description_finish: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@steps-circle-color-item-bg_error: @color-danger-6;
-@steps-circle-color-item-border_error: @color-transparent;
-@steps-circle-color-item-icon-text_error: var(~'@{sd-cssvars-prefix}-color-white');
-@steps-circle-color-item-tail_error: @color-danger-6;
-@steps-circle-color-item-title_error: var(~'@{sd-cssvars-prefix}-color-text-1');
-@steps-circle-color-item-description_error: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-// Dot
-@steps-dot-horizontal-item-title-margin-top: @spacing-2;
-@steps-dot-horizontal-item-description-margin-top: @spacing-2;
-@steps-dot-vertical-item-title-margin-top: -2px;
-@steps-dot-vertical-item-description-margin-top: @spacing-2;
-
-@steps-dot-size-item-icon: @size-2;
-@steps-dot-size-item-icon-active: 10px;
-@steps-dot-size-item-icon-gap: @spacing-2;
-@steps-dot-size-item-tail: @border-1;
-
-@steps-dot-vertical-item-icon-margin-right: @spacing-7;
-
-@steps-dot-font-weight-item-title_active: @font-weight-500;
-
-@steps-dot-border-radius-item-icon: @radius-circle;
-
-@steps-dot-color-item-bg_wait: var(~'@{sd-cssvars-prefix}-color-fill-4');
-@steps-dot-color-item-border_wait: var(~'@{sd-cssvars-prefix}-color-fill-4');
-@steps-dot-color-item-tail_wait: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-@steps-dot-color-item-title_wait: var(~'@{sd-cssvars-prefix}-color-text-2');
-@steps-dot-color-item-description_wait: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@steps-dot-color-item-bg_process: @color-primary-6;
-@steps-dot-color-item-border_process: @color-primary-6;
-@steps-dot-color-item-tail_process: @color-primary-6;
-@steps-dot-color-item-title_process: var(~'@{sd-cssvars-prefix}-color-text-1');
-@steps-dot-color-item-description_process: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@steps-dot-color-item-bg_finish: @color-primary-6;
-@steps-dot-color-item-border_finish: @color-primary-6;
-@steps-dot-color-item-title_finish: var(~'@{sd-cssvars-prefix}-color-text-1');
-@steps-dot-color-item-description_finish: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@steps-dot-color-item-bg_error: @color-danger-6;
-@steps-dot-color-item-border_error: @color-danger-6;
-@steps-dot-color-item-tail_error: @color-danger-6;
-@steps-dot-color-item-title_error: var(~'@{sd-cssvars-prefix}-color-text-1');
-@steps-dot-color-item-description_error: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-// Arrow
-@steps-arrow-size-item-gap: @spacing-2;
-
-@steps-arrow-size-default-title-padding-left: @spacing-7;
-@steps-arrow-size-small-title-padding-left: @spacing-8;
-
-@steps-arrow-item-description-margin-top: 0;
-
-@steps-arrow-font-weight-item-title_active: @font-weight-500;
-
-@steps-arrow-color-item-bg_wait: var(~'@{sd-cssvars-prefix}-color-fill-1');
-@steps-arrow-color-item-title_wait: var(~'@{sd-cssvars-prefix}-color-text-2');
-@steps-arrow-color-item-description_wait: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@steps-arrow-color-item-bg_process: @color-primary-6;
-@steps-arrow-color-item-title_process: var(~'@{sd-cssvars-prefix}-color-white');
-@steps-arrow-color-item-description_process: var(~'@{sd-cssvars-prefix}-color-white');
-
-@steps-arrow-color-item-bg_finish: var(~'@{sd-cssvars-prefix}-color-primary-light-1');
-@steps-arrow-color-item-title_finish: var(~'@{sd-cssvars-prefix}-color-text-1');
-@steps-arrow-color-item-description_finish: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@steps-arrow-color-item-bg_error: @color-danger-6;
-@steps-arrow-color-item-title_error: var(~'@{sd-cssvars-prefix}-color-white');
-@steps-arrow-color-item-description_error: var(~'@{sd-cssvars-prefix}-color-white');
-
-// Navigation
-@steps-navigation-color-arrow: var(~'@{sd-cssvars-prefix}-color-text-4');
-@steps-navigation-size-arrow: 6px;
-@steps-navigation-size-arrow-line-width: 2px;
-@steps-navigation-size-arrow-top: @spacing-5;
-
-// Circle
-
-@steps-circle-vertical-spacing-tail-top: @spacing-3;
-@steps-circle-vertical-spacing-tail-bottom: @spacing-3;
-
-// Dot
-@steps-dot-vertical-item-dot-margin-top: @spacing-4;
-@steps-dot-vertical-spacing-tail-top: @spacing-2;
-@steps-dot-vertical-spacing-tail-bottom: @spacing-2;
-
-@steps-navigation-padding-left: @spacing-8;
-@steps-navigation-margin-right: @spacing-10;
-@steps-navigation-spacing-arrow-right: @spacing-5;
-@steps-navigation-spacing-ink-left: @spacing-none;
-@steps-navigation-spacing-ink-right: 30px;