ab_metrics_popup.html

<style>
	.report {
		background: #FFF;
		border: 1px solid #091c36;
	}

	.report-item {
		margin: 10px 0;
	}

	.report-label {
		color: #091c36;
		font-size: 2em;
		text-align: center;
		width: 5%;
	}

	.report-thumbnail {
		background-color: #091c36;
		text-align: center;
		width: 10%;
	}

	.report-thumbnail .percentage {
		color: #FFF;
		display: block;
		font-size: 1.5em;
		padding: 15px 10px;
	}

	.report-graph {
		background: #e1ecfa;
		height: 15px;
		width: 84%;
	}

	.report-bar {
		background: #143e78;
		height: 100%;

		transition: width .5s;
		-webkit-transition: width .5s;
	}

	.report-bar, .report-graph, .report-label, .report-thumbnail {
		display: inline-block;
	}

	.report-total, .report-wrapper {
		padding: 15px;
	}

	.report-total {
		border-top: 1px solid #091c36;
	}

	.report-item-2 .report-label {
		color: #093336;
	}

	.report-item-2 .report-thumbnail {
		background-color: #093336;
	}

	.report-item-3 .report-label {
		color: #36091c;
	}

	.report-item-3 .report-thumbnail {
		background-color: #36091c;
	}

</style>

<div class="report">
	<div class="report-wrapper">
		<div class="report-item report-item-1">
			<span class="report-label">A</span>
			<span class="report-thumbnail">
				<span class="percentage">65%</span>
			</span>
			<span class="report-graph">
				<span class="report-bar" style="width: 65%;"></span>
			</span>
		</div>

		<div class="report-item report-item-2">
			<span class="report-label">B</span>
			<span class="report-thumbnail">
				<span class="percentage">35%</span>
			</span>
			<span class="report-graph">
				<span class="report-bar" style="width: 35%;"></span>
			</span>
		</div>

		<div class="report-item report-item-3">
			<span class="report-label">C</span>
			<span class="report-thumbnail">
				<span class="percentage">45%</span>
			</span>
			<span class="report-graph">
				<span class="report-bar" style="width: 45%;"></span>
			</span>
		</div>
	</div>

	<div class="report-total">
		<span class="title">Total:</span>
		<span class="stats">Some stats and numbers and stuff</span>
	</div>
</div>