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

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

.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 {
		// margin-top: 8px;
		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 {
			&_item {
				display: inline-block;
				vertical-align: top;
				position: relative;
				width: 50%;
				margin: 10px 0;

				&:after {
					content: '';
					position: absolute;
					width: 24px;
					height: 24px;
					border-radius: 50%;
					background: @well-bg;
					top: 25px;
					z-index: 1;
				}

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

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

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

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

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

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

			&_progress {
				padding: 3px 0;
			}
		}

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

		&-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%);
						}
					}
				}
			}
		}

		&-small {
			.builds {
				&_item {
					display: block;
					width: auto;
					padding-left: 30px;
					margin-bottom: 4px;

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

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

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

				&_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: 9px;
			}
		}
	}
}

@animation-duration: 1.5s;

.status {
	width: 25px;
	height: 25px;
	border-radius: 50%;

	&__in-progress {
		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 {
		background: @link-color;
	}

	&__error {
		background: @brand-danger;
	}

	&__queued {
		background: @brand-primary;
	}

	&__small {
		width: 10px;
		height: 10px;
	}
}

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

	0% {
		.transform(1.0, 1.0);
	}
	25% {
		opacity: 1.0;
	}
	50% {
		.transform(0.75, 0.75);
	}
	50% {
		opacity: 1.0;
	}
	100% {
		.transform(1.0, 1.0);
	}
}

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