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

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

.builds {
	padding: 0 15px;
}

.build {
	.row();
	padding: 15px 0;
	margin-bottom: 3px;
	background: lighten(@well-bg, 3%);

	&_status {
		float: left;
		padding-top: 14px;
		margin-right: 13px;
	}

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

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

		&_buttons {
			margin-top: 8px;
			transition: opacity 0.2s ease;
			opacity: 0;
		}

		&_progress {
			padding-top: 14px;
			.progress {
				margin-bottom: 0;
			}
		}
	}

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

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

	&:hover {
		.build_controls_buttons {
			opacity: 1;
		}
	}
}

@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;
	}
}

.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}