fistcommit
This commit is contained in:
Kicap
608
assets/plugin/chart/chartist/chartist.css
Normal file
608
assets/plugin/chart/chartist/chartist.css
Normal file
@ -0,0 +1,608 @@
|
||||
.ct-label {
|
||||
fill: rgba(0, 0, 0, 0.4);
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1; }
|
||||
|
||||
.ct-chart-line .ct-label,
|
||||
.ct-chart-bar .ct-label {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex; }
|
||||
|
||||
.ct-label.ct-horizontal.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-label.ct-horizontal.ct-end {
|
||||
-webkit-box-align: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-label.ct-vertical.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: flex-end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
text-anchor: end; }
|
||||
|
||||
.ct-label.ct-vertical.ct-end {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar .ct-label.ct-horizontal.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar .ct-label.ct-horizontal.ct-end {
|
||||
-webkit-box-align: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
|
||||
-webkit-box-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
|
||||
-webkit-box-align: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: start; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: flex-end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
text-anchor: end; }
|
||||
|
||||
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: flex-start;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
text-anchor: end; }
|
||||
|
||||
.ct-grid {
|
||||
stroke: rgba(0, 0, 0, 0.2);
|
||||
stroke-width: 1px;
|
||||
stroke-dasharray: 2px; }
|
||||
|
||||
.ct-point {
|
||||
stroke-width: 10px;
|
||||
stroke-linecap: round; }
|
||||
|
||||
.ct-line {
|
||||
fill: none;
|
||||
stroke-width: 4px; }
|
||||
|
||||
.ct-area {
|
||||
stroke: none;
|
||||
fill-opacity: 0.1; }
|
||||
|
||||
.ct-bar {
|
||||
fill: none;
|
||||
stroke-width: 10px; }
|
||||
|
||||
.ct-slice-donut {
|
||||
fill: none;
|
||||
stroke-width: 60px; }
|
||||
|
||||
.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
|
||||
stroke: #d70206; }
|
||||
|
||||
.ct-series-a .ct-slice-pie, .ct-series-a .ct-area {
|
||||
fill: #d70206; }
|
||||
|
||||
.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
|
||||
stroke: #f05b4f; }
|
||||
|
||||
.ct-series-b .ct-slice-pie, .ct-series-b .ct-area {
|
||||
fill: #f05b4f; }
|
||||
|
||||
.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut {
|
||||
stroke: #f4c63d; }
|
||||
|
||||
.ct-series-c .ct-slice-pie, .ct-series-c .ct-area {
|
||||
fill: #f4c63d; }
|
||||
|
||||
.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut {
|
||||
stroke: #d17905; }
|
||||
|
||||
.ct-series-d .ct-slice-pie, .ct-series-d .ct-area {
|
||||
fill: #d17905; }
|
||||
|
||||
.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut {
|
||||
stroke: #453d3f; }
|
||||
|
||||
.ct-series-e .ct-slice-pie, .ct-series-e .ct-area {
|
||||
fill: #453d3f; }
|
||||
|
||||
.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut {
|
||||
stroke: #59922b; }
|
||||
|
||||
.ct-series-f .ct-slice-pie, .ct-series-f .ct-area {
|
||||
fill: #59922b; }
|
||||
|
||||
.ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut {
|
||||
stroke: #0544d3; }
|
||||
|
||||
.ct-series-g .ct-slice-pie, .ct-series-g .ct-area {
|
||||
fill: #0544d3; }
|
||||
|
||||
.ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut {
|
||||
stroke: #6b0392; }
|
||||
|
||||
.ct-series-h .ct-slice-pie, .ct-series-h .ct-area {
|
||||
fill: #6b0392; }
|
||||
|
||||
.ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut {
|
||||
stroke: #f05b4f; }
|
||||
|
||||
.ct-series-i .ct-slice-pie, .ct-series-i .ct-area {
|
||||
fill: #f05b4f; }
|
||||
|
||||
.ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut {
|
||||
stroke: #dda458; }
|
||||
|
||||
.ct-series-j .ct-slice-pie, .ct-series-j .ct-area {
|
||||
fill: #dda458; }
|
||||
|
||||
.ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut {
|
||||
stroke: #eacf7d; }
|
||||
|
||||
.ct-series-k .ct-slice-pie, .ct-series-k .ct-area {
|
||||
fill: #eacf7d; }
|
||||
|
||||
.ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut {
|
||||
stroke: #86797d; }
|
||||
|
||||
.ct-series-l .ct-slice-pie, .ct-series-l .ct-area {
|
||||
fill: #86797d; }
|
||||
|
||||
.ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut {
|
||||
stroke: #b2c326; }
|
||||
|
||||
.ct-series-m .ct-slice-pie, .ct-series-m .ct-area {
|
||||
fill: #b2c326; }
|
||||
|
||||
.ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut {
|
||||
stroke: #6188e2; }
|
||||
|
||||
.ct-series-n .ct-slice-pie, .ct-series-n .ct-area {
|
||||
fill: #6188e2; }
|
||||
|
||||
.ct-series-o .ct-point, .ct-series-o .ct-line, .ct-series-o .ct-bar, .ct-series-o .ct-slice-donut {
|
||||
stroke: #a748ca; }
|
||||
|
||||
.ct-series-o .ct-slice-pie, .ct-series-o .ct-area {
|
||||
fill: #a748ca; }
|
||||
|
||||
.ct-square {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-square:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 100%; }
|
||||
.ct-square:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-square > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-second {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-second:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 93.75%; }
|
||||
.ct-minor-second:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-second > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-second {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-second:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 88.8888888889%; }
|
||||
.ct-major-second:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-second > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-third {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-third:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 83.3333333333%; }
|
||||
.ct-minor-third:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-third > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-third {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-third:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 80%; }
|
||||
.ct-major-third:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-third > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-perfect-fourth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-perfect-fourth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 75%; }
|
||||
.ct-perfect-fourth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-perfect-fourth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-perfect-fifth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-perfect-fifth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 66.6666666667%; }
|
||||
.ct-perfect-fifth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-perfect-fifth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-sixth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-sixth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 62.5%; }
|
||||
.ct-minor-sixth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-sixth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-golden-section {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-golden-section:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 61.804697157%; }
|
||||
.ct-golden-section:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-golden-section > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-sixth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-sixth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 60%; }
|
||||
.ct-major-sixth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-sixth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-minor-seventh {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-minor-seventh:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%; }
|
||||
.ct-minor-seventh:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-minor-seventh > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-seventh {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-seventh:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 53.3333333333%; }
|
||||
.ct-major-seventh:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-seventh > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-octave {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-octave:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 50%; }
|
||||
.ct-octave:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-octave > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-tenth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-tenth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 40%; }
|
||||
.ct-major-tenth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-tenth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-eleventh {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-eleventh:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 37.5%; }
|
||||
.ct-major-eleventh:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-eleventh > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-major-twelfth {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-major-twelfth:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 33.3333333333%; }
|
||||
.ct-major-twelfth:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-major-twelfth > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
.ct-double-octave {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
.ct-double-octave:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: 25%; }
|
||||
.ct-double-octave:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
.ct-double-octave > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
/*# sourceMappingURL=chartist.css.map */
|
||||
10
assets/plugin/chart/chartist/chartist.css.map
Normal file
10
assets/plugin/chart/chartist/chartist.css.map
Normal file
File diff suppressed because one or more lines are too long
4328
assets/plugin/chart/chartist/chartist.js
Normal file
4328
assets/plugin/chart/chartist/chartist.js
Normal file
File diff suppressed because it is too large
Load Diff
1
assets/plugin/chart/chartist/chartist.min.css
vendored
Normal file
1
assets/plugin/chart/chartist/chartist.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
10
assets/plugin/chart/chartist/chartist.min.js
vendored
Normal file
10
assets/plugin/chart/chartist/chartist.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
assets/plugin/chart/chartist/chartist.min.js.map
Normal file
1
assets/plugin/chart/chartist/chartist.min.js.map
Normal file
File diff suppressed because one or more lines are too long
232
assets/plugin/chart/chartist/scss/chartist.scss
Normal file
232
assets/plugin/chart/chartist/scss/chartist.scss
Normal file
@ -0,0 +1,232 @@
|
||||
@import "settings/chartist-settings";
|
||||
|
||||
@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: $width;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
float: left;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-bottom: $ratio * 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
> svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
|
||||
-webkit-box-align: $ct-text-align;
|
||||
-webkit-align-items: $ct-text-align;
|
||||
-ms-flex-align: $ct-text-align;
|
||||
align-items: $ct-text-align;
|
||||
-webkit-box-pack: $ct-text-justify;
|
||||
-webkit-justify-content: $ct-text-justify;
|
||||
-ms-flex-pack: $ct-text-justify;
|
||||
justify-content: $ct-text-justify;
|
||||
// Fallback to text-align for non-flex browsers
|
||||
@if($ct-text-justify == 'flex-start') {
|
||||
text-align: left;
|
||||
} @else if ($ct-text-justify == 'flex-end') {
|
||||
text-align: right;
|
||||
} @else {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ct-flex() {
|
||||
// Fallback to block
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
|
||||
fill: $ct-text-color;
|
||||
color: $ct-text-color;
|
||||
font-size: $ct-text-size;
|
||||
line-height: $ct-text-line-height;
|
||||
}
|
||||
|
||||
@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
|
||||
stroke: $ct-grid-color;
|
||||
stroke-width: $ct-grid-width;
|
||||
|
||||
@if ($ct-grid-dasharray) {
|
||||
stroke-dasharray: $ct-grid-dasharray;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
|
||||
stroke-width: $ct-point-size;
|
||||
stroke-linecap: $ct-point-shape;
|
||||
}
|
||||
|
||||
@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
|
||||
fill: none;
|
||||
stroke-width: $ct-line-width;
|
||||
|
||||
@if ($ct-line-dasharray) {
|
||||
stroke-dasharray: $ct-line-dasharray;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
|
||||
stroke: none;
|
||||
fill-opacity: $ct-area-opacity;
|
||||
}
|
||||
|
||||
@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
|
||||
fill: none;
|
||||
stroke-width: $ct-bar-width;
|
||||
}
|
||||
|
||||
@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
|
||||
fill: none;
|
||||
stroke-width: $ct-donut-width;
|
||||
}
|
||||
|
||||
@mixin ct-chart-series-color($color) {
|
||||
.#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
|
||||
stroke: $color;
|
||||
}
|
||||
|
||||
.#{$ct-class-slice-pie}, .#{$ct-class-area} {
|
||||
fill: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
|
||||
|
||||
.#{$ct-class-label} {
|
||||
@include ct-chart-label($ct-text-color, $ct-text-size);
|
||||
}
|
||||
|
||||
.#{$ct-class-chart-line} .#{$ct-class-label},
|
||||
.#{$ct-class-chart-bar} .#{$ct-class-label} {
|
||||
@include ct-flex();
|
||||
}
|
||||
|
||||
.#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
||||
@include ct-align-justify(flex-end, flex-start);
|
||||
// Fallback for browsers that don't support foreignObjects
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
.#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
||||
@include ct-align-justify(flex-start, flex-start);
|
||||
// Fallback for browsers that don't support foreignObjects
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
.#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
|
||||
@include ct-align-justify(flex-end, flex-end);
|
||||
// Fallback for browsers that don't support foreignObjects
|
||||
text-anchor: end;
|
||||
}
|
||||
|
||||
.#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
|
||||
@include ct-align-justify(flex-end, flex-start);
|
||||
// Fallback for browsers that don't support foreignObjects
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
.#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
||||
@include ct-align-justify(flex-end, center);
|
||||
// Fallback for browsers that don't support foreignObjects
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
.#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
||||
@include ct-align-justify(flex-start, center);
|
||||
// Fallback for browsers that don't support foreignObjects
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
||||
@include ct-align-justify(flex-end, flex-start);
|
||||
// Fallback for browsers that don't support foreignObjects
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
||||
@include ct-align-justify(flex-start, flex-start);
|
||||
// Fallback for browsers that don't support foreignObjects
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
|
||||
//@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
|
||||
@include ct-align-justify(center, flex-end);
|
||||
// Fallback for browsers that don't support foreignObjects
|
||||
text-anchor: end;
|
||||
}
|
||||
|
||||
.#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
|
||||
@include ct-align-justify(center, flex-start);
|
||||
// Fallback for browsers that don't support foreignObjects
|
||||
text-anchor: end;
|
||||
}
|
||||
|
||||
.#{$ct-class-grid} {
|
||||
@include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
|
||||
}
|
||||
|
||||
.#{$ct-class-point} {
|
||||
@include ct-chart-point($ct-point-size, $ct-point-shape);
|
||||
}
|
||||
|
||||
.#{$ct-class-line} {
|
||||
@include ct-chart-line($ct-line-width);
|
||||
}
|
||||
|
||||
.#{$ct-class-area} {
|
||||
@include ct-chart-area();
|
||||
}
|
||||
|
||||
.#{$ct-class-bar} {
|
||||
@include ct-chart-bar($ct-bar-width);
|
||||
}
|
||||
|
||||
.#{$ct-class-slice-donut} {
|
||||
@include ct-chart-donut($ct-donut-width);
|
||||
}
|
||||
|
||||
@if $ct-include-colored-series {
|
||||
@for $i from 0 to length($ct-series-names) {
|
||||
.#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
|
||||
$color: nth($ct-series-colors, $i + 1);
|
||||
|
||||
@include ct-chart-series-color($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $ct-include-classes {
|
||||
@include ct-chart();
|
||||
|
||||
@if $ct-include-alternative-responsive-containers {
|
||||
@for $i from 0 to length($ct-scales-names) {
|
||||
.#{nth($ct-scales-names, $i + 1)} {
|
||||
@include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
// Scales for responsive SVG containers
|
||||
$ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
|
||||
$ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
|
||||
|
||||
// Class names to be used when generating CSS
|
||||
$ct-class-chart: ct-chart !default;
|
||||
$ct-class-chart-line: ct-chart-line !default;
|
||||
$ct-class-chart-bar: ct-chart-bar !default;
|
||||
$ct-class-horizontal-bars: ct-horizontal-bars !default;
|
||||
$ct-class-chart-pie: ct-chart-pie !default;
|
||||
$ct-class-chart-donut: ct-chart-donut !default;
|
||||
$ct-class-label: ct-label !default;
|
||||
$ct-class-series: ct-series !default;
|
||||
$ct-class-line: ct-line !default;
|
||||
$ct-class-point: ct-point !default;
|
||||
$ct-class-area: ct-area !default;
|
||||
$ct-class-bar: ct-bar !default;
|
||||
$ct-class-slice-pie: ct-slice-pie !default;
|
||||
$ct-class-slice-donut: ct-slice-donut !default;
|
||||
$ct-class-grid: ct-grid !default;
|
||||
$ct-class-vertical: ct-vertical !default;
|
||||
$ct-class-horizontal: ct-horizontal !default;
|
||||
$ct-class-start: ct-start !default;
|
||||
$ct-class-end: ct-end !default;
|
||||
|
||||
// Container ratio
|
||||
$ct-container-ratio: (1/1.618) !default;
|
||||
|
||||
// Text styles for labels
|
||||
$ct-text-color: rgba(0, 0, 0, 0.4) !default;
|
||||
$ct-text-size: 0.75rem !default;
|
||||
$ct-text-align: flex-start !default;
|
||||
$ct-text-justify: flex-start !default;
|
||||
$ct-text-line-height: 1;
|
||||
|
||||
// Grid styles
|
||||
$ct-grid-color: rgba(0, 0, 0, 0.2) !default;
|
||||
$ct-grid-dasharray: 2px !default;
|
||||
$ct-grid-width: 1px !default;
|
||||
|
||||
// Line chart properties
|
||||
$ct-line-width: 4px !default;
|
||||
$ct-line-dasharray: false !default;
|
||||
$ct-point-size: 10px !default;
|
||||
// Line chart point, can be either round or square
|
||||
$ct-point-shape: round !default;
|
||||
// Area fill transparency between 0 and 1
|
||||
$ct-area-opacity: 0.1 !default;
|
||||
|
||||
// Bar chart bar width
|
||||
$ct-bar-width: 10px !default;
|
||||
|
||||
// Donut width (If donut width is to big it can cause issues where the shape gets distorted)
|
||||
$ct-donut-width: 60px !default;
|
||||
|
||||
// If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
|
||||
// should set this property to false
|
||||
$ct-include-classes: true !default;
|
||||
|
||||
// If this is set to true the CSS will contain colored series. You can extend or change the color with the
|
||||
// properties below
|
||||
$ct-include-colored-series: $ct-include-classes !default;
|
||||
|
||||
// If set to true this will include all responsive container variations using the scales defined at the top of the script
|
||||
$ct-include-alternative-responsive-containers: $ct-include-classes !default;
|
||||
|
||||
// Series names and colors. This can be extended or customized as desired. Just add more series and colors.
|
||||
$ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
|
||||
$ct-series-colors: (
|
||||
#d70206,
|
||||
#f05b4f,
|
||||
#f4c63d,
|
||||
#d17905,
|
||||
#453d3f,
|
||||
#59922b,
|
||||
#0544d3,
|
||||
#6b0392,
|
||||
#f05b4f,
|
||||
#dda458,
|
||||
#eacf7d,
|
||||
#86797d,
|
||||
#b2c326,
|
||||
#6188e2,
|
||||
#a748ca
|
||||
) !default;
|
||||
Reference in New Issue
Block a user