@import "config.less";

/* Progress - circle style */
@img-height: 32 * @unit_base;
@img-width: 32 * @unit_base;

@-webkit-keyframes ui-rotate-animation {
	from {
		-webkit-transform: rotate(0deg);
	} to {
		-webkit-transform: rotate(360deg);
	}
}

.ui-progress-container-circle {
	position: absolute;
}

.ui-li .ui-progress-container-circle {
	top: 22%;
}

.ui-progress-circle {
	position: relative;
	top: 0;

	height: @img-height;
	width: @img-width;

	background: url(images/00_list_process_01.png) no-repeat;
	.LESSbackground-size(@img-width, @img-height);
}

.ui-progress-circle-running {
	-webkit-animation: ui-rotate-animation 1s infinite linear;
}

/* Progress - pending style */
@bar-height: 7 * @unit_base;
@bar-margin: 21 * @unit_base;

@-webkit-keyframes ui-move-animation {
	from {
		-webkit-transform: translateY(-@bar-height * 2);
	} to {
		-webkit-transform: translateY(0);
	}
}

.ui-progress-pending {
	position: relative;
	top: 0;
	width: 100%;
	height: @bar-height * 3;
	padding-top: 0;
	padding-bottom: 0;

	background: -webkit-gradient(linear,
				left top,
				right bottom,
				color-stop(0%,  rgba(0,0,0,0)),
				color-stop(25%, rgba(0,0,0,0)),
				color-stop(25%, @color_progress_value0),
				color-stop(50%, @color_progress_value0),
				color-stop(50%, rgba(0,0,0,0)),
				color-stop(75%, rgba(0,0,0,0)),
				color-stop(75%, @color_progress_value0));

	background-color: @color_progress_bar0;

	.LESSbackground-size(@bar-height * 2, @bar-height * 2);
}

.ui-progress-pending-running {
	-webkit-animation: ui-move-animation 0.5s infinite linear;
}