Skip to content

Commit 356976f

Browse files
clemillerclemiller
authored
Fix sass deprecation warnings (#726)
* address deprecated sass fns and mixed declarations * finish sass migration
1 parent 0b51d65 commit 356976f

21 files changed

Lines changed: 361 additions & 364 deletions

‎nav-app/src/app/app.component.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
@import '../colors.scss';
1+
@use 'sass:color';
2+
3+
@use '../colors.scss';
24

35
.app-container {
4-
@include adaptive-color('background-color', color(body), color(dark-1));
56
height: 100vh;
7+
@include colors.adaptive-color('background-color', colors.color(body), colors.color(dark-1));
68
}
79

810
.nav-app {
9-
@include adaptive-color('background-color', color(light), darken(color(dark), 8%));
11+
@include colors.adaptive-color('background-color', colors.color(light), color.scale(colors.color(dark), $lightness: -8%));
1012

1113
tabs {
1214
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
1315
font-size: 9pt;
1416
}
1517

1618
.version-footer {
17-
@include adaptive-color('color', on-color(light), on-color(dark-2));
1819
font-size: 7pt;
1920
border: none;
2021
background-color: transparent;
@@ -24,6 +25,7 @@
2425
display: block;
2526
position: fixed;
2627
bottom: 16px;
28+
@include colors.adaptive-color('color', colors.on-color(light), colors.on-color(dark-2));
2729
&:hover {
2830
text-decoration: underline;
2931
cursor: pointer;

‎nav-app/src/app/datatable/data-table.component.scss‎

Lines changed: 53 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
@import '../../colors.scss';
2-
@import '../../styles.scss';
1+
@use 'sass:color';
2+
3+
@use '../../colors.scss';
4+
@use '../../styles.scss';
35

46
$cellSize: 15px;
57

@@ -15,13 +17,13 @@ $cellSize: 15px;
1517

1618
// content of each tab
1719
.matrices {
18-
@include adaptive-color-dark-only('background-color', lighten(color(dark-1), 3%));
19-
@include adaptive-color-dark-only('color', on-color(dark));
20-
@include adaptive-color-dark-only('border', none);
2120
overflow-x: scroll;
2221
min-height: 50vh;
23-
border: 1px solid color(panel-dark);
22+
border: 1px solid colors.color(panel-dark);
2423
transition: height ease-in-out 0.2s;
24+
@include colors.adaptive-color-dark-only('background-color', color.scale(colors.color(dark-1), $lightness: 3%));
25+
@include colors.adaptive-color-dark-only('color', colors.on-color(dark));
26+
@include colors.adaptive-color-dark-only('border', none);
2527

2628
.spinner {
2729
display: flex;
@@ -30,7 +32,7 @@ $cellSize: 15px;
3032
height: 50vh;
3133

3234
mat-progress-spinner circle {
33-
stroke: on-color-deemphasis(body);
35+
stroke: colors.on-color-deemphasis(body);
3436
}
3537
}
3638

@@ -50,11 +52,11 @@ $cellSize: 15px;
5052
padding-bottom: 5px;
5153
margin-bottom: 5px;
5254
font-size: 16px;
53-
border-bottom: 1px solid color(panel-dark);
55+
border-bottom: 1px solid colors.color(panel-dark);
5456
}
5557

5658
& + .matrix-column {
57-
border-left: 1px solid color(panel-dark);
59+
border-left: 1px solid colors.color(panel-dark);
5860
}
5961
}
6062
}
@@ -66,9 +68,9 @@ $cellSize: 15px;
6668
text-align: center;
6769

6870
.color-block {
69-
@include adaptive-color('border', 1px solid black, 1px solid color(dark-disabled));
7071
cursor: pointer;
7172
margin: 2.5px;
73+
@include colors.adaptive-color('border', 1px solid black, 1px solid colors.color(dark-disabled));
7274

7375
&.square {
7476
display: inline-block;
@@ -77,11 +79,11 @@ $cellSize: 15px;
7779
}
7880

7981
&.wide {
80-
@include adaptive-color-dark-only('color', color(dark-disabled));
8182
display: block;
8283
height: $cellSize;
8384
font-size: 10pt;
84-
color: darken(white, 50%);
85+
color: color.scale(white, $lightness: -50%);
86+
@include colors.adaptive-color-dark-only('color', colors.color(dark-disabled));
8587
}
8688
}
8789
}
@@ -101,22 +103,22 @@ $cellSize: 15px;
101103
}
102104

103105
.gradient-section-content {
104-
@include adaptive-color('border-color', black, white);
105106
border-style: solid;
106107
border-width: 1px 0;
107108
text-align: left;
109+
@include colors.adaptive-color('border-color', black, white);
108110
}
109111

