Skip to content

Commit 9f95371

Browse files
ramiyramiy
committed
SCSS variables
1 parent 149d87f commit 9f95371

13 files changed

Lines changed: 160 additions & 157 deletions

File tree

‎src/charts/_area.scss‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
justify-content: space-between;
1212
align-items: stretch;
1313
width: 100%;
14-
height: calc(100% - var(--#{$variable-prefix}heading-size));
14+
height: calc(100% - var(--#{ $variable-prefix }heading-size));
1515

1616
tr {
1717
position: relative;
@@ -68,11 +68,11 @@
6868
tbody {
6969
tr {
7070
align-items: flex-end;
71-
margin-block-end: var(--#{$variable-prefix}labels-size);
71+
margin-block-end: var(--#{ $variable-prefix }labels-size);
7272

7373
th {
74-
bottom: calc(-1 * var(--#{$variable-prefix}labels-size) - var(--#{$variable-prefix}primary-axis-width));
75-
height: var(--#{$variable-prefix}labels-size);
74+
bottom: calc(-1 * var(--labels-size) - var(--#{ $variable-prefix }primary-axis-width));
75+
height: var(--#{ $variable-prefix }labels-size);
7676
}
7777

7878
td {
@@ -85,11 +85,11 @@
8585
tbody {
8686
tr {
8787
align-items: flex-start;
88-
margin-block-start: var(--#{$variable-prefix}labels-size);
88+
margin-block-start: var(--#{ $variable-prefix }labels-size);
8989

9090
th {
91-
top: calc(-1 * var(--#{$variable-prefix}labels-size) - var(--#{$variable-prefix}primary-axis-width));
92-
height: var(--#{$variable-prefix}labels-size);
91+
top: calc(-1 * var(--#{ $variable-prefix }labels-size) - var(--#{ $variable-prefix }primary-axis-width));
92+
height: var(--#{ $variable-prefix }labels-size);
9393
}
9494

9595
td {
@@ -131,8 +131,8 @@
131131
&::before {
132132
clip-path:
133133
polygon(
134-
0% calc(100% * (1 - var(--#{$variable-prefix}start, var(--#{$variable-prefix}end, var(--#{$variable-prefix}size))))),
135-
100% calc(100% * (1 - var(--#{$variable-prefix}end, var(--#{$variable-prefix}size)))),
134+
0% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))))),
135+
100% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))),
136136
100% 100%,
137137
0% 100%
138138
);
@@ -143,7 +143,7 @@
143143
}
144144

145145
&::after {
146-
height: calc(100% * var(--#{$variable-prefix}end, var(--#{$variable-prefix}size)));
146+
height: calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)));
147147
}
148148
}
149149
}
@@ -155,8 +155,8 @@
155155
&::before {
156156
clip-path:
157157
polygon(
158-
0% calc(100% * (1 - var(--#{$variable-prefix}end, var(--#{$variable-prefix}size)))),
159-
100% calc(100% * (1 - var(--#{$variable-prefix}start, var(--#{$variable-prefix}end, var(--#{$variable-prefix}size))))),
158+
0% calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))),
159+
100% calc(100% * (1 - var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))))),
160160
100% 100%,
161161
0% 100%
162162
);
@@ -167,7 +167,7 @@
167167
}
168168

169169
&::after {
170-
height: calc(100% * var(--#{$variable-prefix}end, var(--#{$variable-prefix}size)));
170+
height: calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)));
171171
}
172172
}
173173
}
@@ -183,8 +183,8 @@
183183
polygon(
184184
0% 0%,
185185
100% 0%,
186-
100% calc(100% * var(--#{$variable-prefix}end, var(--#{$variable-prefix}size))),
187-
0% calc(100% * var(--#{$variable-prefix}start, var(--#{$variable-prefix}end, var(--#{$variable-prefix}size))))
186+
100% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))),
187+
0% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))))
188188
);
189189
}
190190

@@ -193,7 +193,7 @@
193193
}
194194

195195
&::after {
196-
height: calc(100% * (1 - var(--#{$variable-prefix}end, var(--#{$variable-prefix}size))));
196+
height: calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))));
197197
}
198198
}
199199
}
@@ -207,8 +207,8 @@
207207
polygon(
208208
0% 0%,
209209
100% 0%,
210-
100% calc(100% * var(--#{$variable-prefix}start, var(--#{$variable-prefix}end, var(--#{$variable-prefix}size)))),
211-
0% calc(100% * var(--#{$variable-prefix}end, var(--#{$variable-prefix}size)))
210+
100% calc(100% * var(--#{ $variable-prefix }start, var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))),
211+
0% calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size)))
212212
);
213213
}
214214

@@ -217,16 +217,16 @@
217217
}
218218

219219
&::after {
220-
height: calc(100% * (1 - var(--#{$variable-prefix}end, var(--#{$variable-prefix}size))));
220+
height: calc(100% * (1 - var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size))));
221221
}
222222
}
223223
}
224224
}
225225

226226
// Spacing
227227
@for $i from 1 through 20 {
228-
&.data-spacing-#{$i},
229-
&.datasets-spacing-#{$i} {
228+
&.data-spacing-#{ $i },
229+
&.datasets-spacing-#{ $i } {
230230
tbody tr td::before {
231231
margin-inline-start: $i * 1px;
232232
margin-inline-end: $i * 1px;

‎src/charts/_bar.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
justify-content: space-between;
1212
align-items: stretch;
1313
width: 100%;
14-
height: calc(100% - var(--#{$variable-prefix}heading-size));
14+
height: calc(100% - var(--#{ $variable-prefix }heading-size));
1515

1616
tr {
1717
position: relative;
@@ -35,7 +35,7 @@
3535
td {
3636
display: flex;
3737
align-items: center;
38-
width: calc(100% * var(--#{$variable-prefix}end, var(--#{$variable-prefix}size, 1)));
38+
width: calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size, 1)));
3939
height: 100%;
4040
position: relative; // For tooltips
4141
}
@@ -48,11 +48,11 @@
4848
tbody {
4949
tr {
5050
align-items: flex-start;
51-
margin-inline-start: var(--#{$variable-prefix}labels-size);
51+
margin-inline-start: var(--#{ $variable-prefix }labels-size);
5252

5353
th {
54-
left: calc(-1 * var(--#{$variable-prefix}labels-size) - var(--#{$variable-prefix}primary-axis-width));
55-
width: var(--#{$variable-prefix}labels-size);
54+
left: calc(-1 * var(--#{ $variable-prefix }labels-size) - var(--#{ $variable-prefix }primary-axis-width));
55+
width: var(--#{ $variable-prefix }labels-size);
5656
}
5757

5858
td {
@@ -65,11 +65,11 @@
6565
tbody {
6666
tr {
6767
align-items: flex-end;
68-
margin-inline-end: var(--#{$variable-prefix}labels-size);
68+
margin-inline-end: var(--#{ $variable-prefix }labels-size);
6969

7070
th {
71-
right: calc(-1 * var(--#{$variable-prefix}labels-size) - var(--#{$variable-prefix}primary-axis-width));
72-
width: var(--#{$variable-prefix}labels-size);
71+
right: calc(-1 * var(--#{ $variable-prefix }labels-size) - var(--#{ $variable-prefix }primary-axis-width));
72+
width: var(--#{ $variable-prefix }labels-size);
7373
}
7474

7575
td {
@@ -162,15 +162,15 @@
162162

163163
// Spacing
164164
@for $i from 1 through 20 {
165-
&.data-spacing-#{$i} {
165+
&.data-spacing-#{ $i } {
166166
tbody tr {
167167
padding-block-start: $i * 1px;
168168
padding-block-end: $i * 1px;
169169
}
170170
}
171171
}
172172
@for $i from 1 through 20 {
173-
&.datasets-spacing-#{$i} {
173+
&.datasets-spacing-#{ $i } {
174174
tbody tr td {
175175
margin-block-start: $i * 1px;
176176
margin-block-end: $i * 1px;

‎src/charts/_column.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
justify-content: space-between;
1212
align-items: stretch;
1313
width: 100%;
14-
height: calc(100% - var(--#{$variable-prefix}heading-size));
14+
height: calc(100% - var(--#{ $variable-prefix }heading-size));
1515

1616
tr {
1717
position: relative;
@@ -36,7 +36,7 @@
3636
display: flex;
3737
justify-content: center;
3838
width: 100%;
39-
height: calc(100% * var(--#{$variable-prefix}end, var(--#{$variable-prefix}size, 1)));
39+
height: calc(100% * var(--#{ $variable-prefix }end, var(--#{ $variable-prefix }size, 1)));
4040
position: relative; // For tooltips
4141
}
4242

@@ -48,11 +48,11 @@
4848
tbody {
4949
tr {
5050
align-items: flex-end;
51-
margin-block-end: var(--#{$variable-prefix}labels-size);
51+
margin-block-end: var(--#{ $variable-prefix }labels-size);
5252

5353
th {
54-
bottom: calc(-1 * var(--#{$variable-prefix}labels-size) - var(--#{$variable-prefix}primary-axis-width));
55-
height: var(--#{$variable-prefix}labels-size);
54+
bottom: calc(-1 * var(--#{ $variable-prefix }labels-size) - var(--#{ $variable-prefix }primary-axis-width));
55+
height: var(--#{ $variable-prefix }labels-size);
5656
}
5757

5858
td {
@@ -65,11 +65,11 @@
6565
tbody {
6666
tr {
6767
align-items: flex-start;
68-
margin-block-start: var(--#{$variable-prefix}labels-size);
68+
margin-block-start: var(--#{ $variable-prefix }labels-size);
6969

7070
th {
71-
top: calc(-1 * var(--#{$variable-prefix}labels-size) - var(--#{$variable-prefix}primary-axis-width));
72-
height: var(--#{$variable-prefix}labels-size);
71+
top: calc(-1 * var(--#{ $variable-prefix }labels-size) - var(--#{ $variable-prefix }primary-axis-width));
72+
height: var(--#{ $variable-prefix }labels-size);
7373
}
7474

7575
td {
@@ -162,15 +162,15 @@
162162

163163
// Spacing
164164
@for $i from 1 through 20 {
165-
&.data-spacing-#{$i} {
165+
&.data-spacing-#{ $i } {
166166
tbody tr {
167167
padding-inline-start: $i * 1px;
168168
padding-inline-end: $i * 1px;
169169
}
170170
}
171171
}
172172
@for $i from 1 through 20 {
173-
&.datasets-spacing-#{$i} {
173+
&.datasets-spacing-#{ $i } {
174174
tbody tr td {
175175
margin-inline-start: $i * 1px;
176176
margin-inline-end: $i * 1px;

0 commit comments

Comments
 (0)