add css compiler, watcher and livereload
This commit is contained in:
pratu16x7
parent
8e75d8e2dd
commit
1ec700c6af
2
dist/frappe-charts.min.js
vendored
2
dist/frappe-charts.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.js.map
vendored
2
dist/frappe-charts.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,57 +1,67 @@
|
|||||||
// Data
|
// Composite Chart
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
|
let report_count_list = [17, 40, 33, 44, 126, 156,
|
||||||
|
324, 333, 478, 495, 373];
|
||||||
|
|
||||||
let bar_composite_data = {
|
let bar_composite_data = {
|
||||||
"labels": ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
|
"labels": ["2007", "2008", "2009", "2010", "2011", "2012",
|
||||||
|
"2013", "2014", "2015", "2016", "2017"],
|
||||||
|
|
||||||
"datasets": [{
|
"datasets": [{
|
||||||
"color": "orange",
|
"title": "Reports",
|
||||||
"values": [50804, 10000, 20000, 61500, 72936.88, 24010, 40000, 60000, 25840, 50804.82, 16820],
|
"color": "orange",
|
||||||
"formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
|
"values": report_count_list,
|
||||||
}
|
// "formatted": report_count_list.map(d => d + " reports")
|
||||||
]
|
}]
|
||||||
}
|
};
|
||||||
|
|
||||||
let line_composite_data = {
|
let line_composite_data = {
|
||||||
"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||||
"datasets": [{
|
"datasets": [{
|
||||||
"color": "green",
|
"color": "green",
|
||||||
"values": [25, 40, 30, 35, 48, 52, 17]
|
"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
|
||||||
}
|
// "formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
|
||||||
]
|
}]
|
||||||
};
|
};
|
||||||
|
|
||||||
let more_line_data = {
|
let more_line_data = {
|
||||||
0: {values: [25, -90, -30, 35, 48, 52, -17]},
|
0: {values: [4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1]},
|
||||||
1: {values: [25, -40, -30, 35, 48, 52, 30]},
|
1: {values: [2, 3, 3, 2, 1, 4, 0, 1, 2, 7, 11, 4]},
|
||||||
2: {values: [5, 48, -52, 17, -25, 40, 30]},
|
2: {values: [7, 7, 2, 4, 0, 1, 5, 3, 1, 2, 0, 1]},
|
||||||
3: {
|
3: {values: [0, 2, 6, 2, 2, 1, 2, 3, 6, 3, 7, 10]},
|
||||||
values: [25, 40, 30, 35, 48, 52, 17]
|
4: {values: [9, 10, 8, 10, 6, 5, 8, 8, 24, 15, 10, 13]},
|
||||||
},
|
5: {values: [9, 13, 16, 9, 4, 5, 7, 10, 14, 22, 23, 24]},
|
||||||
4: {
|
6: {values: [20, 22, 28, 19, 28, 19, 14, 19, 51, 37, 29, 38]},
|
||||||
values: [35, 48, 40, 30, 52, 17, 72]
|
7: {values: [29, 20, 22, 16, 16, 19, 24, 26, 57, 31, 46, 27]},
|
||||||
},
|
8: {values: [36, 24, 38, 27, 15, 22, 24, 38, 32, 57, 139, 26]},
|
||||||
5: {
|
9: {values: [37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35]},
|
||||||
values: [5, 48, 52, 17, 72, 40, 30]
|
10: {values: [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0]}
|
||||||
},
|
};
|
||||||
6: {
|
|
||||||
values: [72, 40, 30, 35, 48, 52, 17]
|
|
||||||
},
|
|
||||||
7: {
|
|
||||||
values: [35, 48, 40, 30, 52, 17, 25]
|
|
||||||
},
|
|
||||||
8: {
|
|
||||||
values: [5, 48, 52, 17, 25, 40, 30]
|
|
||||||
},
|
|
||||||
9: {
|
|
||||||
values: [25, 40, 30, 35, 48, 52, 17]
|
|
||||||
},
|
|
||||||
10: {
|
|
||||||
values: [35, 48, 40, 30, 52, 17, 25]
|
|
||||||
},
|
|
||||||
11: {
|
|
||||||
values: [5, 48, 52, 17, 25, 40, 30]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
let bar_composite_chart = new Chart ({
|
||||||
|
parent: "#chart-composite-1",
|
||||||
|
title: "Reposrts",
|
||||||
|
data: bar_composite_data,
|
||||||
|
type: 'bar',
|
||||||
|
height: 180,
|
||||||
|
is_navigable: 1
|
||||||
|
// region_fill: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
let line_composite_chart = new Chart ({
|
||||||
|
parent: "#chart-composite-2",
|
||||||
|
data: line_composite_data,
|
||||||
|
type: 'line',
|
||||||
|
height: 180
|
||||||
|
});
|
||||||
|
|
||||||
|
bar_composite_chart.parent.addEventListener('data-select', (e) => {
|
||||||
|
line_composite_chart.update_values([more_line_data[e.index]]);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Demo Chart (bar, linepts, scatter(blobs), percentage)
|
||||||
|
// ================================================================================
|
||||||
let type_data = {
|
let type_data = {
|
||||||
"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||||
"datasets": [{
|
"datasets": [{
|
||||||
@ -72,7 +82,7 @@ let type_data = {
|
|||||||
|
|
||||||
let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
|
let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
|
||||||
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed",
|
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed",
|
||||||
"Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"];
|
"Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"];
|
||||||
let update_data_all_values = [25, 40, 30, 35, 48, 52, 17, 15, 20, -3, -15, 58,
|
let update_data_all_values = [25, 40, 30, 35, 48, 52, 17, 15, 20, -3, -15, 58,
|
||||||
12, -17, 35, 48, 40, 30, 52, 17, 25, 5, 48, 52, 17];
|
12, -17, 35, 48, 40, 30, 52, 17, 25, 5, 48, 52, 17];
|
||||||
|
|
||||||
@ -82,15 +92,14 @@ let update_data_all_indices = update_data_all_labels.map((d,i) => i);
|
|||||||
let get_update_data = (source_array, length=10) => {
|
let get_update_data = (source_array, length=10) => {
|
||||||
let indices = update_data_all_indices.slice(0, length);
|
let indices = update_data_all_indices.slice(0, length);
|
||||||
return indices.map((index) => source_array[index]);
|
return indices.map((index) => source_array[index]);
|
||||||
}
|
};
|
||||||
|
|
||||||
let update_data = {
|
let update_data = {
|
||||||
"labels": get_update_data(update_data_all_labels),
|
"labels": get_update_data(update_data_all_labels),
|
||||||
"datasets": [{
|
"datasets": [{
|
||||||
"color": "red",
|
"color": "red",
|
||||||
"values": get_update_data(update_data_all_values)
|
"values": get_update_data(update_data_all_values)
|
||||||
}
|
}],
|
||||||
],
|
|
||||||
"specific_values": [
|
"specific_values": [
|
||||||
{
|
{
|
||||||
title: "Altitude",
|
title: "Altitude",
|
||||||
@ -141,25 +150,7 @@ let heatmap_data = {
|
|||||||
|
|
||||||
// Charts
|
// Charts
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
let bar_composite_chart = new Chart ({
|
|
||||||
parent: "#chart-composite-1",
|
|
||||||
data: bar_composite_data,
|
|
||||||
type: 'bar',
|
|
||||||
height: 180,
|
|
||||||
is_navigable: 1
|
|
||||||
// region_fill: 1
|
|
||||||
})
|
|
||||||
|
|
||||||
let line_composite_chart = new Chart ({
|
|
||||||
parent: "#chart-composite-2",
|
|
||||||
data: line_composite_data,
|
|
||||||
type: 'line',
|
|
||||||
height: 180
|
|
||||||
})
|
|
||||||
|
|
||||||
bar_composite_chart.parent.addEventListener('data-select', (e) => {
|
|
||||||
line_composite_chart.update_values([more_line_data[e.index]]);
|
|
||||||
});
|
|
||||||
|
|
||||||
let type_chart = new Chart({
|
let type_chart = new Chart({
|
||||||
parent: "#chart-types",
|
parent: "#chart-types",
|
||||||
|
|||||||
@ -8,13 +8,11 @@
|
|||||||
<meta name="description" content="A simple, responsive, modern charts library for the web.">
|
<meta name="description" content="A simple, responsive, modern charts library for the web.">
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen">
|
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen">
|
||||||
<!--<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>-->
|
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
|
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen">
|
<link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen">
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
|
<link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen">
|
<link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen">
|
||||||
<!--<link rel="stylesheet" type="text/css" href="assets/css/vs.css" media="screen">-->
|
|
||||||
<link rel="stylesheet" type="text/css" href="../src/styles/charts.css" media="screen">
|
|
||||||
<script src="assets/js/highlight.pack.js"></script>
|
<script src="assets/js/highlight.pack.js"></script>
|
||||||
<script>hljs.initHighlightingOnLoad();</script>
|
<script>hljs.initHighlightingOnLoad();</script>
|
||||||
|
|
||||||
|
|||||||
3730
package-lock.json
generated
3730
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@ -7,7 +7,10 @@
|
|||||||
"doc": "docs"
|
"doc": "docs"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"watch": "rollup -c --watch",
|
||||||
|
"reload": "livereload 'dist/' -d",
|
||||||
|
"dev": "npm-run-all --parallel watch reload"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@ -28,10 +31,18 @@
|
|||||||
"babel-plugin-external-helpers": "^6.22.0",
|
"babel-plugin-external-helpers": "^6.22.0",
|
||||||
"babel-preset-env": "^1.6.1",
|
"babel-preset-env": "^1.6.1",
|
||||||
"babel-preset-latest": "^6.24.1",
|
"babel-preset-latest": "^6.24.1",
|
||||||
|
"cssnano": "^3.10.0",
|
||||||
|
"livereload": "^0.6.3",
|
||||||
|
"npm-run-all": "^4.1.1",
|
||||||
|
"postcss-cssnext": "^3.0.2",
|
||||||
|
"postcss-nested": "^2.1.2",
|
||||||
"rollup": "^0.50.0",
|
"rollup": "^0.50.0",
|
||||||
"rollup-plugin-babel": "^3.0.2",
|
"rollup-plugin-babel": "^3.0.2",
|
||||||
"rollup-plugin-eslint": "^4.0.0",
|
"rollup-plugin-eslint": "^4.0.0",
|
||||||
"rollup-plugin-node-resolve": "^3.0.0",
|
"rollup-plugin-node-resolve": "^3.0.0",
|
||||||
"rollup-plugin-uglify": "^2.0.1"
|
"rollup-plugin-postcss": "^0.5.5",
|
||||||
|
"rollup-plugin-replace": "^2.0.0",
|
||||||
|
"rollup-plugin-uglify": "^2.0.1",
|
||||||
|
"rollup-watch": "^4.3.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,14 @@
|
|||||||
// Rollup plugins
|
// Rollup plugins
|
||||||
import babel from 'rollup-plugin-babel';
|
import babel from 'rollup-plugin-babel';
|
||||||
import eslint from 'rollup-plugin-eslint';
|
import eslint from 'rollup-plugin-eslint';
|
||||||
|
import replace from 'rollup-plugin-replace';
|
||||||
import uglify from 'rollup-plugin-uglify';
|
import uglify from 'rollup-plugin-uglify';
|
||||||
|
import postcss from 'rollup-plugin-postcss';
|
||||||
|
|
||||||
|
// PostCSS plugins
|
||||||
|
import nested from 'postcss-nested';
|
||||||
|
import cssnext from 'postcss-cssnext';
|
||||||
|
import cssnano from 'cssnano';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
input: 'src/scripts/charts.js',
|
input: 'src/scripts/charts.js',
|
||||||
@ -12,10 +19,26 @@ export default {
|
|||||||
name: 'Chart',
|
name: 'Chart',
|
||||||
sourcemap: 'true',
|
sourcemap: 'true',
|
||||||
plugins: [
|
plugins: [
|
||||||
eslint(),
|
postcss({
|
||||||
|
extensions: [ '.less' ],
|
||||||
|
plugins: [
|
||||||
|
nested(),
|
||||||
|
cssnext({ warnForDuplicates: false }),
|
||||||
|
cssnano()
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
eslint({
|
||||||
|
exclude: [
|
||||||
|
'src/styles/**',
|
||||||
|
]
|
||||||
|
}),
|
||||||
babel({
|
babel({
|
||||||
exclude: 'node_modules/**',
|
exclude: 'node_modules/**',
|
||||||
}),
|
}),
|
||||||
|
replace({
|
||||||
|
exclude: 'node_modules/**',
|
||||||
|
ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
|
||||||
|
}),
|
||||||
uglify()
|
uglify()
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,8 +1,18 @@
|
|||||||
|
import '../styles/charts.less';
|
||||||
|
|
||||||
import BarChart from './charts/BarChart';
|
import BarChart from './charts/BarChart';
|
||||||
import LineChart from './charts/LineChart';
|
import LineChart from './charts/LineChart';
|
||||||
import PercentageChart from './charts/PercentageChart';
|
import PercentageChart from './charts/PercentageChart';
|
||||||
import Heatmap from './charts/Heatmap';
|
import Heatmap from './charts/Heatmap';
|
||||||
|
|
||||||
|
if (ENV !== 'production') {
|
||||||
|
// Enable LiveReload
|
||||||
|
document.write(
|
||||||
|
'<script src="http://' + (location.host || 'localhost').split(':')[0] +
|
||||||
|
':35729/livereload.js?snipver=1"></' + 'script>'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default class Chart {
|
export default class Chart {
|
||||||
constructor(args) {
|
constructor(args) {
|
||||||
if(args.type === 'line') {
|
if(args.type === 'line') {
|
||||||
|
|||||||
@ -14,6 +14,7 @@ export default class BaseChart {
|
|||||||
summary = [],
|
summary = [],
|
||||||
|
|
||||||
is_navigable = 0,
|
is_navigable = 0,
|
||||||
|
has_legend = 0,
|
||||||
|
|
||||||
type = '' // eslint-disable-line no-unused-vars
|
type = '' // eslint-disable-line no-unused-vars
|
||||||
}) {
|
}) {
|
||||||
@ -33,6 +34,7 @@ export default class BaseChart {
|
|||||||
if(this.is_navigable) {
|
if(this.is_navigable) {
|
||||||
this.current_index = 0;
|
this.current_index = 0;
|
||||||
}
|
}
|
||||||
|
this.has_legend = has_legend;
|
||||||
|
|
||||||
this.chart_types = ['line', 'bar', 'percentage', 'heatmap'];
|
this.chart_types = ['line', 'bar', 'percentage', 'heatmap'];
|
||||||
|
|
||||||
|
|||||||
@ -1,456 +0,0 @@
|
|||||||
/* graphs */
|
|
||||||
.chart-container {
|
|
||||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
||||||
}
|
|
||||||
.chart-container .graph-focus-margin {
|
|
||||||
margin: 0px 5%;
|
|
||||||
}
|
|
||||||
.chart-container .graphics {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.chart-container .graph-stats-group {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.chart-container .graph-stats-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
.chart-container .graph-stats-container .stats {
|
|
||||||
padding-bottom: 15px;
|
|
||||||
}
|
|
||||||
.chart-container .graph-stats-container .stats-title {
|
|
||||||
color: #8D99A6;
|
|
||||||
}
|
|
||||||
.chart-container .graph-stats-container .stats-value {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
.chart-container .graph-stats-container .stats-description {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #8D99A6;
|
|
||||||
}
|
|
||||||
.chart-container .graph-stats-container .graph-data .stats-value {
|
|
||||||
color: #98d85b;
|
|
||||||
}
|
|
||||||
.chart-container .axis,
|
|
||||||
.chart-container .chart-label {
|
|
||||||
font-size: 10px;
|
|
||||||
fill: #555b51;
|
|
||||||
}
|
|
||||||
.chart-container .axis line,
|
|
||||||
.chart-container .chart-label line {
|
|
||||||
stroke: #dadada;
|
|
||||||
}
|
|
||||||
.chart-container .percentage-graph .progress {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
.chart-container .data-points circle {
|
|
||||||
stroke: #fff;
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.chart-container .path-group path {
|
|
||||||
fill: none;
|
|
||||||
stroke-opacity: 1;
|
|
||||||
stroke-width: 2px;
|
|
||||||
}
|
|
||||||
.chart-container line.dashed {
|
|
||||||
stroke-dasharray: 5,3;
|
|
||||||
}
|
|
||||||
.chart-container .tick.x-axis-label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.chart-container .tick .specific-value {
|
|
||||||
text-anchor: start;
|
|
||||||
}
|
|
||||||
.chart-container .tick .y-value-text {
|
|
||||||
text-anchor: end;
|
|
||||||
}
|
|
||||||
.chart-container .tick .x-value-text {
|
|
||||||
text-anchor: middle;
|
|
||||||
}
|
|
||||||
.chart-container .progress {
|
|
||||||
height: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-radius: 4px;
|
|
||||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
|
|
||||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
|
|
||||||
}
|
|
||||||
.chart-container .progress-bar {
|
|
||||||
float: left;
|
|
||||||
width: 0;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 20px;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #36414c;
|
|
||||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
|
|
||||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
|
|
||||||
-webkit-transition: width .6s ease;
|
|
||||||
-o-transition: width .6s ease;
|
|
||||||
transition: width .6s ease;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.graph-svg-tip.comparison {
|
|
||||||
padding: 0;
|
|
||||||
text-align: left;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.graph-svg-tip.comparison .title {
|
|
||||||
display: block;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.graph-svg-tip.comparison ul {
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
.graph-svg-tip.comparison li {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 5px 10px;
|
|
||||||
}
|
|
||||||
.graph-svg-tip ul,
|
|
||||||
.graph-svg-tip ol {
|
|
||||||
padding-left: 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.graph-svg-tip ul.data-point-list li {
|
|
||||||
min-width: 90px;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.graph-svg-tip strong {
|
|
||||||
color: #dfe2e5;
|
|
||||||
}
|
|
||||||
.graph-svg-tip .svg-pointer {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Indicators*/
|
|
||||||
.indicator,
|
|
||||||
.indicator-right {
|
|
||||||
background: none;
|
|
||||||
font-size: 12px;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #6c7680;
|
|
||||||
}
|
|
||||||
.indicator::before,
|
|
||||||
.indicator-right::after {
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
height: 8px;
|
|
||||||
width: 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
.indicator::before {
|
|
||||||
margin: 0 4px 0 0px;
|
|
||||||
}
|
|
||||||
.indicator-right::after {
|
|
||||||
margin: 0 0 0 4px;
|
|
||||||
}
|
|
||||||
.indicator.grey::before,
|
|
||||||
.indicator-right.grey::after {
|
|
||||||
background: #bdd3e6;
|
|
||||||
}
|
|
||||||
.indicator.light-grey::before,
|
|
||||||
.indicator-right.light-grey::after {
|
|
||||||
background: #F0F4F7;
|
|
||||||
}
|
|
||||||
.indicator.blue::before,
|
|
||||||
.indicator-right.blue::after {
|
|
||||||
background: #5e64ff;
|
|
||||||
}
|
|
||||||
.indicator.red::before,
|
|
||||||
.indicator-right.red::after {
|
|
||||||
background: #ff5858;
|
|
||||||
}
|
|
||||||
.indicator.green::before,
|
|
||||||
.indicator-right.green::after {
|
|
||||||
background: #28a745;
|
|
||||||
}
|
|
||||||
.indicator.light-green::before,
|
|
||||||
.indicator-right.light-green::after {
|
|
||||||
background: #98d85b;
|
|
||||||
}
|
|
||||||
.indicator.orange::before,
|
|
||||||
.indicator-right.orange::after {
|
|
||||||
background: #ffa00a;
|
|
||||||
}
|
|
||||||
.indicator.violet::before,
|
|
||||||
.indicator-right.violet::after {
|
|
||||||
background: #743ee2;
|
|
||||||
}
|
|
||||||
.indicator.darkgrey::before,
|
|
||||||
.indicator-right.darkgrey::after {
|
|
||||||
background: #b8c2cc;
|
|
||||||
}
|
|
||||||
.indicator.black::before,
|
|
||||||
.indicator-right.black::after {
|
|
||||||
background: #36414C;
|
|
||||||
}
|
|
||||||
.indicator.yellow::before,
|
|
||||||
.indicator-right.yellow::after {
|
|
||||||
background: #FEEF72;
|
|
||||||
}
|
|
||||||
.indicator.light-blue::before,
|
|
||||||
.indicator-right.light-blue::after {
|
|
||||||
background: #7CD6FD;
|
|
||||||
}
|
|
||||||
.indicator.light-blue::before,
|
|
||||||
.indicator-right.light-blue::after {
|
|
||||||
background: #7CD6FD;
|
|
||||||
}
|
|
||||||
.indicator.purple::before,
|
|
||||||
.indicator-right.purple::after {
|
|
||||||
background: #b554ff;
|
|
||||||
}
|
|
||||||
.indicator.magenta::before,
|
|
||||||
.indicator-right.magenta::after {
|
|
||||||
background: #ffa3ef;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Svg properties colors*/
|
|
||||||
.stroke.grey {
|
|
||||||
stroke: #bdd3e6;
|
|
||||||
}
|
|
||||||
.stroke.light-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.violet {
|
|
||||||
stroke: #743ee2;
|
|
||||||
}
|
|
||||||
.stroke.darkgrey {
|
|
||||||
stroke: #b8c2cc;
|
|
||||||
}
|
|
||||||
.stroke.black {
|
|
||||||
stroke: #36414C;
|
|
||||||
}
|
|
||||||
.stroke.yellow {
|
|
||||||
stroke: #FEEF72;
|
|
||||||
}
|
|
||||||
.stroke.light-blue {
|
|
||||||
stroke: #7CD6FD;
|
|
||||||
}
|
|
||||||
.stroke.purple {
|
|
||||||
stroke: #b554ff;
|
|
||||||
}
|
|
||||||
.stroke.magenta {
|
|
||||||
stroke: #ffa3ef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fill.grey {
|
|
||||||
fill: #bdd3e6;
|
|
||||||
}
|
|
||||||
.fill.light-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.violet {
|
|
||||||
fill: #743ee2;
|
|
||||||
}
|
|
||||||
.fill.darkgrey {
|
|
||||||
fill: #b8c2cc;
|
|
||||||
}
|
|
||||||
.fill.black {
|
|
||||||
fill: #36414C;
|
|
||||||
}
|
|
||||||
.fill.yellow {
|
|
||||||
fill: #FEEF72;
|
|
||||||
}
|
|
||||||
.fill.light-blue {
|
|
||||||
fill: #7CD6FD;
|
|
||||||
}
|
|
||||||
.fill.purple {
|
|
||||||
fill: #b554ff;
|
|
||||||
}
|
|
||||||
.fill.magenta {
|
|
||||||
fill: #ffa3ef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background.grey {
|
|
||||||
background: #bdd3e6;
|
|
||||||
}
|
|
||||||
.background.light-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.violet {
|
|
||||||
background: #743ee2;
|
|
||||||
}
|
|
||||||
.background.darkgrey {
|
|
||||||
background: #b8c2cc;
|
|
||||||
}
|
|
||||||
.background.black {
|
|
||||||
background: #36414C;
|
|
||||||
}
|
|
||||||
.background.yellow {
|
|
||||||
background: #FEEF72;
|
|
||||||
}
|
|
||||||
.background.light-blue {
|
|
||||||
background: #7CD6FD;
|
|
||||||
}
|
|
||||||
.background.purple{
|
|
||||||
background: #b554ff;
|
|
||||||
}
|
|
||||||
.background.magenta{
|
|
||||||
background: #ffa3ef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-top.grey {
|
|
||||||
border-top: 3px solid #bdd3e6;
|
|
||||||
}
|
|
||||||
.border-top.light-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.violet {
|
|
||||||
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.purple {
|
|
||||||
border-top: 3px solid #b554ff;
|
|
||||||
}
|
|
||||||
.border-top.magenta {
|
|
||||||
border-top: 3px solid #ffa3ef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stop-color.grey {
|
|
||||||
stop-color: #bdd3e6;
|
|
||||||
}
|
|
||||||
.stop-color.light-grey {
|
|
||||||
stop-color: #F0F4F7;
|
|
||||||
}
|
|
||||||
.stop-color.blue {
|
|
||||||
stop-color: #5e64ff;
|
|
||||||
}
|
|
||||||
.stop-color.red {
|
|
||||||
stop-color: #ff5858;
|
|
||||||
}
|
|
||||||
.stop-color.light-green {
|
|
||||||
stop-color: #98d85b;
|
|
||||||
}
|
|
||||||
.stop-color.green {
|
|
||||||
stop-color: #28a745;
|
|
||||||
}
|
|
||||||
.stop-color.orange {
|
|
||||||
stop-color: #ffa00a;
|
|
||||||
}
|
|
||||||
.stop-color.violet {
|
|
||||||
stop-color: #743ee2;
|
|
||||||
}
|
|
||||||
.stop-color.darkgrey {
|
|
||||||
stop-color: #b8c2cc;
|
|
||||||
}
|
|
||||||
.stop-color.black {
|
|
||||||
stop-color: #36414C;
|
|
||||||
}
|
|
||||||
.stop-color.yellow {
|
|
||||||
stop-color: #FEEF72;
|
|
||||||
}
|
|
||||||
.stop-color.light-blue {
|
|
||||||
stop-color: #7CD6FD;
|
|
||||||
}
|
|
||||||
.stop-color.purple {
|
|
||||||
stop-color: #b554ff;
|
|
||||||
}
|
|
||||||
.stop-color.magenta {
|
|
||||||
stop-color: #ffa3ef;
|
|
||||||
}
|
|
||||||
|
|
||||||
437
src/styles/charts.less
Normal file
437
src/styles/charts.less
Normal file
@ -0,0 +1,437 @@
|
|||||||
|
.chart-container {
|
||||||
|
font-family: "Roboto", "Geneva", Tahoma, sans-serif;
|
||||||
|
.graph-focus-margin {
|
||||||
|
margin: 0px 5%;
|
||||||
|
}
|
||||||
|
.graphics {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.axis, .chart-label {
|
||||||
|
font-size: 10px;
|
||||||
|
fill: #555b51;
|
||||||
|
line {
|
||||||
|
stroke: #dadada;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.percentage-graph {
|
||||||
|
.progress {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data-points {
|
||||||
|
circle {
|
||||||
|
stroke: #fff;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.path-group {
|
||||||
|
path {
|
||||||
|
fill: none;
|
||||||
|
stroke-opacity: 1;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
line.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.progress {
|
||||||
|
height: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
|
||||||
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
|
||||||
|
}
|
||||||
|
.progress-bar {
|
||||||
|
float: left;
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #36414c;
|
||||||
|
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||||
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||||
|
-webkit-transition: width .6s ease;
|
||||||
|
-o-transition: width .6s ease;
|
||||||
|
transition: width .6s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
ul {
|
||||||
|
padding-left: 0;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
padding-left: 0;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
ul.data-point-list {
|
||||||
|
li {
|
||||||
|
min-width: 90px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
strong {
|
||||||
|
color: #dfe2e5;
|
||||||
|
}
|
||||||
|
.svg-pointer {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
&.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Indicators*/
|
||||||
|
.indicator,
|
||||||
|
.indicator-right {
|
||||||
|
background: none;
|
||||||
|
font-size: 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #6c7680;
|
||||||
|
}
|
||||||
|
.indicator::before,
|
||||||
|
.indicator-right::after {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.indicator::before {
|
||||||
|
margin: 0 4px 0 0px;
|
||||||
|
}
|
||||||
|
.indicator-right::after {
|
||||||
|
margin: 0 0 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background.grey,
|
||||||
|
.indicator.grey::before,
|
||||||
|
.indicator-right.grey::after {
|
||||||
|
background: #bdd3e6;
|
||||||
|
}
|
||||||
|
.background.light-grey,
|
||||||
|
.indicator.light-grey::before,
|
||||||
|
.indicator-right.light-grey::after {
|
||||||
|
background: #F0F4F7;
|
||||||
|
}
|
||||||
|
.background.blue,
|
||||||
|
.indicator.blue::before,
|
||||||
|
.indicator-right.blue::after {
|
||||||
|
background: #5e64ff;
|
||||||
|
}
|
||||||
|
.background.red,
|
||||||
|
.indicator.red::before,
|
||||||
|
.indicator-right.red::after {
|
||||||
|
background: #ff5858;
|
||||||
|
}
|
||||||
|
.background.green,
|
||||||
|
.indicator.green::before,
|
||||||
|
.indicator-right.green::after {
|
||||||
|
background: #28a745;
|
||||||
|
}
|
||||||
|
.background.light-green,
|
||||||
|
.indicator.light-green::before,
|
||||||
|
.indicator-right.light-green::after {
|
||||||
|
background: #98d85b;
|
||||||
|
}
|
||||||
|
.background.orange,
|
||||||
|
.indicator.orange::before,
|
||||||
|
.indicator-right.orange::after {
|
||||||
|
background: #ffa00a;
|
||||||
|
}
|
||||||
|
.background.violet,
|
||||||
|
.indicator.violet::before,
|
||||||
|
.indicator-right.violet::after {
|
||||||
|
background: #743ee2;
|
||||||
|
}
|
||||||
|
.background.dark-grey,
|
||||||
|
.indicator.dark-grey::before,
|
||||||
|
.indicator-right.dark-grey::after {
|
||||||
|
background: #b8c2cc;
|
||||||
|
}
|
||||||
|
.background.black,
|
||||||
|
.indicator.black::before,
|
||||||
|
.indicator-right.black::after {
|
||||||
|
background: #36414C;
|
||||||
|
}
|
||||||
|
.background.yellow,
|
||||||
|
.indicator.yellow::before,
|
||||||
|
.indicator-right.yellow::after {
|
||||||
|
background: #FEEF72;
|
||||||
|
}
|
||||||
|
.background.light-blue,
|
||||||
|
.indicator.light-blue::before,
|
||||||
|
.indicator-right.light-blue::after {
|
||||||
|
background: #7CD6FD;
|
||||||
|
}
|
||||||
|
.background.purple,
|
||||||
|
.indicator.purple::before,
|
||||||
|
.indicator-right.purple::after {
|
||||||
|
background: #b554ff;
|
||||||
|
}
|
||||||
|
.background.magenta,
|
||||||
|
.indicator.magenta::before,
|
||||||
|
.indicator-right.magenta::after {
|
||||||
|
background: #ffa3ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Svg properties colors*/
|
||||||
|
.stroke.grey {
|
||||||
|
stroke: #bdd3e6;
|
||||||
|
}
|
||||||
|
.stroke.light-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.violet {
|
||||||
|
stroke: #743ee2;
|
||||||
|
}
|
||||||
|
.stroke.dark-grey {
|
||||||
|
stroke: #b8c2cc;
|
||||||
|
}
|
||||||
|
.stroke.black {
|
||||||
|
stroke: #36414C;
|
||||||
|
}
|
||||||
|
.stroke.yellow {
|
||||||
|
stroke: #FEEF72;
|
||||||
|
}
|
||||||
|
.stroke.light-blue {
|
||||||
|
stroke: #7CD6FD;
|
||||||
|
}
|
||||||
|
.stroke.purple {
|
||||||
|
stroke: #b554ff;
|
||||||
|
}
|
||||||
|
.stroke.magenta {
|
||||||
|
stroke: #ffa3ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill.grey {
|
||||||
|
fill: #bdd3e6;
|
||||||
|
}
|
||||||
|
.fill.light-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.violet {
|
||||||
|
fill: #743ee2;
|
||||||
|
}
|
||||||
|
.fill.dark-grey {
|
||||||
|
fill: #b8c2cc;
|
||||||
|
}
|
||||||
|
.fill.black {
|
||||||
|
fill: #36414C;
|
||||||
|
}
|
||||||
|
.fill.yellow {
|
||||||
|
fill: #FEEF72;
|
||||||
|
}
|
||||||
|
.fill.light-blue {
|
||||||
|
fill: #7CD6FD;
|
||||||
|
}
|
||||||
|
.fill.purple {
|
||||||
|
fill: #b554ff;
|
||||||
|
}
|
||||||
|
.fill.magenta {
|
||||||
|
fill: #ffa3ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-top.grey {
|
||||||
|
border-top: 3px solid #bdd3e6;
|
||||||
|
}
|
||||||
|
.border-top.light-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.violet {
|
||||||
|
border-top: 3px solid #743ee2;
|
||||||
|
}
|
||||||
|
.border-top.dark-grey {
|
||||||
|
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.purple {
|
||||||
|
border-top: 3px solid #b554ff;
|
||||||
|
}
|
||||||
|
.border-top.magenta {
|
||||||
|
border-top: 3px solid #ffa3ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stop-color.grey {
|
||||||
|
stop-color: #bdd3e6;
|
||||||
|
}
|
||||||
|
.stop-color.light-grey {
|
||||||
|
stop-color: #F0F4F7;
|
||||||
|
}
|
||||||
|
.stop-color.blue {
|
||||||
|
stop-color: #5e64ff;
|
||||||
|
}
|
||||||
|
.stop-color.red {
|
||||||
|
stop-color: #ff5858;
|
||||||
|
}
|
||||||
|
.stop-color.light-green {
|
||||||
|
stop-color: #98d85b;
|
||||||
|
}
|
||||||
|
.stop-color.green {
|
||||||
|
stop-color: #28a745;
|
||||||
|
}
|
||||||
|
.stop-color.orange {
|
||||||
|
stop-color: #ffa00a;
|
||||||
|
}
|
||||||
|
.stop-color.violet {
|
||||||
|
stop-color: #743ee2;
|
||||||
|
}
|
||||||
|
.stop-color.dark-grey {
|
||||||
|
stop-color: #b8c2cc;
|
||||||
|
}
|
||||||
|
.stop-color.black {
|
||||||
|
stop-color: #36414C;
|
||||||
|
}
|
||||||
|
.stop-color.yellow {
|
||||||
|
stop-color: #FEEF72;
|
||||||
|
}
|
||||||
|
.stop-color.light-blue {
|
||||||
|
stop-color: #7CD6FD;
|
||||||
|
}
|
||||||
|
.stop-color.purple {
|
||||||
|
stop-color: #b554ff;
|
||||||
|
}
|
||||||
|
.stop-color.magenta {
|
||||||
|
stop-color: #ffa3ef;
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user