110112
.display-buttons {
111113
text-align: center;
112114

113115
.squarebutton {
114-
@include adaptive-color('border', 1px solid color(panel-dark), 1px solid color(dark-disabled));
115116
padding: 4px 0;
116117
cursor: pointer;
118+
@include colors.adaptive-color('border', 1px solid colors.color(panel-dark), 1px solid colors.color(dark-disabled));
117119

118120
&:hover {
119-
@include adaptive-color('background', color(panel-light), color(cell-highlight-dark-color));
121+
@include colors.adaptive-color('background', colors.color(panel-light), colors.color(cell-highlight-dark-color));
120122
}
121123

122124
&.gradient:hover {
@@ -138,18 +140,18 @@ $cellSize: 15px;
138140

139141
td {
140142
button {
141-
@include adaptive-color-dark-only('background-color', color(dark-1));
142-
@include adaptive-color-dark-only('border', 1px solid color(dark-disabled));
143-
@include adaptive-color-dark-only('color', white);
143+
@include colors.adaptive-color-dark-only('background-color', colors.color(dark-1));
144+
@include colors.adaptive-color-dark-only('border', 1px solid colors.color(dark-disabled));
145+
@include colors.adaptive-color-dark-only('color', white);
144146

145147
&:hover {
146-
@include adaptive-color-dark-only('background-color', black);
148+
@include colors.adaptive-color-dark-only('background-color', black);
147149
}
148150
}
149151

150152
input {
151-
@include adaptive-color-dark-only('background-color', black);
152-
@include adaptive-color-dark-only('color', white);
153+
@include colors.adaptive-color-dark-only('background-color', black);
154+
@include colors.adaptive-color-dark-only('color', white);
153155
}
154156

155157
&.buttons > div {
@@ -185,8 +187,8 @@ $cellSize: 15px;
185187
}
186188

187189
.minmax {
188-
@include adaptive-color('background-color', color(panel-light), color(dark-4));
189190
text-align: center;
191+
@include colors.adaptive-color('background-color', colors.color(panel-light), colors.color(dark-4));
190192
}
191193
}
192194

@@ -216,18 +218,15 @@ $cellSize: 15px;
216218

217219
.section-label {
218220
cursor: pointer;
219-
220221
padding: 6px 24px;
221-
222-
@include adaptive-color('color', black, white);
223-
224-
@include adaptive-color('border-color', black, white);
225222
border-style: solid;
226223
border-width: 1px;
224+
@include colors.adaptive-color('color', black, white);
225+
@include colors.adaptive-color('border-color', black, white);
227226

228227
&.active {
229-
@include adaptive-color('background-color', white, #364370);
230-
@include adaptive-color('border-color', #464dff, #464dff);
228+
@include colors.adaptive-color('background-color', white, #364370);
229+
@include colors.adaptive-color('border-color', #464dff, #464dff);
231230
}
232231
}
233232

@@ -239,19 +238,15 @@ $cellSize: 15px;
239238
padding: 5px;
240239

241240
svg {
242-
@include adaptive-color-dark-only('fill', on-color(dark));
241+
@include colors.adaptive-color-dark-only('fill', colors.on-color(dark));
243242
}
244243
&:hover svg {
245-
@include adaptive-color-dark-only('fill', on-color(dark));
246244
fill: #505050;
245+
@include colors.adaptive-color-dark-only('fill', colors.on-color(dark));
247246
}
248247
}
249248

250249
.dropdown-container {
251-
@include adaptive-color-dark-only('background', color(dark-3));
252-
@include adaptive-color-dark-only('border-color', color(dark-3));
253-
@include adaptive-color-dark-only('box-shadow', 2px 1px 1px color(dark-2));
254-
@include adaptive-color-dark-only('color', color(dark-link));
255250
position: absolute;
256251
right: 16px;
257252
display: flex;
@@ -266,12 +261,16 @@ $cellSize: 15px;
266261
padding: 10px;
267262
top: 40px;
268263
z-index: 9;
264+
@include colors.adaptive-color-dark-only('background', colors.color(dark-3));
265+
@include colors.adaptive-color-dark-only('border-color', colors.color(dark-3));
266+
@include colors.adaptive-color-dark-only('box-shadow', 2px 1px 1px colors.color(dark-2));
267+
@include colors.adaptive-color-dark-only('color', colors.color(dark-link));
269268
button {
270-
@include adaptive-color-dark-only('color', on-color(dark));
271269
border: none;
272270
background-color: transparent;
273271
text-align: right;
274272
padding-bottom: 5px;
273+
@include colors.adaptive-color-dark-only('color', colors.on-color(dark));
275274
&:hover {
276275
text-decoration: underline;
277276
cursor: pointer;
@@ -299,14 +298,14 @@ $cellSize: 15px;
299298

300299
.filter-option {
301300
&:hover {
302-
@include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
301+
@include colors.adaptive-color('background', colors.color(cell-highlight-color), colors.color(cell-highlight-dark-color));
303302
}
304303
}
305304
}
306305
}
307306

308307
.warning {
309-
@include adaptive-color('color', #b30000, #ffab0f);
308+
@include colors.adaptive-color('color', #b30000, #ffab0f);
310309
}
311310

312311
.warning-label {
@@ -335,15 +334,15 @@ $cellSize: 15px;
335334

336335
.multiselect-list-item {
337336
&:hover {
338-
@include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
337+
@include colors.adaptive-color('background', colors.color(cell-highlight-color), colors.color(cell-highlight-dark-color));
339338
}
340339

341340
.multiselect-list-item-label {
342341
width: 25ex;
343342
}
344343

345344
&.selected:not(:hover) {
346-
background: color(panel-dark);
345+
background: colors.color(panel-dark);
347346
}
348347
}
349348
}
@@ -368,29 +367,27 @@ $cellSize: 15px;
368367

369368
.search-list-item {
370369
&:hover {
371-
@include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
370+
@include colors.adaptive-color('background', colors.color(cell-highlight-color), colors.color(cell-highlight-dark-color));
372371
}
373372

374373
.search-list-item-label {
375374
width: 25ex;
376375
}
377376

378377
&.selected:not(:hover) {
379-
background: color(panel-dark);
378+
background: colors.color(panel-dark);
380379
}
381380
}
382381
}
383382
}
384383

385384
.search-button {
386385
&:hover {
387-
@include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
386+
@include colors.adaptive-color('background', colors.color(cell-highlight-color), colors.color(cell-highlight-dark-color));
388387
}
389388
}
390389

391390
.button {
392-
@include adaptive-color('background-color', color(panel-dark), color(dark-4));
393-
@include adaptive-color-dark-only('color', on-color(dark));
394391
border: none;
395392
padding: 4px 10px;
396393
text-align: center;
@@ -399,9 +396,11 @@ $cellSize: 15px;
399396
display: inline-block;
400397
text-decoration: none;
401398
cursor: pointer;
399+
@include colors.adaptive-color('background-color', colors.color(panel-dark), colors.color(dark-4));
400+
@include colors.adaptive-color-dark-only('color', colors.on-color(dark));
402401

403402
&:hover {
404-
@include adaptive-color('background-color', color(button-dark), color(dark-link));
403+
@include colors.adaptive-color('background-color', colors.color(button-dark), colors.color(dark-link));
405404
}
406405
}
407406

@@ -414,26 +413,26 @@ $cellSize: 15px;
414413
}
415414

416415
.legend {
417-
@include adaptive-color('background-color', white, color(dark-3));
418-
@include adaptive-color-light-only('border-left', 1px solid color(panel-dark));
419416
z-index: 999;
420417
position: fixed;
421418
bottom: 0;
422419
right: 0;
423420
width: 300px;
424421
height: fit-content;
422+
@include colors.adaptive-color('background-color', white, colors.color(dark-3));
423+
@include colors.adaptive-color-light-only('border-left', 1px solid colors.color(panel-dark));
425424
@media print {
426425
display: none;
427426
}
428427

429428
.itemArea {
430-
@include adaptive-color-dark-only('color', on-color(dark));
431429
position: static;
432430
overflow-y: scroll;
433431
margin: 30px 8px 8px;
434432
height: 270px;
435433
width: 100%;
436434
overflow-x: hidden;
435+
@include colors.adaptive-color-dark-only('color', colors.on-color(dark));
437436

438437
.item + .item {
439438
margin-top: 6px;
@@ -451,8 +450,6 @@ $cellSize: 15px;
451450
}
452451

453452
.legendBar {
454-
@include adaptive-color('background-color', color(panel-dark), color(dark-3));
455-
@include adaptive-color-dark-only('color', on-color(dark));
456453
z-index: 999;
457454
position: fixed;
458455
bottom: 0;
@@ -461,10 +458,12 @@ $cellSize: 15px;
461458
height: 30px;
462459
transition: 0.3s;
463460
display: flex;
461+
align-items: center;
462+
@include colors.adaptive-color('background-color', colors.color(panel-dark), colors.color(dark-3));
463+
@include colors.adaptive-color-dark-only('color', colors.on-color(dark));
464464
@media print {
465465
display: none;
466466
}
467-
align-items: center;
468467

469468
.title {
470469
flex: 1;
@@ -473,8 +472,8 @@ $cellSize: 15px;
473472
}
474473

475474
&:hover {
476-
@include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
477475
cursor: pointer;
476+
@include colors.adaptive-color('background', colors.color(cell-highlight-color), colors.color(cell-highlight-dark-color));
478477
}
479478
}
480479

@@ -490,7 +489,7 @@ $cellSize: 15px;
490489
padding: 10px;
491490

492491
& + .section {
493-
border-top: 1px solid color(panel-light);
492+
border-top: 1px solid colors.color(panel-light);
494493
}
495494
}
496495

0 commit comments

Comments
 (0)