1 | @import "settings";
|
2 |
|
3 | @mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
|
4 | display: block;
|
5 | position: relative;
|
6 | width: $width;
|
7 |
|
8 | &:before {
|
9 | display: block;
|
10 | float: left;
|
11 | content: "";
|
12 | width: 0;
|
13 | height: 0;
|
14 | padding-bottom: $ratio * 100%;
|
15 | }
|
16 |
|
17 | &:after {
|
18 | content: "";
|
19 | display: table;
|
20 | clear: both;
|
21 | }
|
22 |
|
23 | > svg {
|
24 | display: block;
|
25 | position: absolute;
|
26 | top: 0;
|
27 | left: 0;
|
28 | }
|
29 | }
|
30 |
|
31 | @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
|
32 | align-items: $ct-text-align;
|
33 | justify-content: $ct-text-justify;
|
34 |
|
35 | @if ($ct-text-justify == 'flex-start') {
|
36 | text-align: left;
|
37 | } @else if ($ct-text-justify == 'flex-end') {
|
38 | text-align: right;
|
39 | } @else {
|
40 | text-align: center;
|
41 | }
|
42 | }
|
43 |
|
44 | @mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
|
45 | fill: $ct-text-color;
|
46 | color: $ct-text-color;
|
47 | font-size: $ct-text-size;
|
48 | line-height: $ct-text-line-height;
|
49 | }
|
50 |
|
51 | @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
|
52 | stroke: $ct-grid-color;
|
53 | stroke-width: $ct-grid-width;
|
54 |
|
55 | @if ($ct-grid-dasharray) {
|
56 | stroke-dasharray: $ct-grid-dasharray;
|
57 | }
|
58 | }
|
59 |
|
60 | @mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
|
61 | stroke-width: $ct-point-size;
|
62 | stroke-linecap: $ct-point-shape;
|
63 | }
|
64 |
|
65 | @mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
|
66 | fill: none;
|
67 | stroke-width: $ct-line-width;
|
68 |
|
69 | @if ($ct-line-dasharray) {
|
70 | stroke-dasharray: $ct-line-dasharray;
|
71 | }
|
72 | }
|
73 |
|
74 | @mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
|
75 | stroke: none;
|
76 | fill-opacity: $ct-area-opacity;
|
77 | }
|
78 |
|
79 | @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
|
80 | fill: none;
|
81 | stroke-width: $ct-bar-width;
|
82 | }
|
83 |
|
84 | @mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
|
85 | fill: none;
|
86 | stroke-width: $ct-donut-width;
|
87 | }
|
88 |
|
89 | @mixin ct-chart-series-color($color) {
|
90 | .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
|
91 | stroke: $color;
|
92 | }
|
93 |
|
94 | .#{$ct-class-slice-pie}, .#{$ct-class-area} {
|
95 | fill: $color;
|
96 | }
|
97 | }
|
98 |
|
99 | @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) {
|
100 |
|
101 | .#{$ct-class-label} {
|
102 | @include ct-chart-label($ct-text-color, $ct-text-size);
|
103 | }
|
104 |
|
105 | .#{$ct-class-chart-line} .#{$ct-class-label},
|
106 | .#{$ct-class-chart-bar} .#{$ct-class-label} {
|
107 | display: flex;
|
108 | }
|
109 |
|
110 | .#{$ct-class-chart-pie} .#{$ct-class-label},
|
111 | .#{$ct-class-chart-donut} .#{$ct-class-label} {
|
112 | dominant-baseline: central;
|
113 | }
|
114 |
|
115 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
116 | @include ct-align-justify(flex-end, flex-start);
|
117 | }
|
118 |
|
119 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
120 | @include ct-align-justify(flex-start, flex-start);
|
121 | }
|
122 |
|
123 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
|
124 | @include ct-align-justify(flex-end, flex-end);
|
125 | }
|
126 |
|
127 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
|
128 | @include ct-align-justify(flex-end, flex-start);
|
129 | }
|
130 |
|
131 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
132 | @include ct-align-justify(flex-end, center);
|
133 | }
|
134 |
|
135 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
136 | @include ct-align-justify(flex-start, center);
|
137 | }
|
138 |
|
139 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
|
140 | @include ct-align-justify(flex-end, flex-start);
|
141 | }
|
142 |
|
143 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
|
144 | @include ct-align-justify(flex-start, flex-start);
|
145 | }
|
146 |
|
147 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
|
148 | @include ct-align-justify(center, flex-end);
|
149 | }
|
150 |
|
151 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
|
152 | @include ct-align-justify(center, flex-start);
|
153 | }
|
154 |
|
155 | .#{$ct-class-grid} {
|
156 | @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
|
157 | }
|
158 |
|
159 | .#{$ct-class-grid-background} {
|
160 | fill: $ct-grid-background-fill;
|
161 | }
|
162 |
|
163 | .#{$ct-class-point} {
|
164 | @include ct-chart-point($ct-point-size, $ct-point-shape);
|
165 | }
|
166 |
|
167 | .#{$ct-class-line} {
|
168 | @include ct-chart-line($ct-line-width);
|
169 | }
|
170 |
|
171 | .#{$ct-class-area} {
|
172 | @include ct-chart-area();
|
173 | }
|
174 |
|
175 | .#{$ct-class-bar} {
|
176 | @include ct-chart-bar($ct-bar-width);
|
177 | }
|
178 |
|
179 | .#{$ct-class-slice-donut} {
|
180 | @include ct-chart-donut($ct-donut-width);
|
181 | }
|
182 |
|
183 | @if $ct-include-colored-series {
|
184 | @for $i from 0 to length($ct-series-names) {
|
185 | .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
|
186 | $color: nth($ct-series-colors, $i + 1);
|
187 |
|
188 | @include ct-chart-series-color($color);
|
189 | }
|
190 | }
|
191 | }
|
192 | }
|
193 |
|
194 | @if $ct-include-classes {
|
195 | @include ct-chart();
|
196 |
|
197 | @if $ct-include-alternative-responsive-containers {
|
198 | @for $i from 0 to length($ct-scales-names) {
|
199 | .#{nth($ct-scales-names, $i + 1)} {
|
200 | @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
|
201 | }
|
202 | }
|
203 | }
|
204 | }
|