tntd 2.8.0-beta.2 → 3.0.0-beta

package/es/steps/style/index.less

@@ -1,11 +1,246 @@
-@import './small.less';
-@import './nav.less';
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
 
 @steps-prefix-cls: ~'@{ant-prefix}-steps';
-
+@process-icon-color: @primary-color;
+@process-title-color: @heading-color;
+@process-description-color: @text-color;
+@process-tail-color: @border-color-split;
+@process-icon-text-color: @text-color-inverse;
+@wait-icon-color: @disabled-color;
+@wait-title-color: @text-color-secondary;
+@wait-description-color: @wait-title-color;
+@wait-tail-color: @process-tail-color;
+@finish-icon-color: @process-icon-color;
+@finish-title-color: @text-color;
+@finish-description-color: @text-color-secondary;
+@finish-tail-color: @primary-color;
+@error-icon-color: @error-color;
+@error-title-color: @error-color;
+@error-description-color: @error-color;
+@error-tail-color: @wait-tail-color;
+@steps-background: @component-background;
 @steps-nav-arrow-color: fade(@black, 25%);
-@steps-nav-finish-color: #5E9BFF;
 @steps-nav-active-color: @primary-color;
-@wait-icon-color: @disabled-color;
 
-@steps-nav-content-max-width: auto;
+@steps-icon-size: 32px;
+@steps-small-icon-size: 24px;
+@steps-dot-size: 8px;
+@steps-current-dot-size: 10px;
+@steps-desciption-max-width: 140px;
+@steps-nav-content-max-width: auto;
+
+.@{steps-prefix-cls} {
+  .reset-component;
+
+  display: flex;
+  width: 100%;
+  font-size: 0;
+}
+
+.@{steps-prefix-cls}-item {
+  position: relative;
+  display: inline-block;
+  flex: 1;
+  overflow: hidden;
+  vertical-align: top;
+
+  &-container {
+    outline: none;
+  }
+
+  &:last-child {
+    flex: none;
+  }
+
+  &:last-child > &-container > &-tail,
+  &:last-child > &-container > &-content > &-title::after {
+    display: none;
+  }
+
+  &-icon,
+  &-content {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  &-icon {
+    width: @steps-icon-size;
+    height: @steps-icon-size;
+    margin-right: 8px;
+    font-size: @font-size-lg;
+    font-family: @font-family;
+    line-height: @steps-icon-size;
+    text-align: center;
+    border: @border-width-base @border-style-base @wait-icon-color;
+    border-radius: @steps-icon-size;
+    transition: background-color 0.3s, border-color 0.3s;
+
+    > .@{steps-prefix-cls}-icon {
+      position: relative;
+      top: -1px;
+      color: @primary-color;
+      line-height: 1;
+    }
+  }
+  &-tail {
+    position: absolute;
+    top: 12px;
+    left: 0;
+    width: 100%;
+    padding: 0 10px;
+    &::after {
+      display: inline-block;
+      width: 100%;
+      height: 1px;
+      background: @border-color-split;
+      border-radius: 1px;
+      transition: background 0.3s;
+      content: '';
+    }
+  }
+  &-title {
+    position: relative;
+    display: inline-block;
+    padding-right: 16px;
+    color: @text-color;
+    font-size: @font-size-lg;
+    line-height: @steps-icon-size;
+    &::after {
+      position: absolute;
+      top: calc(@steps-icon-size / 2);
+      left: 100%;
+      display: block;
+      width: 9999px;
+      height: 1px;
+      background: @wait-tail-color;
+      content: '';
+    }
+  }
+  &-subtitle {
+    display: inline;
+    margin-left: 8px;
+    color: @text-color-secondary;
+    font-weight: normal;
+    font-size: @font-size-base;
+  }
+  &-description {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+  }
+  .step-item-status(wait);
+  .step-item-status(process);
+  &-process &-icon {
+    background: @process-icon-color;
+    > .@{steps-prefix-cls}-icon {
+      color: @process-icon-text-color;
+    }
+  }
+  &-process &-title {
+    font-weight: 500;
+  }
+  .step-item-status(finish);
+  .step-item-status(error);
+
+  &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
+    background: @error-icon-color;
+  }
+}
+
+// ===================== Clickable =====================
+.@{steps-prefix-cls} .@{steps-prefix-cls}-item {
+  &:not(.@{steps-prefix-cls}-item-active) {
+    & > .@{steps-prefix-cls}-item-container[role='button'] {
+      cursor: pointer;
+
+      .@{steps-prefix-cls}-item {
+        &-title,
+        &-description,
+        &-icon .@{steps-prefix-cls}-icon {
+          transition: color 0.3s;
+        }
+      }
+
+      &:hover {
+        .@{steps-prefix-cls}-item {
+          &-title,
+          &-subtitle,
+          &-description {
+            color: @primary-color;
+          }
+        }
+      }
+    }
+
+    &:not(.@{steps-prefix-cls}-item-process) {
+      & > .@{steps-prefix-cls}-item-container[role='button']:hover {
+        .@{steps-prefix-cls}-item {
+          &-icon {
+            border-color: @primary-color;
+
+            .@{steps-prefix-cls}-icon {
+              color: @primary-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
+  .@{steps-prefix-cls}-item {
+    margin-right: 16px;
+    white-space: nowrap;
+    &:last-child {
+      margin-right: 0;
+    }
+    &:last-child .@{steps-prefix-cls}-item-title {
+      padding-right: 0;
+    }
+    &-tail {
+      display: none;
+    }
+    &-description {
+      max-width: @steps-desciption-max-width;
+      white-space: normal;
+    }
+  }
+}
+
+.step-item-status(@status) {
+  @icon-color: '@{status}-icon-color';
+  @title-color: '@{status}-title-color';
+  @description-color: '@{status}-description-color';
+  @tail-color: '@{status}-tail-color';
+  &-@{status} &-icon {
+    background-color: @steps-background;
+    border-color: @@icon-color;
+    > .@{steps-prefix-cls}-icon {
+      color: @@icon-color;
+      .@{steps-prefix-cls}-icon-dot {
+        background: @@icon-color;
+      }
+    }
+  }
+  &-@{status} > &-container > &-content > &-title {
+    color: @@title-color;
+    &::after {
+      background-color: @@tail-color;
+    }
+  }
+  &-@{status} > &-container > &-content > &-description {
+    color: @@description-color;
+  }
+  &-@{status} > &-container > &-tail::after {
+    background-color: @@tail-color;
+  }
+}
+
+@import 'custom-icon';
+@import 'small';
+@import 'vertical';
+@import 'label-placement';
+@import 'progress-dot';
+@import 'nav';
+@import 'compatibility';

package/es/steps/style/label-placement.less

@@ -0,0 +1,38 @@
+.@{steps-prefix-cls}-label-vertical {
+  .@{steps-prefix-cls}-item {
+    overflow: visible;
+    &-tail {
+      margin-left: 58px;
+      padding: 3.5px 24px;
+    }
+    &-content {
+      display: block;
+      width: calc((@steps-icon-size / 2 + 42px) * 2);
+      margin-top: 8px;
+      text-align: center;
+    }
+    &-icon {
+      display: inline-block;
+      margin-left: 42px;
+    }
+    &-title {
+      padding-right: 0;
+      &::after {
+        display: none;
+      }
+    }
+    &-subtitle {
+      display: block;
+      margin-bottom: 4px;
+      margin-left: 0;
+      line-height: @line-height-base;
+    }
+  }
+  &.@{steps-prefix-cls}-small:not(.@{steps-prefix-cls}-dot) {
+    .@{steps-prefix-cls}-item {
+      &-icon {
+        margin-left: 46px;
+      }
+    }
+  }
+}

package/es/steps/style/nav.less

@@ -1,275 +1,124 @@
-@normal-steps-desc-height: 68px;
-@normal-steps-height: 48px;
-@small-steps-height: 36px;
-@color-white: #fff;
-@container-padding-left: 40px;
+.@{steps-prefix-cls}-navigation {
+  padding-top: 12px;
 
-.@{steps-prefix-cls}-tntd-navigation.@{steps-prefix-cls}-horizontal{
-    overflow: hidden;
-    padding-top: 12px;
-
-    // 小尺寸
-    &.@{steps-prefix-cls}-small {
-      .@{steps-prefix-cls}-item {
-        height: @small-steps-height;
-        min-height: @small-steps-height;
-        &-container {
-          margin-left: 0;
-          padding-bottom:0;
-        }
-
-        &::after {
-            content: '';
-            border-top: @small-steps-height/2 solid transparent;
-            border-bottom: @small-steps-height/2 solid transparent;
-            border-left: @small-steps-height/2 solid @border-color-split;
-            right: -@small-steps-height/2;
-          }
-
-        &::before {
-            content: '';
-            border-top: @small-steps-height/2 solid @border-color-split;
-            border-bottom: @small-steps-height/2 solid @border-color-split;
-            border-left: @small-steps-height/2 solid @color-white;
-        }
+  &.@{steps-prefix-cls}-small {
+    .@{steps-prefix-cls}-item {
+      &-container {
+        margin-left: -12px;
       }
     }
+  }
 
-    // 默认尺寸
-    .@{steps-prefix-cls}-item {
-      overflow: visible;
-      position: relative;
+  .@{steps-prefix-cls}-item {
+    overflow: visible;
+    text-align: center;
+
+    &-container {
+      display: inline-block;
+      height: 100%;
+      margin-left: -16px;
+      padding-bottom: 12px;
       text-align: left;
-      display: flex;
-      min-height: @normal-steps-height;
-      &:not(:last-of-type){
-        margin-right: 2px !important;
+      transition: opacity 0.3s;
+
+      .@{steps-prefix-cls}-item-content {
+        max-width: @steps-nav-content-max-width;
       }
-      background: @border-color-split;
-      width : 0 !important;
-      &-container {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        text-align: left;
-        padding-left: @container-padding-left + 24px;
-        padding-bottom: 0;
-        margin-left: 0;
-        transition: opacity 0.3s;
-        z-index: 11;
 
-        .@{steps-prefix-cls}-item-content {
-          max-width: calc(100% - @container-padding-left);
-        }
+      .@{steps-prefix-cls}-item-title {
+        max-width: 100%;
+        padding-right: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
 
-        .@{steps-prefix-cls}-item-title {
-          max-width: 100%;
-          padding-right: 0;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          line-height: 1.5;
-          font-size: 14px;
-          font-weight: normal;
-          color:@text-color;
-          &::after {
-            display: none;
-          }
-          .@{steps-prefix-cls}-item-subtitle{
-            color:fade(@text-color,80%);
-          }
-        }
-
-        .@{steps-prefix-cls}-item-description{
-            margin-top: 5px;
-            line-height: 14px;
-            font-size: 12px;
-            max-width: 100%;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
+        &::after {
+          display: none;
         }
+      }
     }
 
     &:not(.@{steps-prefix-cls}-item-active) {
-        .@{steps-prefix-cls}-item-container[role='button'] {
-          cursor: pointer;
-          &:hover {
-            opacity: 0.85;
-          }
+      .@{steps-prefix-cls}-item-container[role='button'] {
+        cursor: pointer;
+        &:hover {
+          opacity: 0.85;
         }
+      }
     }
 
     &:last-child {
-        flex: 1;
-        &::after {
-          display: none;
-        }
-    }
-
-    &:first-child {
-        &.@{steps-prefix-cls}-item-container{
-            padding-left: @container-padding-left;
-        }
-        &:before {
-            display: none;
-        }
+      flex: 1;
+      &::after {
+        display: none;
+      }
     }
 
     &::after {
-        content: '';
-        display: block;
-        border:none;
-        border-top: @normal-steps-height/2 solid transparent;
-        border-bottom: @normal-steps-height/2 solid transparent;
-        border-left: @normal-steps-height/2 solid @border-color-split;
-        position: absolute;
-        right: -@normal-steps-height/2;
-        top: 0;
-        z-index: 10;
-        transform: rotate(0deg);
-        margin-top:0;
-        margin-left: 0;
+      position: absolute;
+      top: 50%;
+      left: 100%;
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      margin-top: -14px;
+      margin-left: -2px;
+      border: 1px solid @steps-nav-arrow-color;
+      border-bottom: none;
+      border-left: none;
+      transform: rotate(45deg);
+      content: '';
     }
 
     &::before {
-        content: '';
-        display: block;
-        background: none;;
-        border-top: @normal-steps-height/2 solid @border-color-split;
-        border-bottom: @normal-steps-height/2 solid @border-color-split;
-        border-left: @normal-steps-height/2 solid @color-white;
-        position: absolute;
-        height: 0;
-        width: 0;
-        left: 0px;
-        top: 0;
-        transition: none;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      display: inline-block;
+      width: 0;
+      height: 3px;
+      background-color: @steps-nav-active-color;
+      transition: width 0.3s, left 0.3s;
+      transition-timing-function: ease-out;
+      content: '';
     }
+  }
 
-    &-finish{
-        background-color:  @steps-nav-finish-color !important;
-        border-color: @steps-nav-finish-color !important;
-        &::before{
-            border-top-color:  @steps-nav-finish-color !important;
-            border-bottom-color:  @steps-nav-finish-color !important;
-        }
-        &::after{
-            border-left-color:  @steps-nav-finish-color !important;
-        }
-        .@{steps-prefix-cls}-item-title,
-        .@{steps-prefix-cls}-item-subtitle{
-            color:@color-white !important;
-        }
-        .@{steps-prefix-cls}-item-description{
-            color:fade(@color-white,80%) !important;
-        }
-    }
-
-    &-process{
-        background-color:  @steps-nav-active-color !important;
-        border-color: @steps-nav-active-color !important;
-        &::before{
-            border-top-color:  @steps-nav-active-color !important;
-            border-bottom-color:  @steps-nav-active-color !important;
-        }
-        &::after{
-            border-left-color:  @steps-nav-active-color !important;
-        }
-        .@{steps-prefix-cls}-item-title,
-        .@{steps-prefix-cls}-item-subtitle{
-            color:@color-white !important;
-        }
-        .@{steps-prefix-cls}-item-description{
-            color:fade(@color-white,80%) !important;
-        }
-      }
-    }
-
-    // 存在描述的导航步骤
-    &.@{steps-prefix-cls}-tntd-navigation-contain-desc{
-        .@{steps-prefix-cls}-item {
-            height: @normal-steps-desc-height;
-            &::after {
-                content: '';
-                border-top: @normal-steps-desc-height/2 solid transparent;
-                border-bottom: @normal-steps-desc-height/2 solid transparent;
-                border-left: @normal-steps-desc-height/2 solid @border-color-split;
-                position: absolute;
-                right: -@normal-steps-desc-height/2;
-            }
-            &::before {
-                content: '';
-                border-top: @normal-steps-desc-height/2 solid @border-color-split;
-                border-bottom: @normal-steps-desc-height/2 solid @border-color-split;
-                border-left: @normal-steps-desc-height/2 solid @color-white;
-                position: absolute;
-                height: 0;
-                width: 0;
-                left: 0px;
-                top: 0;
-                transition: none;
-            }
-        }
-    }
-
-    // icon控制
-    .@{steps-prefix-cls}-item-icon{
-        display: none;
-    }
-    .@{steps-prefix-cls}-item.@{steps-prefix-cls}-item-active{
-        .@{steps-prefix-cls}-item-container{
-            border-top:1px solid @steps-nav-active-color !important;
-            border-bottom:1px solid @steps-nav-active-color !important;
-        }
-        &.ant-step-tntd-navigation-desc{
-            .@{steps-prefix-cls}-item-icon{
-                margin-top: -18px;
-            }
-        }
-        .@{steps-prefix-cls}-item-icon{
-            .@{steps-prefix-cls}-icon{
-                display: none;
-            }
-            display: inline-block;
-            width: 6px;
-            height:6px;
-            border-radius: 100%;
-            background: @color-white;
-            border: 1px solid @color-white;
-            margin-right: 6px;
-        }
-    }
+  .@{steps-prefix-cls}-item.@{steps-prefix-cls}-item-active::before {
+    left: 0;
+    width: 100%;
+  }
 }
 
-  @media (max-width: @screen-xs) {
-      > .@{steps-prefix-cls}-item {
-        margin-right: 0 !important;
-        &::before {
-          display: none;
-        }
-        &.@{steps-prefix-cls}-item-active::before {
-          top: 0;
-          right: 0;
-          left: unset;
-          display: block;
-          width: 3px;
-          height: calc(100% - 24px);
-        }
-        &::after {
-          position: relative;
-          top: -2px;
-          left: 50%;
-          display: block;
-          width: 8px;
-          height: 8px;
-          margin-bottom: 8px;
-          text-align: center;
-          transform: rotate(135deg);
-        }
-        > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
-          visibility: hidden;
-        }
+@media (max-width: @screen-xs) {
+  .@{steps-prefix-cls}-navigation {
+    > .@{steps-prefix-cls}-item {
+      margin-right: 0 !important;
+      &::before {
+        display: none;
+      }
+      &.@{steps-prefix-cls}-item-active::before {
+        top: 0;
+        right: 0;
+        left: unset;
+        display: block;
+        width: 3px;
+        height: calc(100% - 24px);
+      }
+      &::after {
+        position: relative;
+        top: -2px;
+        left: 50%;
+        display: block;
+        width: 8px;
+        height: 8px;
+        margin-bottom: 8px;
+        text-align: center;
+        transform: rotate(135deg);
+      }
+      > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+        visibility: hidden;
       }
     }
-
+  }
+}