@natec/mef-dev-ui-kit 20.1.16 → 20.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/fesm2022/natec-mef-dev-ui-kit.mjs +75 -71
  2. package/fesm2022/natec-mef-dev-ui-kit.mjs.map +1 -1
  3. package/index.d.ts +83 -65
  4. package/index.d.ts.map +1 -1
  5. package/package.json +1 -1
  6. package/src/lib/styles/core.scss +1 -1
  7. package/src/lib/styles/pg/vendor/md-cards-grid.scss +124 -124
  8. package/src/lib/styles/pg/vendor/md-datatable.scss +342 -0
  9. package/src/lib/styles/pg/vendor/md-grid.scss +663 -0
package/src/lib/styles/pg/vendor/md-cards-grid.scss CHANGED
@@ -7,12 +7,12 @@
7
7
  // ═══════════════════════════════════════════════════════════════════════════
8
8
  //
9
9
  // USAGE:
10
- // Add the theme class to the md-cards-grid element:
11
- // <md-cards-grid class="md-cards-grid-bordered" ...>
10
+ // Add the theme class to the md-grid element:
11
+ // <md-grid class="md-grid-bordered" ...>
12
12
  //
13
13
  // Or wrap it in a container:
14
- // <div class="md-cards-grid-bordered">
15
- // <md-cards-grid ...>
14
+ // <div class="md-grid-bordered">
15
+ // <md-grid ...>
16
16
  // </div>
17
17
  //
18
18
  // ═══════════════════════════════════════════════════════════════════════════
@@ -20,83 +20,83 @@
20
20
  // ═══════════════════════════════════════════════════════════════════════════
21
21
  //
22
22
  // HOST / CONTAINER:
23
- // .md-cards-grid - Main component host
24
- // .md-cards-grid-shrink-mode - Applied when overflowMode="shrink"
23
+ // .md-grid - Main component host
24
+ // .md-grid-shrink-mode - Applied when overflowMode="shrink"
25
25
  //
26
26
  // SCROLL:
27
- // .md-cards-grid-scroll-container - Horizontal scroll wrapper
27
+ // .md-grid-scroll-container - Horizontal scroll wrapper
28
28
  //
29
29
  // HEADER:
30
- // .md-cards-grid-header - Header container
31
- // .md-cards-grid-header-inner - Header flex container
32
- // .md-cards-grid-header-cell - Individual header cell
33
- // .md-cards-grid-header-cell-label - Header cell text label
34
- // .md-cards-grid-header-cell.sortable - Sortable header cell
35
- // .md-cards-grid-header-cell.sort-active - Currently sorted column
36
- // .md-cards-grid-header-cell.sort-asc - Ascending sort
37
- // .md-cards-grid-header-cell.sort-desc - Descending sort
38
- // .md-cards-grid-header-cell.resizeable - Resizeable column header
30
+ // .md-grid-header - Header container
31
+ // .md-grid-header-inner - Header flex container
32
+ // .md-grid-header-cell - Individual header cell
33
+ // .md-grid-header-cell-label - Header cell text label
34
+ // .md-grid-header-cell.sortable - Sortable header cell
35
+ // .md-grid-header-cell.sort-active - Currently sorted column
36
+ // .md-grid-header-cell.sort-asc - Ascending sort
37
+ // .md-grid-header-cell.sort-desc - Descending sort
38
+ // .md-grid-header-cell.resizeable - Resizeable column header
39
39
  //
40
40
  // SORT ICONS:
41
- // .md-cards-grid-sort-icon - Sort icon container
42
- // .md-cards-grid-sort-asc - Ascending sort icon
43
- // .md-cards-grid-sort-desc - Descending sort icon
41
+ // .md-grid-sort-icon - Sort icon container
42
+ // .md-grid-sort-asc - Ascending sort icon
43
+ // .md-grid-sort-desc - Descending sort icon
44
44
  //
45
45
  // RESIZE:
46
- // .md-cards-grid-resize-handle - Column resize drag handle
47
- // body.md-cards-grid-resizing - Applied to body during resize
46
+ // .md-grid-resize-handle - Column resize drag handle
47
+ // body.md-grid-resizing - Applied to body during resize
48
48
  //
49
49
  // BODY:
