@import "../../style/common";

.mona-list-view {
	.mona-list-view-section {
		&.mona-list-view-transition {
			transition: transform @listViewAnimDuration ease-in-out;
		}
	}
	.list-view-refresh {
		font-size: @listViewRefreshFontSize;
	}
	.list-view-refresh-icon {
		width: 65px;
		height: 15px;
		background: url(https://s10.mogucdn.com/mlcdn/c45406/180529_52b9f3gkk7k0b97ib2j095d74al3l_6500x30.png) 0 0 no-repeat; /*no2rem*/
		background-size: 5000% 100%;
		&.animate {
			animation: monaListViewGif steps(49) 2s infinite both;
		}
	}
	.list-view-infinite {
		padding: 12px;
	}
	.list-view-infinite-icon {
		background: url(@listViewInfiniteIcon) no-repeat center;
		height: 25px;
		width: 25px;
		background-size: cover;
		animation: monaRotation 1.5s infinite linear;
	}
}

@keyframes monaListViewGif {
	from {
		background-position: 0%;
	}
	to {
		background-position: 100%;
	}
}

@-webkit-keyframes monaListViewGif {
	from {
		background-position: 0%;
	}
	to {
		background-position: 100%;
	}
}

@keyframes monaRotation {
	from {
		transform-origin: 50% 50%;
		transform: rotate(0deg)
	}

	to {
		transform-origin: 50% 50%;
		transform: rotate(1turn)
	}
}

@-webkit-keyframes monaRotation {
	from {
		transform-origin: 50% 50%;
		transform: rotate(0deg)
	}

	to {
		transform-origin: 50% 50%;
		transform: rotate(1turn)
	}
}