nutui/src/packages/steps/steps.scss

@import '../../styles/variable.scss';

.clearfix {
	zoom: 1;
}

.clearfix::after {
	display: block;
	height: 0;
	clear: both;
	content: '';
	visibility: hidden;
}

.nut-steps {
	background: #fff;
	padding: 15px;
	&.horizontal {
		display: flex;

		.nut-step {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			.nut-step-node {
				display: flex;
				width: 100%;

				.nut-step-line {
					height: 1px;
					width: 100%;
					top: 50%;
					left: 50%;
				}
			}

			.nut-step-main {
				display: flex;
				flex-direction: column;
				align-items: center;

				.nut-step-title {
					margin-bottom: 0;
				}
			}
		}
	}
}

.nut-step {
	position: relative;
	font-size: $font-size-body-small;
	display: flex;

	.nut-step-time-forward {
		font-size: $font-size-display-small;
		width: 75px;
		color: $text-black-2;
	}

	.nut-step-node {
		position: relative;
		z-index: 99;
		width: 30px;
		display: flex;
		justify-content: center;

		.nut-step-icon {
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 1;

			.default-icon {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: $split-line-color;
			}
		}

		.nut-step-line {
			position: absolute;
			top: 14px;
			left: 14px;
			width: 1px;
			height: 100%;
			background: $split-line-color;
		}
	}

	.nut-step-main {
		// padding-left: 40px;
		flex: 1;
		margin-bottom: 20px;

		.nut-step-title {
			color: $text-black-1;
			line-height: 20px;
			font-weight: 600;
			margin-bottom: 5px;
		}

		.nut-step-content {
			color: $text-black-2;
			line-height: 20px;
			font-size: $font-size-display-small;
			margin-bottom: 8px;
		}

		.nut-step-time {
			color: $text-black-3;
			font-size: $font-size-display-small;
		}
	}

	&.nut-step-last {
		.nut-step-line {
			display: none;
		}
	}

	&.nut-step-status- {
		&wait {
			.nut-step-node {
				.nut-step-icon {
					.default-icon {
						width: 20px;
						height: 20px;
						line-height: 20px;
						border-radius: 50%;
						background: $split-line-color;
						position: relative;

						&::before {
							content: '...';
							position: absolute;
							top: -4px;
							width: 100%;
							height: 100%;
							color: $btn-default-bg;
							text-align: center;
						}
					}
				}
			}
		}

		&process {
			.nut-step-node {
				.nut-step-icon {
					.default-icon {
						width: 15px;
						height: 15px;
						border-radius: 50%;
						background: $assist-color-orange;
						position: relative;
						z-index: 1;

						&::before {
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 7px;
							height: 7px;
							border-radius: 50%;
							background: $primary-color-jd-red;
						}
					}
				}
			}
		}
	}
}