50
- // .md-cards-grid-body - Body container (cards wrapper)
50
+ // .md-grid-body - Body container (cards wrapper)
51
51
  //
52
52
  // GROUPS:
53
- // .md-cards-grid-group - Group container
54
- // .md-cards-grid-group-header - Group header
55
- // .md-cards-grid-group-title - Group title text
56
- // .md-cards-grid-group-rows - Group rows container
53
+ // .md-grid-group - Group container
54
+ // .md-grid-group-header - Group header
55
+ // .md-grid-group-title - Group title text
56
+ // .md-grid-group-rows - Group rows container
57
57
  //
58
58
  // CARD (ROW):
59
- // .md-cards-grid-card - Individual card/row
60
- // .md-cards-grid-card-editing - Card in edit mode
61
- // .md-cards-grid-card-fixed-height - Card with fixed height (clips content)
59
+ // .md-grid-card - Individual card/row
60
+ // .md-grid-card-editing - Card in edit mode
61
+ // .md-grid-card-fixed-height - Card with fixed height (clips content)
62
62
  //
63
63
  // CELL:
64
- // .md-cards-grid-cell - Individual cell
65
- // .md-cards-grid-cell-value - Cell value wrapper
64
+ // .md-grid-cell - Individual cell
65
+ // .md-grid-cell-value - Cell value wrapper
66
66
  //
67
67
  // ACTIONS:
68
- // .md-cards-grid-actions-cell - Actions cell container
69
- // .md-cards-grid-action-btn - Action button base
70
- // .md-cards-grid-action-edit - Edit button
71
- // .md-cards-grid-action-save - Save button
72
- // .md-cards-grid-action-cancel - Cancel button
68
+ // .md-grid-actions-cell - Actions cell container
69
+ // .md-grid-action-btn - Action button base
70
+ // .md-grid-action-edit - Edit button
71
+ // .md-grid-action-save - Save button
72
+ // .md-grid-action-cancel - Cancel button
73
73
  //
74
74
  // ACTION ICONS:
75
- // .md-cards-grid-icon-edit - Edit icon (pencil)
76
- // .md-cards-grid-icon-save - Save icon (checkmark)
77
- // .md-cards-grid-icon-cancel - Cancel icon (X)
75
+ // .md-grid-icon-edit - Edit icon (pencil)
76
+ // .md-grid-icon-save - Save icon (checkmark)
77
+ // .md-grid-icon-cancel - Cancel icon (X)
78
78
  //
79
79
  // FOOTER / PAGINATION:
80
- // .md-cards-grid-footer - Footer container
81
- // .md-cards-grid-pager - Pager container
82
- // .md-cards-grid-pager-btn - Pager button
83
- // .md-cards-grid-pager-info - Page info text (e.g., "1 / 5")
80
+ // .md-grid-footer - Footer container
81
+ // .md-grid-pager - Pager container
82
+ // .md-grid-pager-btn - Pager button
83
+ // .md-grid-pager-info - Page info text (e.g., "1 / 5")
84
84
  //
85
85
  // PAGER ICONS:
86
- // .md-cards-grid-icon-first - First page icon
87
- // .md-cards-grid-icon-prev - Previous page icon
88
- // .md-cards-grid-icon-next - Next page icon
89
- // .md-cards-grid-icon-last - Last page icon
86
+ // .md-grid-icon-first - First page icon
87
+ // .md-grid-icon-prev - Previous page icon
88
+ // .md-grid-icon-next - Next page icon
89
+ // .md-grid-icon-last - Last page icon
90
90
  //
91
91
  // ═══════════════════════════════════════════════════════════════════════════
92
92
 
