src/pyams_skin/resources/less/graphs.less
changeset 0 bb4aabe07487
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_skin/resources/less/graphs.less	Thu Feb 19 10:59:00 2015 +0100
@@ -0,0 +1,288 @@
+/*
+ * Graphs
+ */
+
+.chart {
+	height: 220px;
+	margin: 20px 5px 10px 10px;
+}
+
+.chart-small {
+	height: 100px;
+	width: 100%;
+}
+
+.chart-large {
+	height: 235px;
+	width: 100%;
+}
+
+.chart-xl {
+	height: 297px;
+	width: 100%;
+}
+
+#flotTip {
+	padding: 3px 5px;
+	background-color: #fff;
+	z-index: 9999;
+	color: #333;
+	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .1);
+	box-shadow: 0 1px 8px rgba(0, 0, 0, .1);
+	font-size: 14px;
+	border: 1px solid #C1C1C1;
+	-khtml-border-radius: 4px;
+	border-radius: 4px;
+
+	span {
+		color: #38812D;
+		font-weight: 700;
+	}
+}
+
+.has-legend {
+	margin-top: 30px!important;
+
+	&-unique {
+		margin-top: 19px!important;
+	}
+}
+
+.legendLabel span {
+	display: block;
+	margin: 0 5px;
+}
+.legendColorBox {
+	padding-left: 10px;
+	vertical-align: top;
+	padding-top: 5px;
+
+	div >div {
+		width: 4px;
+		height: 4px;
+		border-radius: 50%;
+		box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		-webkit-box-sizing: content-box;
+	}
+}
+
+.morris-hover {
+	position: absolute;
+	z-index: 1001;
+
+	&.morris-default-style {
+		border-radius: 10px;
+		padding: 6px;
+		color: #666;
+		background: rgba(255, 255, 255, .8);
+		border: solid 2px rgba(230, 230, 230, .8);
+		font-family: Ubuntu, sans-serif;
+		font-size: 12px;
+		text-align: center;
+
+		.morris-hover-row-label {
+			font-weight: 700;
+			margin: .25em 0;
+		}
+		.morris-hover-point {
+			white-space: nowrap;
+			margin: .1em 0;
+		}
+	}
+}
+
+.easyPieChart {
+	position: relative;
+	text-align: center;
+
+	canvas {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+}
+.easy-pie-chart {
+	display: inline-block;
+
+	.percent {
+		color: #444;
+		font-size: 12px;
+		font-weight: 700;
+	}
+}
+.easy-pie-title {
+	display: inline-block;
+	margin: 10px 6px 0;
+	font-size: 12px;
+	font-weight: 400;
+	text-transform: uppercase;
+	width: 100px;
+	height: 19px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+
+	.icon-color-bad,
+	.icon-color-good {
+		font-size: 18px;
+	}
+}
+
+
+.show-stat-buttons {
+	float: left;
+	width: 100%;
+
+	@media (max-width:767px) {
+		padding-left: 10px!important;
+		padding-right: 10px!important;
+	}
+	@media only screen and (min-width:0) and (max-width:679px) {
+		padding-left: 10px!important;
+		padding-right: 10px!important;
+	}
+	@media only screen and (min-width:320px) and (max-width:479px) {
+		padding-left: 10px!important;
+		padding-right: 10px!important;
+	}
+}
+
+.show-stats {
+	padding-top: 6px!important;
+
+	.progress {
+		height: 7px;
+		border-radius: 0;
+		margin-top: 3px;
+		margin-bottom: 15px;
+	}
+	.show-stat-buttons {
+		>:first-child {
+			padding-right: 5px;
+
+			@media (max-width:979px) {
+				padding-right: 13px;
+			}
+		}
+		>:last-child {
+			padding-left: 5px;
+
+			@media (max-width:979px) {
+				padding-left: 13px;
+			}
+		}
+	}
+}
+
+.show-stat-microcharts {
+	margin-left: -10px;
+	margin-right: -10px;
+
+	>div {
+		border-right: 1px solid #DADADA!important;
+		border-top: 1px solid #DADADA!important;
+		margin-top: 10px!important;
+		height: 65px;
+		overflow: hidden;
+		padding: 7px 9px;
+
+		@media (max-width:767px) {
+			margin-top: 0!important;
+			border-right: 0!important;
+		}
+		@media only screen and (min-width:0) and (max-width:679px) {
+			margin-top: 0!important;
+			border-right: 0!important;
+		}
+		@media only screen and (min-width:320px) and (max-width:479px) {
+			margin-top: 0!important;
+			border-right: 0!important;
+		}
+	}
+	>:last-child {
+		border-right: 0!important;
+	}
+	.sparkline {
+		margin-top: 10px;
+		margin-right: 8px;
+		opacity: .7;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}
+
+.smaller-stat {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	li {
+		margin-top: 3px;
+		margin-right: 0;
+
+		&:first-child {
+			margin-top: 8px;
+		}
+	}
+	span.label {
+		width: 40px;
+		display: block;
+		text-align: left;
+		opacity: .5;
+		cursor: default;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}
+
+.jvectormap {
+	&-label {
+		position: absolute;
+		display: none;
+		border: solid 1px #CDCDCD;
+		border-radius: 3px;
+		background: #292929;
+		color: #fff;
+		font-family: Ubuntu, sans-serif, Verdana;
+		font-size: smaller;
+		padding: 3px;
+	}
+	&-zoomin {
+		top: 0;
+	}
+	&-zoomout {
+		top: 24px;
+	}
+	&-zoomin,
+	&-zoomout {
+		position: absolute;
+		background: #292929;
+		padding: 4px;
+		width: 22px;
+		height: 22px;
+		cursor: pointer;
+		line-height: 10px;
+		text-align: center;
+		font-size: 14px;
+		border-radius: 2px;
+		box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05);
+		-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05);
+		background-color: #fff;
+		border: 1px solid #bfbfbf;
+
+		&:hover {
+			background: #eee;
+			border-color: #d9d9d9;
+		}
+	}
+}
+.vector-map {
+	height: 300px;
+	width: 100%;
+	padding: 10px;
+}