@nutui/nutui-react 3.0.11 → 3.0.13-beta.0

package/dist/cjs/packages/steps/style/style.css

@@ -5,8 +5,225 @@
 .nut-steps {
   display: flex;
 }
-
+.nut-steps-horizontal {
+  flex-flow: row;
+}
+.nut-steps-horizontal .nut-step-head {
+  background-color: var(--nutui-steps-background-color, #ffffff);
+}
+.nut-steps-horizontal .nut-step-head-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+}
+.nut-steps-horizontal .nut-step-head-icon .nut-image {
+  width: 100%;
+  height: 100%;
+  background-color: var(--nutui-steps-background-color, #ffffff);
+}
+.nut-steps-horizontal .nut-step-head-icon .nut-image img {
+  vertical-align: top;
+}
+.nut-steps-horizontal .nut-step.nut-step-process .nut-step-title {
+  color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-steps-horizontal .nut-step.nut-step-process .nut-step-description {
+  color: var(--nutui-steps-process-description-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-title {
+  color: var(--nutui-steps-wait-title-color, var(--nutui-color-title, #1a1a1a));
+}
+.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-description {
+  color: var(--nutui-steps-wait-description-color, var(--nutui-color-text, #505259));
+}
+.nut-steps-horizontal-single .nut-step {
+  padding-right: var(--nutui-steps-horizontal-item-padding-right, 28px);
+}
+.nut-steps-horizontal-single .nut-step-last {
+  padding-right: 0 !important;
+}
+.nut-steps-horizontal-single .nut-step-line {
+  top: 0;
+  right: 0;
+  height: var(--nutui-steps-base-head-height, 14px);
+  width: var(--nutui-steps-horizontal-item-padding-right, 28px);
+  padding: var(--nutui-steps-horizontal-item-line-padding, 0 8px);
+  box-sizing: border-box;
+}
+.nut-steps-horizontal-single .nut-step-title, .nut-steps-horizontal-single .nut-step-description {
+  padding-left: 4px;
+}
+.nut-steps-horizontal-single .nut-step-special {
+  padding-right: var(--nutui-steps-horizontal-item-special-padding-right, 22px);
+}
+.nut-steps-horizontal-single .nut-step-special .nut-step-line {
+  width: 100%;
+}
+.nut-steps-horizontal-single .nut-step-special .nut-step-title {
+  padding-right: 8px;
+  width: fit-content;
+}
+.nut-steps-horizontal-single.nut-steps-horizontal-count-3 .nut-step-special {
+  padding-right: var(--nutui-steps-horizontal-item-special-3-padding-right, 9px);
+}
+.nut-steps-horizontal-double {
+  width: 100%;
+  justify-content: space-between;
+}
+.nut-steps-horizontal-double .nut-step {
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+.nut-steps-horizontal-double .nut-step-line {
+  top: 0;
+  right: -50%;
+  height: var(--nutui-steps-base-head-height, 14px);
+  width: 100%;
+}
+.nut-steps-horizontal-double .nut-step-line-inner {
+  display: inline-flex;
+  height: var(--nutui-steps-base-line-height, 1px);
+  width: 100%;
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+}
+.nut-steps-horizontal-double .nut-step-head {
+  justify-content: center;
+  margin-bottom: 6px;
+}
+.nut-steps-horizontal-double .nut-step-head-dot-wrap, .nut-steps-horizontal-double .nut-step-head-icon-wrap, .nut-steps-horizontal-double .nut-step-head-text-wrap {
+  background-color: var(--nutui-steps-background-color, #ffffff);
+  padding: var(--nutui-steps-horizontal-item-line-padding, 0 8px);
+}
+.nut-steps-horizontal-double .nut-step-head-icon {
+  height: var(--nutui-steps-base-head-icon-size-right, 20px);
+  width: var(--nutui-steps-base-head-icon-size-right, 20px);
+}
+.nut-steps-horizontal-double .nut-step-head-icon .nut-icon {
+  height: 12px;
+  width: 12px;
+}
+.nut-steps-horizontal-double .nut-step-main {
+  align-items: center;
+  margin-left: 0;
+  margin-top: 2px;
+}
+.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line {
+  height: var(--nutui-steps-base-head-icon-size-right, 20px);
+}
+.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-line {
+  height: var(--nutui-steps-base-head-dot-size, 6px);
+}
+.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-line {
+  height: var(--nutui-steps-base-head-text-size, 12px);
+}
 .nut-steps-vertical {
+  /* #ifdef harmony*/
+  flex: 1;
+  min-width: 0;
+  /* #endif */
+  flex-direction: column;
+}
+.nut-steps-vertical .nut-step {
+  padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13px);
+}
+.nut-steps-vertical .nut-step-last {
+  padding-bottom: 0 !important;
+}
+.nut-steps-vertical .nut-step-line {
+  height: calc(100% - 4px);
+  width: 1px;
+  bottom: 0;
+}
+.nut-steps-vertical .nut-step-line-inner {
   height: 100%;
-  flex-flow: column;
+}
+.nut-steps-vertical .nut-step-head {
+  align-items: center;
+  justify-content: center;
+  height: 18px;
+}
+.nut-steps-vertical .nut-step-head-icon {
+  width: var(--nutui-steps-vertical-item-icon-size, 20px);
+  height: var(--nutui-steps-vertical-item-icon-size, 20px);
+}
+.nut-steps-vertical .nut-step-head-icon .nut-icon {
+  height: 12px;
+  width: 12px;
+}
+.nut-steps-vertical .nut-step-main {
+  flex: 1;
+  min-width: 0;
+  height: auto;
+  margin-left: 8px;
+}
+.nut-steps-vertical .nut-step-title {
+  display: flex;
+  align-items: center;
+  height: var(--nutui-steps-vertical-line-height, 18px);
+  font-size: var(--nutui-steps-vertical-title-font-size, var(--nutui-font-size-l, 16px));
+  overflow: auto;
+  font-weight: 500;
+  margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4px);
+}
+.nut-steps-vertical .nut-step-description {
+  margin: var(--nutui-steps-vertical-description-margin, 0 0 1px);
+  height: auto;
+  line-height: var(--nutui-steps-vertical-line-height, 18px);
+  color: var(--nutui-color-title, #1a1a1a);
+  font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14px));
+  box-sizing: border-box;
+}
+.nut-steps-vertical .nut-step-head-dot-wrap, .nut-steps-vertical .nut-step-head-icon-wrap, .nut-steps-vertical .nut-step-head-text-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: white;
+  position: relative;
+  z-index: 1;
+}
+.nut-steps-vertical .nut-step-head-dot-wrap {
+  height: calc(var(--nutui-steps-base-head-dot-size, 6px) + 8px);
+}
+.nut-steps-vertical .nut-step-head-icon-wrap {
+  height: calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 8px);
+}
+.nut-steps-vertical .nut-step-head-text-wrap {
+  height: calc(var(--nutui-steps-base-head-text-size, 12px) + 8px);
+}
+.nut-steps-vertical-icon .nut-step-head {
+  width: calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 1px);
+  min-width: calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 1px);
+}
+.nut-steps-vertical-icon .nut-step-line {
+  left: calc(var(--nutui-steps-vertical-item-icon-size, 20px) / 2);
+}
+.nut-steps-vertical-dot .nut-step-head {
+  width: calc(var(--nutui-steps-base-head-dot-size, 6px) + 1px);
+}
+.nut-steps-vertical-dot .nut-step-line {
+  left: calc(var(--nutui-steps-base-head-dot-size, 6px) / 2);
+}
+.nut-steps-vertical-text .nut-step-head {
+  width: calc(var(--nutui-steps-base-head-text-size, 12px) + 1px);
+  min-width: calc(var(--nutui-steps-base-head-text-size, 12px) + 1px);
+}
+.nut-steps-vertical-text .nut-step-line {
+  left: calc(var(--nutui-steps-base-head-text-size, 12px) / 2);
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon,
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon,
+.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text {
+  background-color: var(--nutui-steps-enhanced-finish-head-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon .nut-icon,
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text .nut-icon, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon .nut-icon,
+.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text .nut-icon {
+  color: var(--nutui-steps-enhanced-finish-head-icon-color, var(--nutui-color-primary-stop-1, #ff475d));
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text {
+  color: var(--nutui-steps-enhanced-finish-head-text-color, var(--nutui-color-primary-stop-1, #ff475d));
+}
+.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-dot, .nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-dot {
+  background-color: var(--nutui-steps-enhanced-finish-head-dot-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
 }

package/dist/cjs/packages/steps/style-jmapp/steps.scss

@@ -1,8 +1,332 @@
 .nut-steps {
   display: flex;
-}
 
-.nut-steps-vertical {
-  height: 100%;
-  flex-flow: column;
+  // 横向滚动条
+  &-horizontal {
+    flex-flow: row;
+
+    .nut-step {
+      &-head {
+        background-color: $steps-background-color;
+
+        &-icon {
+          .nut-icon {
+            height: 10px;
+            width: 10px;
+          }
+
+          .nut-image {
+            width: 100%;
+            height: 100%;
+            background-color: $steps-background-color;
+            img {
+              vertical-align: top;
+            }
+          }
+        }
+      }
+
+      // 流程状态-当前
+      &.nut-step-process {
+        .nut-step-title {
+          color: $steps-process-title-color;
+        }
+
+        .nut-step-description {
+          color: $steps-process-description-color;
+        }
+      }
+
+      // 流程状态-等待
+      &.nut-step-wait {
+        .nut-step-title {
+          color: $steps-wait-title-color;
+        }
+
+        .nut-step-description {
+          color: $steps-wait-description-color;
+        }
+      }
+
+      // 流程状态-完成
+      &.nut-step-finish {
+      }
+    }
+
+    &-single {
+      .nut-step {
+        padding-right: $steps-horizontal-item-padding-right;
+
+        &-last {
+          padding-right: 0 !important;
+        }
+
+        &-line {
+          top: 0;
+          right: 0;
+          height: $steps-base-head-height;
+          width: $steps-horizontal-item-padding-right;
+          padding: $steps-horizontal-item-line-padding;
+          box-sizing: border-box;
+        }
+
+        &-title,
+        &-description {
+          padding-left: 4px;
+        }
+
+        &-special {
+          padding-right: $steps-horizontal-item-special-padding-right;
+
+          .nut-step-line {
+            width: 100%;
+          }
+
+          .nut-step-title {
+            padding-right: 8px;
+            width: fit-content;
+          }
+        }
+      }
+
+      &.nut-steps-horizontal-count-3 {
+        .nut-step-special {
+          padding-right: $steps-horizontal-item-special-3-padding-right;
+        }
+      }
+    }
+
+    &-double {
+      width: 100%;
+      justify-content: space-between;
+
+      .nut-step {
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+
+        &-line {
+          top: 0;
+          right: -50%;
+          height: $steps-base-head-height;
+          width: 100%;
+
+          &-inner {
+            display: inline-flex;
+            height: $steps-base-line-height;
+            width: 100%;
+            background: $steps-base-line-background;
+          }
+        }
+
+        &-head {
+          justify-content: center;
+          margin-bottom: 6px;
+
+          &-dot-wrap,
+          &-icon-wrap,
+          &-text-wrap {
+            background-color: $steps-background-color;
+            padding: $steps-horizontal-item-line-padding;
+          }
+        }
+
+        &-head-icon {
+          height: $steps-double-head-icon-size;
+          width: $steps-double-head-icon-size;
+
+          .nut-icon {
+            height: 12px;
+            width: 12px;
+          }
+        }
+
+        &-main {
+          align-items: center;
+          margin-left: 0;
+          margin-top: 2px;
+        }
+      }
+
+      &.nut-steps-horizontal-icon {
+        .nut-step {
+          &-head,
+          &-line {
+            height: $steps-double-head-icon-size;
+          }
+        }
+      }
+
+      &.nut-steps-horizontal-dot {
+        .nut-step {
+          &-head,
+          &-line {
+            height: $steps-base-head-dot-size;
+          }
+        }
+      }
+
+      &.nut-steps-horizontal-text {
+        .nut-step {
+          &-head,
+          &-line {
+            height: $steps-base-head-text-size;
+          }
+        }
+      }
+    }
+  }
+
+  // 纵向滚动条
+  &-vertical {
+    /* #ifdef harmony*/
+    flex: 1;
+    min-width: 0;
+    /* #endif */
+    flex-direction: column;
+
+    .nut-step {
+      padding-bottom: $steps-vertical-item-padding-bottom;
+
+      &-last {
+        padding-bottom: 0 !important;
+      }
+
+      &-line {
+        height: calc(100% - 4px);
+        width: 1px;
+        bottom: 0;
+
+        &-inner {
+          height: 100%;
+        }
+      }
+
+      &-head {
+        align-items: center;
+        justify-content: center;
+        height: 18px;
+
+        &-icon {
+          width: $steps-vertical-head-icon-size;
+          height: $steps-vertical-head-icon-size;
+
+          .nut-icon {
+            height: 12px;
+            width: 12px;
+          }
+        }
+      }
+
+      &-main {
+        flex: 1;
+        min-width: 0;
+        height: auto;
+        margin-left: 8px;
+      }
+
+      &-title {
+        display: flex;
+        align-items: center;
+        height: $steps-vertical-line-height;
+        font-size: $steps-vertical-title-font-size;
+        overflow: auto;
+        font-weight: 500;
+        margin-bottom: $steps-vertical-title-margin-bottom;
+      }
+
+      &-description {
+        margin: $steps-vertical-description-margin;
+        height: auto;
+        line-height: $steps-vertical-line-height;
+        color: $color-title;
+        font-size: $steps-vertical-description-font-size;
+        box-sizing: border-box;
+      }
+
+      &-head-dot-wrap,
+      &-head-icon-wrap,
+      &-head-text-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        background-color: white;
+        position: relative;
+        z-index: 1;
+      }
+
+      &-head-dot-wrap {
+        height: calc($steps-base-head-dot-size + 8px);
+      }
+
+      &-head-icon-wrap {
+        height: calc($steps-vertical-head-icon-size + 8px);
+      }
+
+      &-head-text-wrap {
+        height: calc($steps-base-head-text-size + 8px);
+      }
+    }
+
+    &-icon {
+      .nut-step {
+        &-head {
+          width: calc($steps-vertical-head-icon-size + 1px);
+          min-width: calc($steps-vertical-head-icon-size + 1px);
+        }
+
+        &-line {
+          left: calc($steps-vertical-head-icon-size / 2);
+        }
+      }
+    }
+
+    &-dot {
+      .nut-step {
+        &-head {
+          width: calc($steps-base-head-dot-size + 1px);
+        }
+
+        &-line {
+          left: calc($steps-base-head-dot-size / 2);
+        }
+      }
+    }
+
+    &-text {
+      .nut-step {
+        &-head {
+          width: calc($steps-base-head-text-size + 1px);
+          min-width: calc($steps-base-head-text-size + 1px);
+        }
+
+        &-line {
+          left: calc($steps-base-head-text-size / 2);
+        }
+      }
+    }
+  }
+
+  &-horizontal-enhanced,
+  &-vertical-enhanced {
+    .nut-step-finish {
+      .nut-step-head-icon,
+      .nut-step-head-text {
+        background-color: $steps-enhanced-finish-head-background-color;
+
+        .nut-icon {
+          color: $steps-enhanced-finish-head-icon-color;
+        }
+      }
+
+      .nut-step-head-text {
+        color: $steps-enhanced-finish-head-text-color;
+      }
+
+      .nut-step-head-dot {
+        background-color: $steps-enhanced-finish-head-dot-background-color;
+      }
+    }
+  }
 }