@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/steps/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-steps {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -103,9 +112,6 @@
       -ms-flex-align: baseline;
           align-items: baseline;
 }
-.kd-steps-iconSize {
-  font-size: 12px;
-}
 .kd-steps-item {
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
@@ -121,23 +127,29 @@
 .kd-steps-item-clickable {
   cursor: pointer;
 }
+.kd-steps-item-clickable .kd-steps-item-iconContainer-icon .kd-steps-icon {
+  background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
+}
 .kd-steps-item-clickable.kd-steps-item-wait .kd-steps-icon,
 .kd-steps-item-clickable.kd-steps-item-wait .kd-steps-item-title {
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
+  -webkit-transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s));
+  transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s));
 }
 .kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-icon {
-  background-color: #5582f3;
+  background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  border: 2px solid var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
 }
-.kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-item-title {
-  color: #5582f3;
+.kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-item-title,
+.kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-item-description {
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
 }
 .kd-steps-item-clickable.kd-steps-item-finish .kd-steps-item-title {
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
+  -webkit-transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) ease;
+  transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) ease;
 }
 .kd-steps-item-clickable.kd-steps-item-finish:hover .kd-steps-item-title {
-  color: #5582f3;
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
 }
 .kd-steps-item-container {
   width: 100%;
@@ -164,21 +176,21 @@
 .kd-steps-item-iconContainer::after {
   content: '';
   width: 100%;
-  height: 4px;
-  background-color: #d9d9d9;
+  height: var(--kd-c-steps-line-sizing-height, 4px);
+  background-color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
   position: absolute;
   left: 50%;
-  top: calc(50% - 2px);
-  -webkit-transition: width 0.3s cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color 0.3s cubic-bezier(0.48, 0.04, 0.52, 0.96);
-  transition: width 0.3s cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color 0.3s cubic-bezier(0.48, 0.04, 0.52, 0.96);
+  top: calc(50% - var(--kd-c-steps-line-sizing-height, 4px) / 2);
+  -webkit-transition: width var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
+  transition: width var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
 }
 .kd-steps-item-iconContainer:last-child::after {
   display: none;
 }
 .kd-steps-item-iconContainer-icon {
   z-index: 1;
-  width: 24px;
-  height: 24px;
+  width: var(--kd-c-steps-icon-sizing-width, 28px);
+  height: var(--kd-c-steps-icon-sizing-width, 28px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -188,11 +200,10 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  background-color: #fff;
 }
 .kd-steps-item-iconContainer-icon .kd-steps-icon {
-  width: 21px;
-  height: 21px;
+  width: var(--kd-c-steps-icon-sizing-width, 28px);
+  height: var(--kd-c-steps-icon-sizing-width, 28px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -202,46 +213,68 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  background-color: #d9d9d9;
-  color: #fff;
-  font-size: 14px;
+  background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
+  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  font-size: calc(var(--kd-c-steps-icon-sizing-width, 28px) - 13px);
   border-radius: 50%;
+  border: 2px solid var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .kd-steps-item-content {
   text-align: center;
 }
-.kd-steps-item-content .kd-steps-item-title,
+.kd-steps-item-content .kd-steps-item-title {
+  line-height: 20px;
+  font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
+  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
 .kd-steps-item-content .kd-steps-item-description {
   line-height: 20px;
-  font-size: 12px;
-  color: #666;
+  font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
+  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  width: var(--kd-c-steps-vertical-description-sizing-width, 200px);
 }
 .kd-steps-item-process .kd-steps-icon {
-  background-color: #5582f3;
+  background-color: var(--kd-c-steps-icon-color-background, var(--kd-g-color-theme, #5582f3));
 }
 .kd-steps-item-process .kd-steps-item-title {
-  color: #5582f3;
+  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
 }
 .kd-steps-item:last-child .kd-steps-item-iconContainer::after {
   display: none;
 }
 .kd-steps-item-finish .kd-steps-icon {
-  background-color: #fff;
-  color: #5582f3;
-  border: 2px solid #5582f3;
+  background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  border: 2px solid var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
+.kd-steps-item-finish .kd-steps-item-content .kd-steps-item-title,
+.kd-steps-item-finish .kd-steps-item-content .kd-steps-item-description {
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+}
 .kd-steps-item-iconContainer-finish::after {
-  background-color: #5582f3;
+  background-color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
 }
 .kd-steps-item-error .kd-steps-icon {
-  background-color: #fb2323;
+  color: var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
+  border: 2px solid var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
+}
+.kd-steps-item-error .kd-steps-item-content .kd-steps-item-title,
+.kd-steps-item-error .kd-steps-item-content .kd-steps-item-description {
+  color: var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
 }
 .kd-steps-bottomLable .kd-steps-item-iconContainer {
   margin-bottom: 4px;
@@ -258,6 +291,10 @@
 .kd-steps-horizontal .kd-steps-item:last-child {
   padding-right: 0;
 }
+.kd-steps-horizontal .kd-steps-item .kd-steps-item-description {
+  height: var(--kd-c-steps-horizontal-description-sizing-height, 60px);
+  width: auto;
+}
 .kd-steps-horizontal .kd-steps-item-iconContainer::after {
   width: calc(100% + 44px);
 }
@@ -294,10 +331,10 @@
   margin-right: 4px;
 }
 .kd-steps-vertical .kd-steps-item-iconContainer::after {
-  width: 4px;
+  width: var(--kd-c-steps-line-sizing-height, 4px);
   height: calc(100% + 44px);
-  top: 0;
-  left: calc(50% - 2px);
+  top: 2px;
+  left: calc(50% - var(--kd-c-steps-line-sizing-height, 4px) / 2);
 }
 .kd-steps-vertical .kd-steps-item-content {
   text-align: left;

package/lib/steps/style/index.less

@@ -1,192 +1,284 @@
 @import '../../style/themes/index';
-@import './mixin.less';
+@import './token.less';
+
+
 @steps-prefix-cls: ~'@{kd-prefix}-steps';
+
 .@{steps-prefix-cls} {
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
-	&-iconSize {
-		font-size: 12px;
-	}
-	&-item {
-		flex-grow: 1;
-		display: flex;
-		justify-content: center;
-		width: 0;
-		&-clickable{
-			cursor: pointer;
-		}
-		&-clickable&-wait {
-			.@{steps-prefix-cls}-icon, .@{steps-prefix-cls}-item-title {
-				transition: all @transition-duration;
-			}
-			&:hover {
-				.@{steps-prefix-cls}-icon {
-					background-color: @theme-color;
-				}
-				.@{steps-prefix-cls}-item-title {
-					color: @theme-color;
-				}
-			}
-		}
-		&-clickable&-finish {
-			.@{steps-prefix-cls}-item-title {
-				transition: all @transition-duration ease;
-			}
-			&:hover {
-				.@{steps-prefix-cls}-item-title {
-					color: @theme-color;
-				}
-			}
-		}
-		&-container {
-			width: 100%;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-		}
-		&-iconContainer {
-			display: flex;
-			justify-content: center;
-			position: relative;
-			&::after {
-				content: '';
-				width: 100%;
-				height: 4px;
-				background-color: @strong-border-color;
-				position: absolute;
-				left: 50%;
-				top: ~'calc(50% - 2px)';
-				transition: width @transition-duration @steps-transition-fn, background-color @transition-duration @steps-transition-fn
-
-			}
-			&:last-child {
-				&::after {
-					display: none;
-				}
-			}
-			&-icon {
-				z-index: 1;
-				width: 24px;
-				height: 24px;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				background-color: @white;
-				.@{steps-prefix-cls}-icon {
-					width: 21px;
-					height: 21px;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					background-color: @strong-border-color;
-					color: @white;
-					font-size: 14px;
-					border-radius: 50%;
-				}
-			}
-		}
-		&-content {
-			text-align: center;
-			.@{steps-prefix-cls}-item-title, .@{steps-prefix-cls}-item-description {
-				line-height: 20px;
-				font-size: 12px;
-				color: @secondary-text-color;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				word-break: break-word;
-				display: -webkit-box;
-				-webkit-box-orient: vertical;
-			}
-		}
-		&-process {
-			.@{steps-prefix-cls}-icon {
-				background-color: @theme-color;
-			}
-			.@{steps-prefix-cls}-item-title {
-				color: @theme-color;
-			}
-		}
-		&:last-child {
-			.@{steps-prefix-cls}-item-iconContainer {
-				&::after {
-					display: none;
-				}
-			}
-		}
-		&-finish {
-			.@{steps-prefix-cls}-icon {
-				background-color: @white;
-				color: @theme-color;
-				border: 2px solid @theme-color;
-				box-sizing: border-box;
-			}
-		}
-		&-iconContainer-finish {
-			&::after {
-				background-color: @theme-color;
-			}
-		}
-		&-error {
-			.@{steps-prefix-cls}-icon {
-				background-color: @error-color;
-			}
-		}
-	}
-	
-
-	&-bottomLable {
-		.@{steps-prefix-cls}-item-iconContainer {
-			margin-bottom: 4px;
-		}
-	}
-	&-horizontal {
-		.@{steps-prefix-cls}-item {
-			min-width: 88px;
-			box-sizing: content-box;
-			padding: 0 22px;
-			&:first-child {
-				padding-left: 0;
-			}
-			&:last-child {
-				padding-right: 0;
-			}
-			&-iconContainer::after {
-				width: ~'calc(100% + 44px)';
-			}
-		}
-	}
-	&-vertical {
-		flex-direction: column;
-		.@{steps-prefix-cls}-item {
-			width: 100%;
-			min-height: 68px;
-			box-sizing: content-box;
-			padding: 22px 0;
-			&:first-child {
-				padding-top: 0;
-			}
-			&:last-child {
-				padding-bottom: 0;
-			}
-			&-container {
-				flex-direction: row;
-				justify-content: flex-start;
-			}
-			&-iconContainer {
-				margin-bottom: 0;
-				margin-right: 4px;
-				&::after {
-					width: 4px;
-					height: ~'calc(100% + 44px)';
-					top: 0;
-					left: ~'calc(50% - 2px)';
-				}
-			}
-			&-content {
-				text-align: left;
-				margin-top: 1px;
-			}
-		}
-	}
-}
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+
+  &-iconSize {
+    // font-size: @steps-font-size;
+  }
+
+  &-item {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    width: 0;
+
+    &-clickable {
+      cursor: pointer;
+
+      .@{steps-prefix-cls}-item-iconContainer-icon {
+        .@{steps-prefix-cls}-icon {
+          background-color: @steps-color-white;
+        }
+      }
+
+    }
+
+    &-clickable&-wait {
+
+      .@{steps-prefix-cls}-icon,
+      .@{steps-prefix-cls}-item-title {
+        transition: all @steps-duration-promptly;
+      }
+
+
+      &:hover {
+        .@{steps-prefix-cls}-icon {
+          // background-color: @steps-color-background-wait-icon-hover;
+
+          background-color: @steps-color-white;
+          color: @steps-color-completed;
+          border: 2px solid @steps-color-completed;
+        }
+
+        .@{steps-prefix-cls}-item-title,
+        .@{steps-prefix-cls}-item-description {
+          color: @steps-color-completed;
+        }
+      }
+    }
+
+    &-clickable&-finish {
+      .@{steps-prefix-cls}-item-title {
+        transition: all @steps-duration-promptly ease;
+      }
+
+      &:hover {
+        .@{steps-prefix-cls}-item-title {
+          color: @steps-color-completed
+        }
+      }
+    }
+
+    &-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &-iconContainer {
+      display: flex;
+      justify-content: center;
+      position: relative;
+
+      &::after {
+        content: '';
+        width: 100%;
+        height: @steps-line-sizing-height;
+        background-color: @steps-color-wait;
+        position: absolute;
+        left: 50%;
+        top: calc(50% - @steps-line-sizing-height / 2);
+        transition: width @steps-duration-promptly @steps-transition-fn, background-color @steps-duration-promptly @steps-transition-fn
+      }
+
+      &:last-child {
+        &::after {
+          display: none;
+        }
+      }
+
+      &-icon {
+        z-index: 1;
+        width: @steps-icon-sizing-width;
+        height: @steps-icon-sizing-width;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        // background-color:@steps-color-white;
+        .@{steps-prefix-cls}-icon {
+          width: @steps-icon-sizing-width;
+          height: @steps-icon-sizing-width;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: @steps-color-white;
+          color: @steps-color-wait;
+          font-size: calc(@steps-icon-sizing-width - 13px);
+          border-radius: 50%;
+          border: 2px solid @steps-color-wait;
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    &-content {
+      text-align: center;
+
+      .@{steps-prefix-cls}-item-title {
+        line-height: 20px;
+        font-size: @steps-font-size;
+        color: @steps-color-wait;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+      }
+
+      .@{steps-prefix-cls}-item-description {
+
+        line-height: 20px;
+        font-size: @steps-font-size;
+        color: @steps-color-wait;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+
+        width: @steps-vertical-description-sizing-width;
+
+      }
+    }
+
+    &-process {
+      .@{steps-prefix-cls}-icon {
+        background-color: @steps-color-background-process-icon;
+      }
+
+      .@{steps-prefix-cls}-item-title {
+        color: @steps-color-wait;
+      }
+    }
+
+    &:last-child {
+      .@{steps-prefix-cls}-item-iconContainer {
+        &::after {
+          display: none;
+        }
+      }
+    }
+
+    &-finish {
+      .@{steps-prefix-cls}-icon {
+        background-color: @steps-color-white;
+        color: @steps-color-completed;
+        border: 2px solid @steps-color-completed;
+        box-sizing: border-box;
+      }
+
+      .@{steps-prefix-cls}-item-content {
+
+        .@{steps-prefix-cls}-item-title,
+        .@{steps-prefix-cls}-item-description {
+          color: @steps-color-completed;
+        }
+      }
+    }
+
+    &-iconContainer-finish {
+      &::after {
+        background-color: @steps-color-completed;
+      }
+    }
+
+    &-error {
+      .@{steps-prefix-cls}-icon {
+        color: @steps-color-error;
+        border: 2px solid @steps-color-error;
+      }
+
+      .@{steps-prefix-cls}-item-content {
+
+        .@{steps-prefix-cls}-item-title,
+        .@{steps-prefix-cls}-item-description {
+          color: @steps-color-error;
+        }
+      }
+
+
+    }
+  }
+
+
+  &-bottomLable {
+    .@{steps-prefix-cls}-item-iconContainer {
+      margin-bottom: 4px;
+    }
+  }
+
+  &-horizontal {
+    .@{steps-prefix-cls}-item {
+      min-width: 88px;
+      box-sizing: content-box;
+      padding: 0 22px;
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+
+      .@{steps-prefix-cls}-item-description {
+        height: @steps-horizontal-description-sizing-height;
+        width: auto;
+      }
+
+      &-iconContainer::after {
+        width: ~'calc(100% + 44px)';
+      }
+    }
+  }
+
+  &-vertical {
+    flex-direction: column;
+
+    .@{steps-prefix-cls}-item {
+      width: 100%;
+      min-height: 68px;
+      box-sizing: content-box;
+      padding: 22px 0;
+
+      &:first-child {
+        padding-top: 0;
+      }
+
+      &:last-child {
+        padding-bottom: 0;
+      }
+
+      &-container {
+        flex-direction: row;
+        justify-content: flex-start;
+      }
+
+      &-iconContainer {
+        margin-bottom: 0;
+        margin-right: 4px;
+
+        &::after {
+          width: @steps-line-sizing-height;
+          height: calc(100% + 44px);
+          top: 2px;
+          left: calc(50% - @steps-line-sizing-height / 2);
+        }
+      }
+
+      &-content {
+        text-align: left;
+        margin-top: 1px;
+      }
+    }
+  }
+}