seitime-frappe/frappe/public/less/graphs.less

/* graphs */
.graph-container {
	.graph-focus-margin {
		margin: 0px 5%;
	}

	.graph-graphics {
		margin-top: 10px;
		padding: 10px 0px;
		position: relative;
	}

	.graph-stats-group {
		display: flex;
		justify-content: space-around;
		flex: 1;
	}

	.graph-stats-container {
		display: flex;
		justify-content: space-around;
		padding-top: 10px;

		.stats {
			padding-bottom: 15px;
		}

		// Custom (impactified) stats style
		.stats-title {
			color: #8D99A6;
		}
		.stats-value {
			font-size: 20px;
			font-weight: 300;
		}
		.stats-description {
			font-size: 12px;
			color: #8D99A6;
		}
		.graph-data .stats-value {
			color: #98d85b;
		}
	}

	.bar-graph, .line-graph {

		// baselines
		.axis {
			font-size: 10px;
			fill: #6a737d;

			line {
				stroke: rgba(27,31,35,0.1);
			}
		}
	}

	.percentage-graph {
		margin-top: 35px;

		.progress {
			margin-bottom: 0px;
		}
	}

	.graph-data-points {
		circle {
			// fill: #28a745;
			stroke: #fff;
			stroke-width: 2;
		}

		g.mini {
			// fill: #98d85b;
		}

		path {
			fill: none;
			// stroke: #28a745;
			stroke-opacity: 1;
			stroke-width: 2px;
		}
	}

	line.graph-dashed {
		stroke-dasharray: 5,3;
	}

	.tick {
		&.x-axis-label {
			display: block;
		}

		.specific-value {
			text-anchor: start;
		}

		.y-value-text {
			text-anchor: end;
		}

		.x-value-text {
			text-anchor: middle;
		}
	}

	.graph-svg-tip {
		position: absolute;
		z-index: 99999;
		padding: 10px;
		font-size: 12px;
		color: #959da5;
		text-align: center;
		background: rgba(0,0,0,0.8);
		border-radius: 3px;

		&.comparison {
			padding: 0;
			text-align: left;
			pointer-events: none;

			.title {
				display: block;
				padding: 10px;
				margin: 0;
				font-weight: 600;
				line-height: 1;
				pointer-events: none;
			}

			ul {
				margin: 0;
				white-space: nowrap;
				list-style: none;
			}

			li {
				display: inline-block;
				padding: 5px 10px;
			}
		}

		ul, ol {
			padding-left: 0;
			display: flex;
		}

		ul.data-point-list li {
			min-width: 90px;
			flex: 1;
		}

		strong {
			color: #dfe2e5;
		}

		&::after {
			position: absolute;
			bottom: -10px;
			left: 50%;
			width: 5px;
			height: 5px;
			margin: 0 0 0 -5px;
			content: " ";
			border: 5px solid transparent;
			border-top-color: rgba(0,0,0,0.8);
		}
	}

	.stroke.grey {
		stroke: #F0F4F7;
	}
	.stroke.blue {
		stroke: #5e64ff;
	}
	.stroke.red {
		stroke: #ff5858;
	}
	.stroke.light-green {
		stroke: #98d85b;
	}
	.stroke.green {
		stroke: #28a745;
	}
	.stroke.orange {
		stroke: #ffa00a;
	}
	.stroke.purple {
		stroke: #743ee2;
	}
	.stroke.darkgrey {
		stroke: #b8c2cc;
	}
	.stroke.black {
		stroke: #36414C;
	}
	.stroke.yellow {
		stroke: #FEEF72;
	}
	.stroke.light-blue {
		stroke: #7CD6FD;
	}
	.stroke.lightblue {
		stroke: #7CD6FD;
	}

	.fill.grey {
		fill: #F0F4F7;
	}
	.fill.blue {
		fill: #5e64ff;
	}
	.fill.red {
		fill: #ff5858;
	}
	.fill.light-green {
		fill: #98d85b;
	}
	.fill.green {
		fill: #28a745;
	}
	.fill.orange {
		fill: #ffa00a;
	}
	.fill.purple {
		fill: #743ee2;
	}
	.fill.darkgrey {
		fill: #b8c2cc;
	}
	.fill.black {
		fill: #36414C;
	}
	.fill.yellow {
		fill: #FEEF72;
	}
	.fill.light-blue {
		fill: #7CD6FD;
	}
	.fill.lightblue {
		fill: #7CD6FD;
	}

	.background.grey {
		background: #F0F4F7;
	}
	.background.blue {
		background: #5e64ff;
	}
	.background.red {
		background: #ff5858;
	}
	.background.light-green {
		background: #98d85b;
	}
	.background.green {
		background: #28a745;
	}
	.background.orange {
		background: #ffa00a;
	}
	.background.purple {
		background: #743ee2;
	}
	.background.darkgrey {
		background: #b8c2cc;
	}
	.background.black {
		background: #36414C;
	}
	.background.yellow {
		background: #FEEF72;
	}
	.background.light-blue {
		background: #7CD6FD;
	}
	.background.lightblue {
		background: #7CD6FD;
	}

	.border-top.grey {
		border-top: 3px solid #F0F4F7;
	}
	.border-top.blue {
		border-top: 3px solid #5e64ff;
	}
	.border-top.red {
		border-top: 3px solid #ff5858;
	}
	.border-top.light-green {
		border-top: 3px solid #98d85b;
	}
	.border-top.green {
		border-top: 3px solid #28a745;
	}
	.border-top.orange {
		border-top: 3px solid #ffa00a;
	}
	.border-top.purple {
		border-top: 3px solid #743ee2;
	}
	.border-top.darkgrey {
		border-top: 3px solid #b8c2cc;
	}
	.border-top.black {
		border-top: 3px solid #36414C;
	}
	.border-top.yellow {
		border-top: 3px solid #FEEF72;
	}
	.border-top.light-blue {
		border-top: 3px solid #7CD6FD;
	}
	.border-top.lightblue {
		border-top: 3px solid #7CD6FD;
	}

}