93
- .md-cards-grid-bordered {
93
+ .md-grid-bordered {
94
94
  // ═════════════════════════════════════════════════════════════════════════
95
95
  // HOST STYLES
96
96
  // ═════════════════════════════════════════════════════════════════════════
97
97
 
98
- &.md-cards-grid,
99
- .md-cards-grid {
98
+ &.md-grid,
99
+ .md-grid {
100
100
  font-family: $base-font-family;
101
101
  font-size: 13px;
102
102
  background: $White;
@@ -110,7 +110,7 @@
110
110
  // SCROLL CONTAINER
111
111
  // ═════════════════════════════════════════════════════════════════════════
112
112
 
113
- .md-cards-grid-scroll-container {
113
+ .md-grid-scroll-container {
114
114
  &::-webkit-scrollbar {
115
115
  height: 8px;
116
116
  }
@@ -133,12 +133,12 @@
133
133
  // HEADER
134
134
  // ═════════════════════════════════════════════════════════════════════════
135
135
 
136
- .md-cards-grid-header {
136
+ .md-grid-header {
137
137
  background: $White;
138
138
  border-bottom: 1px solid $Light-Gray-2;
139
139
  }
140
140
 
141
- .md-cards-grid-header-cell {
141
+ .md-grid-header-cell {
142
142
  padding: 12px 16px;
143
143
  background: $White;
144
144
  font-size: 12px;
@@ -172,12 +172,12 @@
172
172
  // SORT ICONS
173
173
  // ═════════════════════════════════════════════════════════════════════════
174
174
 
175
- .md-cards-grid-sort-icon {
175
+ .md-grid-sort-icon {
176
176
  margin-left: 4px;
177
177
  color: $Light-Gray-1;
178
178
 
179
- &.md-cards-grid-sort-asc,
180
- &.md-cards-grid-sort-desc {
179
+ &.md-grid-sort-asc,
180
+ &.md-grid-sort-desc {
181
181
  color: $Link;
182
182
  }
183
183
  }
@@ -186,7 +186,7 @@
186
186
  // RESIZE HANDLE
187
187
  // ═════════════════════════════════════════════════════════════════════════
188
188
 
189
- .md-cards-grid-resize-handle {
189
+ .md-grid-resize-handle {
190
190
  right: 0;
191
191
  width: 8px;
192
192
 
@@ -203,7 +203,7 @@
203
203
  // BODY
204
204
  // ═════════════════════════════════════════════════════════════════════════
205
205
 
206
- .md-cards-grid-body {
206
+ .md-grid-body {
207
207
  padding: 8px;
208
208
  background: $Light-Gray-3;
209
209
  }
@@ -212,7 +212,7 @@
212
212
  // GROUPS
213
213
  // ═════════════════════════════════════════════════════════════════════════
214
214
 
215
- .md-cards-grid-group {
215
+ .md-grid-group {
216
216
  margin-bottom: 16px;
217
217
 
218
218
  &:last-child {
@@ -220,7 +220,7 @@
220
220
  }
221
221
  }
222
222
 
223
- .md-cards-grid-group-header {
223
+ .md-grid-group-header {
224
224
  padding: 8px 12px;
225
225
  margin-bottom: 8px;
226
226
  background: $Light-Gray-2;
@@ -230,7 +230,7 @@
230
230
  color: $Dark-Gray-1;
231
231
  }
232
232
 
233
- .md-cards-grid-group-rows {
233
+ .md-grid-group-rows {
234
234
  gap: 8px;
235
235
  }
236
236
 
@@ -238,7 +238,7 @@
238
238
  // CARD (ROW)
239
239
  // ═════════════════════════════════════════════════════════════════════════
240
240
 
241
- .md-cards-grid-card {
241
+ .md-grid-card {
242
242
  background: $White;
243
243
  border: 1px solid $Light-Gray-2;
244
244
  border-radius: $default-border-size;
@@ -251,7 +251,7 @@
251
251
  transform: none;
252
252
  }
253
253
 
254
- &.md-cards-grid-card-editing {
254
+ &.md-grid-card-editing {
255
255
  background: #fffef5;
256
256
  border-color: $Yellow;
257
257
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
@@ -262,7 +262,7 @@
262
262
  // CELL
263
263
  // ═════════════════════════════════════════════════════════════════════════
264
264
 
265
- .md-cards-grid-cell {
265
+ .md-grid-cell {
266
266
  padding: 12px 16px;
267
267
  font-size: 14px;
268
268
  color: $Black-Color;
@@ -273,7 +273,7 @@
273
273
  }
274
274
  }
275
275
 
276
- .md-cards-grid-cell-value {
276
+ .md-grid-cell-value {
277
277
  line-height: 1.4;
278
278
  }
279
279
 
@@ -281,7 +281,7 @@
281
281
  // ACTIONS CELL
282
282
  // ═════════════════════════════════════════════════════════════════════════
283
283
 
284
- .md-cards-grid-actions-cell {
284
+ .md-grid-actions-cell {
285
285
  padding: 8px 12px;
286
286
  gap: 4px;
287
287
  min-width: 80px;
@@ -292,7 +292,7 @@
292
292
  // ACTION BUTTONS
293
293
  // ═════════════════════════════════════════════════════════════════════════
294
294
 
295
- .md-cards-grid-action-btn {
295
+ .md-grid-action-btn {
296
296
  width: 28px;
297
297
  height: 28px;
298
298
  border-radius: 4px;
@@ -303,7 +303,7 @@
303
303
  }
304
304
  }
305
305
 
306
- .md-cards-grid-action-edit {
306
+ .md-grid-action-edit {
307
307
  color: $Link;
308
308
 
309
309
  &:hover {
@@ -311,7 +311,7 @@
311
311
  }
312
312
  }
313
313
 
314
- .md-cards-grid-action-save {
314
+ .md-grid-action-save {
315
315
  color: $Green;
316
316
 
317
317
  &:hover {
@@ -319,7 +319,7 @@
319
319
  }
320
320
  }
321
321
 
322
- .md-cards-grid-action-cancel {
322
+ .md-grid-action-cancel {
323
323
  color: $Red;
324
324
 
325
325
  &:hover {
@@ -331,9 +331,9 @@
331
331
  // ACTION ICONS
332
332
  // ═════════════════════════════════════════════════════════════════════════
333
333
 
334
- .md-cards-grid-icon-edit,
335
- .md-cards-grid-icon-save,
336
- .md-cards-grid-icon-cancel {
334
+ .md-grid-icon-edit,
335
+ .md-grid-icon-save,
336
+ .md-grid-icon-cancel {
337
337
  width: 16px;
338
338
  height: 16px;
339
339
  }
@@ -342,7 +342,7 @@
342
342
  // FOOTER / PAGINATION
343
343
  // ═════════════════════════════════════════════════════════════════════════
344
344
 
345
- .md-cards-grid-footer {
345
+ .md-grid-footer {
346
346
  padding: 8px 16px;
347
347
  background: $White;
348
348
  border-top: 1px solid $Light-Gray-2;
@@ -350,11 +350,11 @@
350
350
  color: $Dark-Gray-2;
351
351
  }
352
352
 
353
- .md-cards-grid-pager {
353
+ .md-grid-pager {
354
354
  gap: 4px;
355
355
  }
356
356
 
357
- .md-cards-grid-pager-btn {
357
+ .md-grid-pager-btn {
358
358
  width: 28px;
359
359
  height: 28px;
360
360
  border: 1px solid $Light-Gray-2;
@@ -372,7 +372,7 @@
372
372
  }
373
373
  }
374
374
 
375
- .md-cards-grid-pager-info {
375
+ .md-grid-pager-info {
376
376
  padding: 0 12px;
377
377
  font-weight: 500;
378
378
  }
@@ -382,24 +382,24 @@
382
382
  // ═════════════════════════════════════════════════════════════════════════
383
383
 
384
384
  @media (max-width: 768px) {
385
- &.md-cards-grid,
386
- .md-cards-grid {
385
+ &.md-grid,
386
+ .md-grid {
387
387
  font-size: 12px;
388
388
  }
389
389
 
390
- .md-cards-grid-header {
390
+ .md-grid-header {
391
391
  display: none;
392
392
  }
393
393
 
394
- .md-cards-grid-body {
394
+ .md-grid-body {
395
395
  padding: 8px;
396
396
  }
397
397
 
398
- .md-cards-grid-card {
398
+ .md-grid-card {
399
399
  flex-direction: column;
400
400
  }
401
401
 
402
- .md-cards-grid-cell {
402
+ .md-grid-cell {
403
403
  padding: 10px 12px;
404
404
  border-right: none;
405
405
  border-bottom: 1px solid $Light-Gray-2;
@@ -409,13 +409,13 @@
409
409
  }
410
410
  }
411
411
 
412
- .md-cards-grid-actions-cell {
412
+ .md-grid-actions-cell {
413
413
  border-left: none;
414
414
  border-top: 1px solid $Light-Gray-2;
415
415
  justify-content: center;
416
416
  }
417
417
 
418
- .md-cards-grid-footer {
418
+ .md-grid-footer {
419
419
  flex-direction: column;
420
420
  gap: 8px;
421
421
  padding: 8px 12px;
@@ -427,12 +427,12 @@
427
427
  // MODIFIER: Zebra striping (alternating row colors)
428
428
  // ═══════════════════════════════════════════════════════════════════════════
429
429
 
430
- .md-cards-grid-bordered.zebra {
431
- .md-cards-grid-body {
430
+ .md-grid-bordered.zebra {
431
+ .md-grid-body {
432
432
  background: $White;
433
433
  }
434
434
 
435
- .md-cards-grid-card {
435
+ .md-grid-card {
436
436
  border: none;
437
437
  border-radius: 0;
438
438
  box-shadow: none;
@@ -455,44 +455,44 @@
455
455
  // MODIFIER: Compact (smaller padding)
456
456
  // ═══════════════════════════════════════════════════════════════════════════
457
457
 
458
- .md-cards-grid-bordered.compact {
459
- .md-cards-grid-header-cell {
458
+ .md-grid-bordered.compact {
459
+ .md-grid-header-cell {
460
460
  padding: 8px 10px;
461
461
  font-size: 11px;
462
462
  }
463
463
 
464
- .md-cards-grid-body {
464
+ .md-grid-body {
465
465
  padding: 6px;
466
466
  }
467
467
 
468
- .md-cards-grid-group-rows {
468
+ .md-grid-group-rows {
469
469
  gap: 4px;
470
470
  }
471
471
 
472
- .md-cards-grid-card {
472
+ .md-grid-card {
473
473
  border-radius: 4px;
474
474
  }
475
475
 
476
- .md-cards-grid-cell {
476
+ .md-grid-cell {
477
477
  padding: 8px 10px;
478
478
  font-size: 12px;
479
479
  }
480
480
 
481
- .md-cards-grid-actions-cell {
481
+ .md-grid-actions-cell {
482
482
  padding: 6px 8px;
483
483
  min-width: 60px;
484
484
  }
485
485
 
486
- .md-cards-grid-action-btn {
486
+ .md-grid-action-btn {
487
487
  width: 24px;
488
488
  height: 24px;
489
489
  }
490
490
 
491
- .md-cards-grid-footer {
491
+ .md-grid-footer {
492
492
  padding: 6px 12px;
493
493
  }
494
494
 
495
- .md-cards-grid-pager-btn {
495
+ .md-grid-pager-btn {
496
496
  width: 24px;
497
497
  height: 24px;
498
498
  }
@@ -502,17 +502,17 @@
502
502
  // DARK THEME
503
503
  // ═══════════════════════════════════════════════════════════════════════════
504
504
 
505
- .bg-dark .md-cards-grid-bordered,
506
- .dark-mode .md-cards-grid-bordered,
507
- .md-cards-grid-bordered.dark-theme {
508
- &.md-cards-grid,
509
- .md-cards-grid {
505
+ .bg-dark .md-grid-bordered,
506
+ .dark-mode .md-grid-bordered,
507
+ .md-grid-bordered.dark-theme {
508
+ &.md-grid,
509
+ .md-grid {
510
510
  background: color.mix($Dark-Gray-1, $Black-Color, 90%);
511
511
  border-color: color.mix($Dark-Gray-2, $Black-Color, 70%);
512
512
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
513
513
  }
514
514
 
515
- .md-cards-grid-scroll-container {
515
+ .md-grid-scroll-container {
516
516
  &::-webkit-scrollbar-track {
517
517
  background: color.mix($Dark-Gray-1, $Black-Color, 80%);
518
518
  }
@@ -526,12 +526,12 @@
526
526
  }
527
527
  }
528
528
 
529
- .md-cards-grid-header {
529
+ .md-grid-header {
530
530
  background: color.mix($Dark-Gray-2, $Black-Color, 85%);
531
531
  border-bottom-color: color.mix($Dark-Gray-1, $Black-Color, 60%);
532
532
  }
533
533
 
534
- .md-cards-grid-header-cell {
534
+ .md-grid-header-cell {
535
535
  background: color.mix($Dark-Gray-2, $Black-Color, 85%);
536
536
  color: $Light-Gray-2;
537
537
 
@@ -544,31 +544,31 @@
544
544
  }
545
545
  }
546
546
 
547
- .md-cards-grid-sort-icon {
547
+ .md-grid-sort-icon {
548
548
  color: $Dark-Gray-2;
549
549
 
550
- &.md-cards-grid-sort-asc,
551
- &.md-cards-grid-sort-desc {
550
+ &.md-grid-sort-asc,
551
+ &.md-grid-sort-desc {
552
552
  color: $Link-on-dark;
553
553
  }
554
554
  }
555
555
 
556
- .md-cards-grid-resize-handle {
556
+ .md-grid-resize-handle {
557
557
  &:hover::after {
558
558
  background: $Link-on-dark;
559
559
  }
560
560
  }
561
561
 
562
- .md-cards-grid-body {
562
+ .md-grid-body {
563
563
  background: color.mix($Dark-Gray-1, $Black-Color, 85%);
564
564
  }
565
565
 
566
- .md-cards-grid-group-header {
566
+ .md-grid-group-header {
567
567
  background: color.mix($Dark-Gray-2, $Black-Color, 75%);
568
568
  color: $Light-Gray-2;
569
569
  }
570
570
 
571
- .md-cards-grid-card {
571
+ .md-grid-card {
572
572
  background: color.mix($Dark-Gray-1, $Black-Color, 95%);
573
573
  border-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
574
574
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
@@ -578,23 +578,23 @@
578
578
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
579
579
  }
580
580
 
581
- &.md-cards-grid-card-editing {
581
+ &.md-grid-card-editing {
582
582
  background: color.mix($Yellow, $Black-Color, 15%);
583
583
  border-color: $Yellow;
584
584
  box-shadow: 0 0 0 3px rgba($Yellow, 0.3);
585
585
  }
586
586
  }
587
587
 
588
- .md-cards-grid-cell {
588
+ .md-grid-cell {
589
589
  color: $Light-Gray-2;
590
590
  border-right-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
591
591
  }
592
592
 
593
- .md-cards-grid-actions-cell {
593
+ .md-grid-actions-cell {
594
594
  border-left-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
595
595
  }
596
596
 
597
- .md-cards-grid-action-edit {
597
+ .md-grid-action-edit {
598
598
  color: $Link-on-dark;
599
599
 
600
600
  &:hover {
@@ -602,7 +602,7 @@
602
602
  }
603
603
  }
604
604
 
605
- .md-cards-grid-action-save {
605
+ .md-grid-action-save {
606
606
  color: $Green;
607
607
 
608
608
  &:hover {
@@ -610,7 +610,7 @@
610
610
  }
611
611
  }
612
612
 
613
- .md-cards-grid-action-cancel {
613
+ .md-grid-action-cancel {
614
614
  color: $Red;
615
615
 
616
616
  &:hover {
@@ -618,13 +618,13 @@
618
618
  }
619
619
  }
620
620
 
621
- .md-cards-grid-footer {
621
+ .md-grid-footer {
622
622
  background: color.mix($Dark-Gray-2, $Black-Color, 85%);
623
623
  border-top-color: color.mix($Dark-Gray-1, $Black-Color, 60%);
624
624
  color: $Light-Gray-2;
625
625
  }
626
626
 
627
- .md-cards-grid-pager-btn {
627
+ .md-grid-pager-btn {
628
628
  background: color.mix($Dark-Gray-1, $Black-Color, 95%);
629
629
  border-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
630
630
  color: $Light-Gray-2;
@@ -636,17 +636,17 @@
636
636
  }
637
637
  }
638
638
 
639
- .md-cards-grid-pager-info {
639
+ .md-grid-pager-info {
640
640
  color: $Light-Gray-2;
641
641
  }
642
642
 
643
643
  // Zebra in dark mode
644
644
  &.zebra {
645
- .md-cards-grid-body {
645
+ .md-grid-body {
646
646
  background: color.mix($Dark-Gray-1, $Black-Color, 90%);
647
647
  }
648
648
 
649
- .md-cards-grid-card {
649
+ .md-grid-card {
650
650
  &:nth-child(odd) {
651
651
  background: color.mix($Dark-Gray-1, $Black-Color, 95%);
652
652
  }