META-INF.resources.components.step_tracker.step_tracker.scss Maven / Gradle / Ivy

Go to download
@import '../../styles/variables';

.step-tracker {
	display: flex;
	overflow: hidden;
	width: 100%;

	.step {
		align-items: center;
		clip-path: polygon(
			calc(100% - 10px) 0%,
			calc(100% + 8px) 50%,
			calc(100% - 10px) 100%,
			-8px 100%,
			11px 50%,
			-8px 0
		);
		display: flex;
		flex-basis: 100%;
		font-size: 14px;
		font-weight: 600;
		justify-content: center;
		padding: 8px 12px;
		position: relative;
		text-align: center;

		&:first-child {
			clip-path: polygon(
				calc(100% - 10px) 0%,
				calc(100% + 8px) 50%,
				calc(100% - 10px) 100%,
				0 100%,
				0 0
			);
		}

		&:last-child {
			clip-path: polygon(100% 0%, 100% 100%, -8px 100%, 11px 50%, -8px 0);
		}

		&:not(:first-child) {
			&::before {
				content: '';
				height: 100%;
				position: absolute;
				right: 100%;
				top: 0;
				width: 11px;
			}
		}

		&:not(:last-child) {
			&::after {
				content: '';
				height: 100%;
				left: 100%;
				position: absolute;
				top: 0;
				width: 11px;
			}
		}

		&.active {
			background-color: $step-tracker-active;
			color: $step-tracker-active-color;

			&:not(:first-child)::before,
			&:not(:last-child)::after {
				background-color: $step-tracker-active;
			}

			.step-label {
				color: currentColor;
			}
		}

		&.completed {
			background-color: $step-tracker-completed;
			color: $step-tracker-completed-color;

			&:not(:first-child)::before,
			&:not(:last-child)::after {
				background-color: $step-tracker-completed;
			}

			.step-label {
				color: currentColor;
			}
		}

		&.inactive {
			background-color: $step-tracker-inactive;
			color: $step-tracker-inactive-color;

			&:not(:first-child)::before,
			&:not(:last-child)::after {
				background-color: $step-tracker-inactive;
			}

			.step-label {
				color: currentColor;
			}
		}

		.step-label {
			color: $step-tracker-inactive-color;
		}
	}
}

@media screen and (max-width: 1024px) {
	.step-tracker {
		flex-wrap: wrap;

		.step {
			clip-path: none !important;

			&::before {
				display: none;
			}

			&::after {
				background: none !important;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 6px solid currentColor;
				height: 0 !important;
				left: calc(50% - 6px) !important;
				top: 100% !important;
				z-index: 1;
			}
		}
	}
}