nci/static/css/sources/components/builds.less

.build-view {
	&_info {
	}
	&_terminal {
		margin-top: 20px;
	}
}

@animation-duration: 1.5s;

.builds {
	&_item {
		&:hover {
			.builds {
				&_buttons {
					opacity: 1;
				}
			}
		}
	}

	&_inner {
		background: @well-bg;
		padding: 15px;
	}

	&_header {
		.make-xs-column(9);
	}

	&_controls {
		.make-xs-column(3);
		.text-right;
	}

	&_buttons {
		transition: opacity 0.2s ease;
		opacity: 0;
	}

	&_progress {
		.progress {
			height: 18px;
			margin-bottom: 0;
		}
	}

	&_status {
		float: left;
		margin-right: 8px;
	}

	&_info {
		display: inline-block;
		margin-right: 10px;
	}

	&__timeline {
		position: relative;

		.builds {
			&_inner {
				border-left: 6px solid darken(@well-bg, 10%);
			}

			&_header {
				margin-bottom: 6px;
				font-size: 18px;
			}

			&_progress {
				padding: 3px 0;
			}

			&_item {
				margin: 4px 0;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					border-radius: 50%;
					background: @well-bg;
					left: 0;
					z-index: 1;
				}

				&:before {
					content: '';
					position: absolute;
					border: 11px solid transparent;
					top: 25px;
				}

				&__in-progress {
					&:after {
						background: @brand-info;

						-webkit-animation: pulsate @animation-duration ease-out;
						-webkit-animation-iteration-count: infinite;
						-moz-animation: pulsate @animation-duration ease-out;
						-moz-animation-iteration-count: infinite;
						-o-animation: pulsate @animation-duration ease-out;
						-o-animation-iteration-count: infinite;
						animation: pulsate @animation-duration ease-out;
						animation-iteration-count: infinite;
					}
				}

				&__done {
					&:after {
						background: @link-color;
					}
				}

				&__error {
					&:after {
						background: @brand-danger;
					}
				}

				&__queued {
					&:after {
						background: @brand-primary;
					}
				}
			}
		}

		&:after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			width: 2px;
			margin-left: -1px;
			background: darken(@well-bg, 10%);
		}

		&-large {
			.builds {
				&_item {
					padding-left: 40px;

					&:after {
						width: 24px;
						height: 24px;
						top: 25px;
					}

					&:before {
						left: 20px;
						border-right-color: darken(@well-bg, 10%);
						top: 25px;
					}
				}
			}

			&:after {
				left: 12px;
			}
		}

		&-small {
			.builds {
				&_item {
					padding-left: 30px;

					&:after {
						top: 16px;
						height: 16px;
						width: 16px;
					}

					&:before {
						left: 10px;
						border-right-color: darken(@well-bg, 10%);
						top: 13px;
					}
				}

				&_header {
					font-size: 14px;
					.make-xs-column(7);
					margin-bottom: 0;
				}

				&_controls {
					.make-xs-column(5);
					font-size: 12px;
				}

				&_progress {
					padding: 1px 0;
				}
			}

			&:after {
				left: 8px;
			}
		}
	}
}

@media (min-width: @screen-sm-min) {
	.builds {
		&__timeline {
			&-large {
				.builds {
					&_item {
						padding-left: 0;
						display: inline-block;
						vertical-align: top;
						width: 50%;
						margin: 10px 0;

						&:after {
							left: auto;
						}

						&:before {
							left: auto;
							border-right-color: transparent;
						}
					}

					&_inner {
						border-left: 0;
					}
				}

				&:after {
					left: 50%;
				}
			}

			&-left {
				.builds {
					&_item {
						&:nth-child(odd) {
							padding-right: 30px;

							.builds {
								&_inner {
									border-right: 6px solid darken(@well-bg, 10%);
								}
							}

							&:after {
								right: -12px;
							}

							&:before {
								right: 10px;
								border-left-color: darken(@well-bg, 10%);
							}
						}

						&:nth-child(even) {
							padding-left: 30px;
							top: 50px;

							.builds {
								&_inner {
									border-left: 6px solid darken(@well-bg, 10%);
								}
							}

							&:after {
								left: -12px;
							}

							&:before {
								left: 10px;
								border-right-color: darken(@well-bg, 10%);
							}
						}
					}
				}
			}

			&-right {
				.builds {
					&_item {
						&:first-child {
							margin-left: 50%;
						}

						&:nth-child(even) {
							padding-right: 30px;
							top: -50px;

							.builds {
								&_inner {
									border-right: 6px solid darken(@well-bg, 10%);
								}
							}

							&:after {
								right: -12px;
							}

							&:before {
								right: 10px;
								border-left-color: darken(@well-bg, 10%);
							}
						}

						&:nth-child(odd) {
							padding-left: 30px;

							.builds {
								&_inner {
									border-left: 6px solid darken(@well-bg, 10%);
								}
							}

							&:after {
								left: -12px;
							}

							&:before {
								left: 10px;
								border-right-color: darken(@well-bg, 10%);
							}
						}
					}
				}
			}
		}
	}
}

.pulsate-frames() {
	.transform(@scaleX, @scaleY) {
		-webkit-transform: scale3d(@scaleX, @scaleY, 1);
		-moz-transform: scale3d(@scaleX, @scaleY, 1);
		-ms-transform: scale3d(@scaleX, @scaleY, 1);
		-o-transform: scale3d(@scaleX, @scaleY, 1);
		transform: scale3d(@scaleX, @scaleY, 1);
	}

	0% {
		.transform(1, 1);
	}

	50% {
		.transform(0.75, 0.75);
	}

	100% {
		.transform(1, 1);
	}
}

@-webkit-keyframes pulsate {.pulsate-frames}
@-moz-keyframes pulsate {.pulsate-frames}
@-ms-keyframes pulsate {.pulsate-frames}
@-o-keyframes pulsate {.pulsate-frames}
@keyframes pulsate {.pulsate-frames}