129 lines
2.7 KiB
SCSS
129 lines
2.7 KiB
SCSS
// General Pie Chart Styles
|
|
|
|
// The idea behind this mixin in to allow a variety of
|
|
// colors to be configured, from 1 - $num, that will
|
|
// toggle between an incrementing percentage ($increment)
|
|
// from the theme's primary brand color. This should
|
|
// adapt nicely to most themes.
|
|
|
|
// Distribution Chart Mixins
|
|
@mixin make_pie_chart_distribution($color: $brand-primary, $num: 8, $increment: 8) {
|
|
|
|
// Set the arc stroke
|
|
.arc {
|
|
stroke: $color;
|
|
}
|
|
|
|
@for $ii from 1 through $num {
|
|
$color_increment: $increment * ($ii/2);
|
|
|
|
// Set the arc color
|
|
.arc:nth-child(#{$ii}n) {
|
|
@if $ii % 2 == 0 {
|
|
fill: lighten($color, $color_increment * 1%);
|
|
} @else {
|
|
fill: darken($color, $color_increment * 1%);
|
|
}
|
|
}
|
|
|
|
// Set the corresponding legend symbol
|
|
.legend-group:nth-child(#{$ii}n) .legend-symbol {
|
|
@if $ii % 2 == 0 {
|
|
color: lighten($color, $color_increment * 1%);
|
|
} @else {
|
|
color: darken($color, $color_increment * 1%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin make_pie_chart_type($type: '', $color: $brand-primary) {
|
|
@if $type == '' {
|
|
@include make_pie_chart_distribution($color);
|
|
} @else {
|
|
&.chart-#{$type} {
|
|
@include make_pie_chart_distribution($color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// This is who sets the size of the pie chart
|
|
.legacy-pie-chart {
|
|
|
|
// The container arc's color and stroke
|
|
.arc {
|
|
fill: $table-border-color;
|
|
stroke-width: 1px;
|
|
}
|
|
}
|
|
|
|
// Chart Usage Specifics
|
|
.pie-chart-usage {
|
|
|
|
.arc {
|
|
stroke: $table-border-color;
|
|
}
|
|
|
|
// The inner arc
|
|
.arc.inner {
|
|
fill: $brand-primary;
|
|
stroke: none;
|
|
|
|
// Specialness if its full
|
|
&.FULL {
|
|
fill: $brand-danger;
|
|
}
|
|
|
|
// Specialness if its almost full
|
|
&.NEARLY_FULL {
|
|
fill: $brand-warning;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Chart Distribution Specifics
|
|
// The container arc's color and stroke
|
|
|
|
.pie-chart-distribution {
|
|
|
|
@include make_pie_chart_type();
|
|
@include make_pie_chart_type('danger', $brand-danger);
|
|
@include make_pie_chart_type('success', $brand-success);
|
|
@include make_pie_chart_type('info', $brand-info);
|
|
@include make_pie_chart_type('warning', $brand-warning);
|
|
|
|
.legend {
|
|
padding: $padding-base-horizontal $padding-base-vertical;
|
|
text-align: left;
|
|
}
|
|
|
|
.legend-group {
|
|
padding: $padding-xs-horizontal $padding-small-vertical;
|
|
}
|
|
|
|
.legend-symbol {
|
|
@extend .fa;
|
|
@extend .fa-square;
|
|
font-size: $font-size-h3;
|
|
padding-right: $padding-small-vertical;
|
|
}
|
|
|
|
.legend-symbol,
|
|
.legend-key,
|
|
.legend-value {
|
|
display: inline-block;
|
|
line-height: $line-height-computed;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.legend-key {
|
|
padding-right: $padding-small-vertical;
|
|
}
|
|
}
|
|
|
|
.chart-numbers {
|
|
fill: $gray-dark;
|
|
font-size: $font-size-h3;
|
|
}
|
|
|