Skip to content

Commit 270f8fa

Browse files
simeonoffsimeonoff
authored
refactor(*): style and chart themes optimization changes (#358)
* style(*): replace CSS style comments with Sass style comments This reduces the amount of produced CSS by quite a few lines. * refactor(chart-themes): replace repeating brushes styles with a CSS variable This reduces the amount of generated CSS by quite a few lines. * style(*): replace percentage values with floating point numbers
1 parent 3e2b0ae commit 270f8fa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+229
-219
lines changed

‎sass/animations/_mixins.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* stylelint-disable keyframes-name-pattern */
1+
// stylelint-disable keyframes-name-pattern
22
@use 'sass:list';
33
@use 'sass:map';
44
@use 'sass:string';

‎sass/animations/entrances/_flicker.scss‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@
165165

166166
20.1% {
167167
opacity: 1;
168-
box-shadow: 0 0 30px rgb(255 255 255 / 25%);
168+
box-shadow: 0 0 30px rgb(255 255 255 / 0.25);
169169
}
170170

171171
20.6% {
@@ -181,15 +181,15 @@
181181
30.1% {
182182
opacity: 1;
183183
box-shadow:
184-
0 0 30px rgb(255 255 255 / 45%),
185-
0 0 60px rgb(255 255 255 / 25%);
184+
0 0 30px rgb(255 255 255 / 0.45),
185+
0 0 60px rgb(255 255 255 / 0.25);
186186
}
187187

188188
30.5% {
189189
opacity: 1;
190190
box-shadow:
191-
0 0 30px rgb(255 255 255 / 45%),
192-
0 0 60px rgb(255 255 255 / 25%);
191+
0 0 30px rgb(255 255 255 / 0.45),
192+
0 0 60px rgb(255 255 255 / 0.25);
193193
}
194194

195195
30.6% {
@@ -205,22 +205,22 @@
205205
45.1% {
206206
opacity: 1;
207207
box-shadow:
208-
0 0 30px rgb(255 255 255 / 45%),
209-
0 0 60px rgb(255 255 255 / 25%);
208+
0 0 30px rgb(255 255 255 / 0.45),
209+
0 0 60px rgb(255 255 255 / 0.25);
210210
}
211211

212212
50% {
213213
opacity: 1;
214214
box-shadow:
215-
0 0 30px rgb(255 255 255 / 45%),
216-
0 0 60px rgb(255 255 255 / 25%);
215+
0 0 30px rgb(255 255 255 / 0.45),
216+
0 0 60px rgb(255 255 255 / 0.25);
217217
}
218218

219219
55% {
220220
opacity: 1;
221221
box-shadow:
222-
0 0 30px rgb(255 255 255 / 45%),
223-
0 0 60px rgb(255 255 255 / 25%);
222+
0 0 30px rgb(255 255 255 / 0.45),
223+
0 0 60px rgb(255 255 255 / 0.25);
224224
}
225225

226226
55.1% {
@@ -236,15 +236,15 @@
236236
57.1% {
237237
opacity: 1;
238238
box-shadow:
239-
0 0 30px rgb(255 255 255 / 55%),
240-
0 0 60px rgb(255 255 255 / 30%);
239+
0 0 30px rgb(255 255 255 / 0.55),
240+
0 0 60px rgb(255 255 255 / 0.3);
241241
}
242242

243243
60% {
244244
opacity: 1;
245245
box-shadow:
246-
0 0 30px rgb(255 255 255 / 55%),
247-
0 0 60px rgb(255 255 255 / 30%);
246+
0 0 30px rgb(255 255 255 / 0.55),
247+
0 0 60px rgb(255 255 255 / 0.3);
248248
}
249249

250250
60.1% {
@@ -260,17 +260,17 @@
260260
65.1% {
261261
opacity: 1;
262262
box-shadow:
263-
0 0 30px rgb(255 255 255 / 55%),
264-
0 0 60px rgb(255 255 255 / 30%),
265-
0 0 100px rgb(255 255 255 / 10%);
263+
0 0 30px rgb(255 255 255 / 0.55),
264+
0 0 60px rgb(255 255 255 / 0.3),
265+
0 0 100px rgb(255 255 255 / 0.1);
266266
}
267267

268268
75% {
269269
opacity: 1;
270270
box-shadow:
271-
0 0 30px rgb(255 255 255 / 55%),
272-
0 0 60px rgb(255 255 255 / 30%),
273-
0 0 100px rgb(255 255 255 / 10%);
271+
0 0 30px rgb(255 255 255 / 0.55),
272+
0 0 60px rgb(255 255 255 / 0.3),
273+
0 0 100px rgb(255 255 255 / 0.1);
274274
}
275275

276276
75.1% {
@@ -286,19 +286,19 @@
286286
77.1% {
287287
opacity: 1;
288288
box-shadow:
289-
0 0 30px rgb(255 255 255 / 60%),
290-
0 0 60px rgb(255 255 255 / 40%),
291-
0 0 110px rgb(255 255 255 / 20%),
292-
0 0 100px rgb(255 255 255 / 10%);
289+
0 0 30px rgb(255 255 255 / 0.6),
290+
0 0 60px rgb(255 255 255 / 0.4),
291+
0 0 110px rgb(255 255 255 / 0.2),
292+
0 0 100px rgb(255 255 255 / 0.1);
293293
}
294294

295295
85% {
296296
opacity: 1;
297297
box-shadow:
298-
0 0 30px rgb(255 255 255 / 60%),
299-
0 0 60px rgb(255 255 255 / 40%),
300-
0 0 110px rgb(255 255 255 / 20%),
301-
0 0 100px rgb(255 255 255 / 10%);
298+
0 0 30px rgb(255 255 255 / 0.6),
299+
0 0 60px rgb(255 255 255 / 0.4),
300+
0 0 110px rgb(255 255 255 / 0.2),
301+
0 0 100px rgb(255 255 255 / 0.1);
302302
}
303303

304304
85.1% {
@@ -314,19 +314,19 @@
314314
86.1% {
315315
opacity: 1;
316316
box-shadow:
317-
0 0 30px rgb(255 255 255 / 60%),
318-
0 0 60px rgb(255 255 255 / 45%),
319-
0 0 110px rgb(255 255 255 / 25%),
320-
0 0 100px rgb(255 255 255 / 10%);
317+
0 0 30px rgb(255 255 255 / 0.6),
318+
0 0 60px rgb(255 255 255 / 0.45),
319+
0 0 110px rgb(255 255 255 / 0.25),
320+
0 0 100px rgb(255 255 255 / 0.1);
321321
}
322322

323323
100% {
324324
opacity: 1;
325325
box-shadow:
326-
0 0 30px rgb(255 255 255 / 60%),
327-
0 0 60px rgb(255 255 255 / 45%),
328-
0 0 110px rgb(255 255 255 / 25%),
329-
0 0 100px rgb(255 255 255 / 10%);
326+
0 0 30px rgb(255 255 255 / 0.6),
327+
0 0 60px rgb(255 255 255 / 0.45),
328+
0 0 110px rgb(255 255 255 / 0.25),
329+
0 0 100px rgb(255 255 255 / 0.1);
330330
}
331331
}
332332
}

‎sass/animations/exits/_flicker.scss‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -158,19 +158,19 @@
158158
0% {
159159
opacity: 1;
160160
box-shadow:
161-
0 0 30px rgb(255 255 255 / 60%),
162-
0 0 60px rgb(255 255 255 / 45%),
163-
0 0 110px rgb(255 255 255 / 25%),
164-
0 0 100px rgb(255 255 255 / 10%);
161+
0 0 30px rgb(255 255 255 / 0.6),
162+
0 0 60px rgb(255 255 255 / 0.45),
163+
0 0 110px rgb(255 255 255 / 0.25),
164+
0 0 100px rgb(255 255 255 / 0.1);
165165
}
166166

167167
13.9% {
168168
opacity: 1;
169169
box-shadow:
170-
0 0 30px rgb(255 255 255 / 60%),
171-
0 0 60px rgb(255 255 255 / 45%),
172-
0 0 110px rgb(255 255 255 / 25%),
173-
0 0 100px rgb(255 255 255 / 10%);
170+
0 0 30px rgb(255 255 255 / 0.6),
171+
0 0 60px rgb(255 255 255 / 0.45),
172+
0 0 110px rgb(255 255 255 / 0.25),
173+
0 0 100px rgb(255 255 255 / 0.1);
174174
}
175175

176176
14% {
@@ -186,19 +186,19 @@
186186
15% {
187187
opacity: 1;
188188
box-shadow:
189-
0 0 30px rgb(255 255 255 / 55%),
190-
0 0 60px rgb(255 255 255 / 40%),
191-
0 0 110px rgb(255 255 255 / 20%),
192-
0 0 100px rgb(255 255 255 / 10%);
189+
0 0 30px rgb(255 255 255 / 0.55),
190+
0 0 60px rgb(255 255 255 / 0.4),
191+
0 0 110px rgb(255 255 255 / 0.2),
192+
0 0 100px rgb(255 255 255 / 0.1);
193193
}
194194

195195
22.9% {
196196
opacity: 1;
197197
box-shadow:
198-
0 0 30px rgb(255 255 255 / 55%),
199-
0 0 60px rgb(255 255 255 / 40%),
200-
0 0 110px rgb(255 255 255 / 20%),
201-
0 0 100px rgb(255 255 255 / 10%);
198+
0 0 30px rgb(255 255 255 / 0.55),
199+
0 0 60px rgb(255 255 255 / 0.4),
200+
0 0 110px rgb(255 255 255 / 0.2),
201+
0 0 100px rgb(255 255 255 / 0.1);
202202
}
203203

204204
23% {
@@ -214,17 +214,17 @@
214214
25% {
215215
opacity: 1;
216216
box-shadow:
217-
0 0 30px rgb(255 255 255 / 55%),
218-
0 0 60px rgb(255 255 255 / 35%),
219-
0 0 100px rgb(255 255 255 / 10%);
217+
0 0 30px rgb(255 255 255 / 0.55),
218+
0 0 60px rgb(255 255 255 / 0.35),
219+
0 0 100px rgb(255 255 255 / 0.1);
220220
}
221221

222222
34.9% {
223223
opacity: 1;
224224
box-shadow:
225-
0 0 30px rgb(255 255 255 / 55%),
226-
0 0 60px rgb(255 255 255 / 35%),
227-
0 0 100px rgb(255 255 255 / 10%);
225+
0 0 30px rgb(255 255 255 / 0.55),
226+
0 0 60px rgb(255 255 255 / 0.35),
227+
0 0 100px rgb(255 255 255 / 0.1);
228228
}
229229

230230
35% {
@@ -240,15 +240,15 @@
240240
40% {
241241
opacity: 1;
242242
box-shadow:
243-
0 0 30px rgb(255 255 255 / 55%),
244-
0 0 60px rgb(255 255 255 / 35%);
243+
0 0 30px rgb(255 255 255 / 0.55),
244+
0 0 60px rgb(255 255 255 / 0.35);
245245
}
246246

247247
42.9% {
248248
opacity: 1;
249249
box-shadow:
250-
0 0 30px rgb(255 255 255 / 55%),
251-
0 0 60px rgb(255 255 255 / 35%);
250+
0 0 30px rgb(255 255 255 / 0.55),
251+
0 0 60px rgb(255 255 255 / 0.35);
252252
}
253253

254254
43% {
@@ -264,22 +264,22 @@
264264
45% {
265265
opacity: 1;
266266
box-shadow:
267-
0 0 30px rgb(255 255 255 / 45%),
268-
0 0 60px rgb(255 255 255 / 25%);
267+
0 0 30px rgb(255 255 255 / 0.45),
268+
0 0 60px rgb(255 255 255 / 0.25);
269269
}
270270

271271
50% {
272272
opacity: 1;
273273
box-shadow:
274-
0 0 30px rgb(255 255 255 / 45%),
275-
0 0 60px rgb(255 255 255 / 25%);
274+
0 0 30px rgb(255 255 255 / 0.45),
275+
0 0 60px rgb(255 255 255 / 0.25);
276276
}
277277

278278
54.9% {
279279
opacity: 1;
280280
box-shadow:
281-
0 0 30px rgb(255 255 255 / 45%),
282-
0 0 60px rgb(255 255 255 / 25%);
281+
0 0 30px rgb(255 255 255 / 0.45),
282+
0 0 60px rgb(255 255 255 / 0.25);
283283
}
284284

285285
55% {
@@ -295,15 +295,15 @@
295295
69.5% {
296296
opacity: 1;
297297
box-shadow:
298-
0 0 30px rgb(255 255 255 / 45%),
299-
0 0 60px rgb(255 255 255 / 25%);
298+
0 0 30px rgb(255 255 255 / 0.45),
299+
0 0 60px rgb(255 255 255 / 0.25);
300300
}
301301

302302
69.9% {
303303
opacity: 1;
304304
box-shadow:
305-
0 0 30px rgb(255 255 255 / 45%),
306-
0 0 60px rgb(255 255 255 / 25%);
305+
0 0 30px rgb(255 255 255 / 0.45),
306+
0 0 60px rgb(255 255 255 / 0.25);
307307
}
308308

309309
70% {
@@ -318,7 +318,7 @@
318318

319319
79.9% {
320320
opacity: 1;
321-
box-shadow: 0 0 30px rgb(255 255 255 / 25%);
321+
box-shadow: 0 0 30px rgb(255 255 255 / 0.25);
322322
}
323323

324324
80% {

0 commit comments

Comments
 (0)