You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
5.1 KiB
238 lines
5.1 KiB
@import "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) { |
|
align-items: $ct-text-align; |
|
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-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-point, .ct-line, .ct-bar /*, .ct-slice-donut*/ |
|
{ |
|
stroke: $color; |
|
} |
|
|
|
.ct-slice-pie, .ct-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-axis-title { |
|
fill: $ct-axis-label-color; |
|
@include noselect; |
|
} |
|
|
|
// --- Label --- |
|
.ct-label { |
|
@include ct-chart-label($ct-text-color, $ct-text-size); |
|
|
|
&.ct-horizontal.ct-start { |
|
@include ct-align-justify(flex-end, flex-start); |
|
text-anchor: start; // Fallback for browsers that don't support foreignObjects |
|
} |
|
|
|
&.ct-horizontal.ct-end { |
|
@include ct-align-justify(flex-start, flex-start); |
|
text-anchor: start; |
|
|
|
// EDIT: added for angled horiz labels |
|
transform: translate(-4px, 0%) rotate(45deg); |
|
} |
|
|
|
&.ct-vertical.ct-start { |
|
@include ct-align-justify(flex-end, flex-end); |
|
text-anchor: end; |
|
|
|
transform: translate(0, 20%); |
|
} |
|
|
|
&.ct-vertical.ct-end { |
|
@include ct-align-justify(flex-end, flex-start); |
|
text-anchor: start; |
|
} |
|
} |
|
|
|
.ct-chart-line .ct-label, |
|
.ct-chart-bar .ct-label { |
|
display: flex; |
|
} |
|
|
|
// --- Bar labels --- |
|
|
|
.ct-chart-bar { |
|
.ct-label.ct-horizontal.ct-start { |
|
@include ct-align-justify(flex-end, center); |
|
text-anchor: start; |
|
} |
|
|
|
.ct-label.ct-horizontal.ct-end { |
|
@include ct-align-justify(flex-start, center); |
|
text-anchor: start; |
|
} |
|
|
|
&.ct-horizontal-bars .ct-label { |
|
&.ct-horizontal.ct-start { |
|
@include ct-align-justify(flex-end, flex-start); |
|
text-anchor: start; |
|
} |
|
|
|
&.ct-horizontal.ct-end { |
|
@include ct-align-justify(flex-start, flex-start); |
|
text-anchor: start; |
|
} |
|
|
|
&.ct-vertical.ct-start { |
|
//@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify); |
|
@include ct-align-justify(center, flex-end); |
|
text-anchor: end; |
|
} |
|
|
|
&.ct-vertical.ct-end { |
|
@include ct-align-justify(center, flex-start); |
|
text-anchor: end; |
|
} |
|
} |
|
} |
|
|
|
.ct-grid { |
|
@include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray); |
|
} |
|
|
|
.ct-point { |
|
@include ct-chart-point($ct-point-size, $ct-point-shape); |
|
} |
|
|
|
.ct-line { |
|
@include ct-chart-line($ct-line-width); |
|
} |
|
|
|
.ct-area { |
|
@include ct-chart-area(); |
|
} |
|
|
|
.ct-bar { |
|
@include ct-chart-bar($ct-bar-width); |
|
} |
|
|
|
//.ct-slice-donut { |
|
// @include ct-chart-donut($ct-donut-width); |
|
//} |
|
|
|
@if $ct-include-colored-series { |
|
@for $i from 0 to length($ct-series-names) { |
|
.ct-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)); |
|
} |
|
} |
|
} |
|
}
|
|
|