Update docs: dom element as parent, heatmap today fix
This commit is contained in:
pratu16x7
parent
065fc297f8
commit
462d87c54b
@ -65,7 +65,7 @@ const data = {
|
||||
}
|
||||
|
||||
const chart = new Chart({
|
||||
parent: '#chart',
|
||||
parent: '#chart', // or a DOM element
|
||||
title: "My Awesome Chart",
|
||||
data: data,
|
||||
type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
|
||||
|
||||
21
dist/frappe-charts.min.cjs.js
vendored
21
dist/frappe-charts.min.cjs.js
vendored
@ -633,9 +633,11 @@ var SvgTip = function () {
|
||||
}, {
|
||||
key: 'calc_position',
|
||||
value: function calc_position() {
|
||||
var width = this.container.offsetWidth;
|
||||
|
||||
this.top = this.y - this.container.offsetHeight;
|
||||
this.left = this.x - this.container.offsetWidth / 2;
|
||||
var max_left = this.parent.offsetWidth - this.container.offsetWidth;
|
||||
this.left = this.x - width / 2;
|
||||
var max_left = this.parent.offsetWidth - width;
|
||||
|
||||
var pointer = this.container.querySelector('.svg-pointer');
|
||||
|
||||
@ -644,7 +646,9 @@ var SvgTip = function () {
|
||||
this.left = 0;
|
||||
} else if (this.left > max_left) {
|
||||
var delta = this.left - max_left;
|
||||
pointer.style.left = 'calc(50% + ' + delta + 'px)';
|
||||
var pointer_offset = 'calc(50% + ' + delta + 'px)';
|
||||
pointer.style.left = pointer_offset;
|
||||
|
||||
this.left = max_left;
|
||||
} else {
|
||||
pointer.style.left = '50%';
|
||||
@ -3024,6 +3028,7 @@ var Heatmap = function (_BaseChart) {
|
||||
var square_side = 10;
|
||||
var cell_padding = 2;
|
||||
var step = 1;
|
||||
var today_time = this.today.getTime();
|
||||
|
||||
var month_change = 0;
|
||||
var week_col_change = 0;
|
||||
@ -3067,6 +3072,8 @@ var Heatmap = function (_BaseChart) {
|
||||
|
||||
var next_date = new Date(current_date);
|
||||
this.add_days(next_date, 1);
|
||||
if (next_date.getTime() > today_time) break;
|
||||
|
||||
if (next_date.getMonth() - current_date.getMonth()) {
|
||||
month_change = 1;
|
||||
if (this.discrete_domains) {
|
||||
@ -3235,14 +3242,6 @@ var Heatmap = function (_BaseChart) {
|
||||
return Heatmap;
|
||||
}(BaseChart);
|
||||
|
||||
// if ("development" !== 'production') {
|
||||
// // Enable LiveReload
|
||||
// document.write(
|
||||
// '<script src="http://' + (location.host || 'localhost').split(':')[0] +
|
||||
// ':35729/livereload.js?snipver=1"></' + 'script>'
|
||||
// );
|
||||
// }
|
||||
|
||||
var chartTypes = {
|
||||
line: LineChart,
|
||||
bar: BarChart,
|
||||
|
||||
2
dist/frappe-charts.min.css
vendored
2
dist/frappe-charts.min.css
vendored
File diff suppressed because one or more lines are too long
21
dist/frappe-charts.min.esm.js
vendored
21
dist/frappe-charts.min.esm.js
vendored
@ -631,9 +631,11 @@ var SvgTip = function () {
|
||||
}, {
|
||||
key: 'calc_position',
|
||||
value: function calc_position() {
|
||||
var width = this.container.offsetWidth;
|
||||
|
||||
this.top = this.y - this.container.offsetHeight;
|
||||
this.left = this.x - this.container.offsetWidth / 2;
|
||||
var max_left = this.parent.offsetWidth - this.container.offsetWidth;
|
||||
this.left = this.x - width / 2;
|
||||
var max_left = this.parent.offsetWidth - width;
|
||||
|
||||
var pointer = this.container.querySelector('.svg-pointer');
|
||||
|
||||
@ -642,7 +644,9 @@ var SvgTip = function () {
|
||||
this.left = 0;
|
||||
} else if (this.left > max_left) {
|
||||
var delta = this.left - max_left;
|
||||
pointer.style.left = 'calc(50% + ' + delta + 'px)';
|
||||
var pointer_offset = 'calc(50% + ' + delta + 'px)';
|
||||
pointer.style.left = pointer_offset;
|
||||
|
||||
this.left = max_left;
|
||||
} else {
|
||||
pointer.style.left = '50%';
|
||||
@ -3022,6 +3026,7 @@ var Heatmap = function (_BaseChart) {
|
||||
var square_side = 10;
|
||||
var cell_padding = 2;
|
||||
var step = 1;
|
||||
var today_time = this.today.getTime();
|
||||
|
||||
var month_change = 0;
|
||||
var week_col_change = 0;
|
||||
@ -3065,6 +3070,8 @@ var Heatmap = function (_BaseChart) {
|
||||
|
||||
var next_date = new Date(current_date);
|
||||
this.add_days(next_date, 1);
|
||||
if (next_date.getTime() > today_time) break;
|
||||
|
||||
if (next_date.getMonth() - current_date.getMonth()) {
|
||||
month_change = 1;
|
||||
if (this.discrete_domains) {
|
||||
@ -3233,14 +3240,6 @@ var Heatmap = function (_BaseChart) {
|
||||
return Heatmap;
|
||||
}(BaseChart);
|
||||
|
||||
// if ("development" !== 'production') {
|
||||
// // Enable LiveReload
|
||||
// document.write(
|
||||
// '<script src="http://' + (location.host || 'localhost').split(':')[0] +
|
||||
// ':35729/livereload.js?snipver=1"></' + 'script>'
|
||||
// );
|
||||
// }
|
||||
|
||||
var chartTypes = {
|
||||
line: LineChart,
|
||||
bar: BarChart,
|
||||
|
||||
2
dist/frappe-charts.min.iife.js
vendored
2
dist/frappe-charts.min.iife.js
vendored
File diff suppressed because one or more lines are too long
2
docs/assets/js/frappe-charts.min.js
vendored
2
docs/assets/js/frappe-charts.min.js
vendored
File diff suppressed because one or more lines are too long
@ -38,8 +38,11 @@ let more_line_data = {
|
||||
10: {values: [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0]}
|
||||
};
|
||||
|
||||
let c1 = document.querySelector("#chart-composite-1");
|
||||
let c2 = document.querySelector("#chart-composite-2");
|
||||
|
||||
let bar_composite_chart = new Chart ({
|
||||
parent: "#chart-composite-1",
|
||||
parent: c1,
|
||||
title: "Fireball/Bolide Events - Yearly (more than 5 reports)",
|
||||
data: bar_composite_data,
|
||||
type: 'bar',
|
||||
@ -50,7 +53,7 @@ let bar_composite_chart = new Chart ({
|
||||
});
|
||||
|
||||
let line_composite_chart = new Chart ({
|
||||
parent: "#chart-composite-2",
|
||||
parent: c2,
|
||||
data: line_composite_data,
|
||||
type: 'line',
|
||||
height: 180,
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
};
|
||||
|
||||
let chart = new Chart({
|
||||
parent: "#chart",
|
||||
parent: "#chart", // or a DOM element
|
||||
title: "My Awesome Chart",
|
||||
data: data,
|
||||
type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
|
||||
|
||||
@ -111,6 +111,7 @@ export default class Heatmap extends BaseChart {
|
||||
const square_side = 10;
|
||||
const cell_padding = 2;
|
||||
const step = 1;
|
||||
const today_time = this.today.getTime();
|
||||
|
||||
let month_change = 0;
|
||||
let week_col_change = 0;
|
||||
@ -154,6 +155,9 @@ export default class Heatmap extends BaseChart {
|
||||
|
||||
let next_date = new Date(current_date);
|
||||
this.add_days(next_date, 1);
|
||||
if(next_date.getTime() > today_time) break;
|
||||
|
||||
|
||||
if(next_date.getMonth() - current_date.getMonth()) {
|
||||
month_change = 1;
|
||||
if(this.discrete_domains) {
|
||||
|
||||
@ -69,9 +69,11 @@ export default class SvgTip {
|
||||
}
|
||||
|
||||
calc_position() {
|
||||
let width = this.container.offsetWidth;
|
||||
|
||||
this.top = this.y - this.container.offsetHeight;
|
||||
this.left = this.x - this.container.offsetWidth/2;
|
||||
let max_left = this.parent.offsetWidth - this.container.offsetWidth;
|
||||
this.left = this.x - width/2;
|
||||
let max_left = this.parent.offsetWidth - width;
|
||||
|
||||
let pointer = this.container.querySelector('.svg-pointer');
|
||||
|
||||
@ -80,7 +82,9 @@ export default class SvgTip {
|
||||
this.left = 0;
|
||||
} else if(this.left > max_left) {
|
||||
let delta = this.left - max_left;
|
||||
pointer.style.left = `calc(50% + ${delta}px)`;
|
||||
let pointer_offset = `calc(50% + ${delta}px)`;
|
||||
pointer.style.left = pointer_offset;
|
||||
|
||||
this.left = max_left;
|
||||
} else {
|
||||
pointer.style.left = `50%`;
|
||||
|
||||
@ -45,6 +45,8 @@
|
||||
color: #98d85b;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.axis, .chart-label {
|
||||
font-size: 11px;
|
||||
@ -112,351 +114,352 @@
|
||||
-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;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
strong {
|
||||
color: #dfe2e5;
|
||||
font-weight: 600;
|
||||
}
|
||||
.svg-pointer {
|
||||
.graph-svg-tip {
|
||||
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;
|
||||
}
|
||||
z-index: 99999;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
color: #959da5;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 3px;
|
||||
ul {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
ol {
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
}
|
||||
ul.data-point-list {
|
||||
li {
|
||||
min-width: 90px;
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
strong {
|
||||
color: #dfe2e5;
|
||||
font-weight: 600;
|
||||
}
|
||||
.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 i ,
|
||||
.indicator-right::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.indicator::before,.indicator i {
|
||||
margin: 0 4px 0 0px;
|
||||
}
|
||||
.indicator-right::after {
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
|
||||
.background.grey,
|
||||
.indicator.grey::before,
|
||||
.indicator.grey i,
|
||||
.indicator-right.grey::after {
|
||||
background: #bdd3e6;
|
||||
}
|
||||
.background.light-grey,
|
||||
.indicator.light-grey::before,
|
||||
.indicator.light-grey i,
|
||||
.indicator-right.light-grey::after {
|
||||
background: #F0F4F7;
|
||||
}
|
||||
.background.blue,
|
||||
.indicator.blue::before,
|
||||
.indicator.blue i,
|
||||
.indicator-right.blue::after {
|
||||
background: #5e64ff;
|
||||
}
|
||||
.background.red,
|
||||
.indicator.red::before,
|
||||
.indicator.red i,
|
||||
.indicator-right.red::after {
|
||||
background: #ff5858;
|
||||
}
|
||||
.background.green,
|
||||
.indicator.green::before,
|
||||
.indicator.green i,
|
||||
.indicator-right.green::after {
|
||||
background: #28a745;
|
||||
}
|
||||
.background.light-green,
|
||||
.indicator.light-green::before,
|
||||
.indicator.light-green i,
|
||||
.indicator-right.light-green::after {
|
||||
background: #98d85b;
|
||||
}
|
||||
.background.orange,
|
||||
.indicator.orange::before,
|
||||
.indicator.orange i,
|
||||
.indicator-right.orange::after {
|
||||
background: #ffa00a;
|
||||
}
|
||||
.background.violet,
|
||||
.indicator.violet::before,
|
||||
.indicator.violet i,
|
||||
.indicator-right.violet::after {
|
||||
background: #743ee2;
|
||||
}
|
||||
.background.dark-grey,
|
||||
.indicator.dark-grey::before,
|
||||
.indicator.dark-grey i,
|
||||
.indicator-right.dark-grey::after {
|
||||
background: #b8c2cc;
|
||||
}
|
||||
.background.black,
|
||||
.indicator.black::before,
|
||||
.indicator.black i,
|
||||
.indicator-right.black::after {
|
||||
background: #36414C;
|
||||
}
|
||||
.background.yellow,
|
||||
.indicator.yellow::before,
|
||||
.indicator.yellow i,
|
||||
.indicator-right.yellow::after {
|
||||
background: #FEEF72;
|
||||
}
|
||||
.background.light-blue,
|
||||
.indicator.light-blue::before,
|
||||
.indicator.light-blue i,
|
||||
.indicator-right.light-blue::after {
|
||||
background: #7CD6FD;
|
||||
}
|
||||
.background.purple,
|
||||
.indicator.purple::before,
|
||||
.indicator.purple i,
|
||||
.indicator-right.purple::after {
|
||||
background: #b554ff;
|
||||
}
|
||||
.background.magenta,
|
||||
.indicator.magenta::before,
|
||||
.indicator.magenta i,
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/*Indicators*/
|
||||
.indicator,
|
||||
.indicator-right {
|
||||
background: none;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
color: #6c7680;
|
||||
}
|
||||
.indicator::before,
|
||||
.indicator i ,
|
||||
.indicator-right::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.indicator::before,.indicator i {
|
||||
margin: 0 4px 0 0px;
|
||||
}
|
||||
.indicator-right::after {
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
|
||||
.background.grey,
|
||||
.indicator.grey::before,
|
||||
.indicator.grey i,
|
||||
.indicator-right.grey::after {
|
||||
background: #bdd3e6;
|
||||
}
|
||||
.background.light-grey,
|
||||
.indicator.light-grey::before,
|
||||
.indicator.light-grey i,
|
||||
.indicator-right.light-grey::after {
|
||||
background: #F0F4F7;
|
||||
}
|
||||
.background.blue,
|
||||
.indicator.blue::before,
|
||||
.indicator.blue i,
|
||||
.indicator-right.blue::after {
|
||||
background: #5e64ff;
|
||||
}
|
||||
.background.red,
|
||||
.indicator.red::before,
|
||||
.indicator.red i,
|
||||
.indicator-right.red::after {
|
||||
background: #ff5858;
|
||||
}
|
||||
.background.green,
|
||||
.indicator.green::before,
|
||||
.indicator.green i,
|
||||
.indicator-right.green::after {
|
||||
background: #28a745;
|
||||
}
|
||||
.background.light-green,
|
||||
.indicator.light-green::before,
|
||||
.indicator.light-green i,
|
||||
.indicator-right.light-green::after {
|
||||
background: #98d85b;
|
||||
}
|
||||
.background.orange,
|
||||
.indicator.orange::before,
|
||||
.indicator.orange i,
|
||||
.indicator-right.orange::after {
|
||||
background: #ffa00a;
|
||||
}
|
||||
.background.violet,
|
||||
.indicator.violet::before,
|
||||
.indicator.violet i,
|
||||
.indicator-right.violet::after {
|
||||
background: #743ee2;
|
||||
}
|
||||
.background.dark-grey,
|
||||
.indicator.dark-grey::before,
|
||||
.indicator.dark-grey i,
|
||||
.indicator-right.dark-grey::after {
|
||||
background: #b8c2cc;
|
||||
}
|
||||
.background.black,
|
||||
.indicator.black::before,
|
||||
.indicator.black i,
|
||||
.indicator-right.black::after {
|
||||
background: #36414C;
|
||||
}
|
||||
.background.yellow,
|
||||
.indicator.yellow::before,
|
||||
.indicator.yellow i,
|
||||
.indicator-right.yellow::after {
|
||||
background: #FEEF72;
|
||||
}
|
||||
.background.light-blue,
|
||||
.indicator.light-blue::before,
|
||||
.indicator.light-blue i,
|
||||
.indicator-right.light-blue::after {
|
||||
background: #7CD6FD;
|
||||
}
|
||||
.background.purple,
|
||||
.indicator.purple::before,
|
||||
.indicator.purple i,
|
||||
.indicator-right.purple::after {
|
||||
background: #b554ff;
|
||||
}
|
||||
.background.magenta,
|
||||
.indicator.magenta::before,
|
||||
.indicator.magenta i,
|
||||
.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