@materializecss/materialize 2.0.4 → 2.1.0

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 (51) hide show
  1. package/dist/css/materialize.css +644 -558
  2. package/dist/css/materialize.min.css +2 -2
  3. package/dist/js/materialize.js +18 -8
  4. package/dist/js/materialize.min.js +2 -2
  5. package/dist/js/materialize.min.js.map +1 -1
  6. package/dist/src/bounding.d.ts.map +1 -1
  7. package/dist/src/edges.d.ts.map +1 -1
  8. package/dist/src/modal.d.ts.map +1 -1
  9. package/dist/src/select.d.ts.map +1 -1
  10. package/dist/src/toasts.d.ts.map +1 -1
  11. package/dist/src/utils.d.ts.map +1 -1
  12. package/dist/src/waves.d.ts.map +1 -1
  13. package/package.json +1 -1
  14. package/sass/components/_badges.scss +17 -12
  15. package/sass/components/_buttons.scss +137 -126
  16. package/sass/components/_cards.scss +12 -14
  17. package/sass/components/_carousel.scss +8 -6
  18. package/sass/components/_chips.scss +10 -11
  19. package/sass/components/_collapsible.scss +6 -8
  20. package/sass/components/_collection.scss +15 -15
  21. package/sass/components/_datepicker.scss +15 -15
  22. package/sass/components/_dropdown.scss +5 -17
  23. package/sass/components/_global.scss +65 -137
  24. package/sass/components/_grid.scss +12 -4
  25. package/sass/components/_materialbox.scss +1 -1
  26. package/sass/components/_modal.scss +14 -9
  27. package/sass/components/_navbar.scss +31 -25
  28. package/sass/components/_preloader.scss +5 -6
  29. package/sass/components/_sidenav.scss +42 -26
  30. package/sass/components/_slider.scss +5 -5
  31. package/sass/components/_table_of_contents.scss +7 -8
  32. package/sass/components/_tabs.scss +16 -17
  33. package/sass/components/_tapTarget.scss +3 -3
  34. package/sass/components/_timepicker.scss +12 -12
  35. package/sass/components/_toast.scss +17 -10
  36. package/sass/components/_tooltip.scss +13 -6
  37. package/sass/components/_variables.scss +13 -377
  38. package/sass/components/colors.module.scss +74 -180
  39. package/sass/components/forms/_checkboxes.scss +22 -22
  40. package/sass/components/forms/_file-input.scss +2 -5
  41. package/sass/components/forms/_forms.scss +5 -3
  42. package/sass/components/forms/_input-fields.scss +40 -41
  43. package/sass/components/forms/_radio-buttons.scss +11 -14
  44. package/sass/components/forms/_range.scss +16 -24
  45. package/sass/components/forms/_select.scss +34 -28
  46. package/sass/components/forms/_switches.scss +9 -12
  47. package/sass/components/theme.module.scss +140 -0
  48. package/sass/materialize.scss +6 -3
  49. package/sass/components/_theme_variables.scss +0 -78
  50. package/sass/components/theme.dark.module.scss +0 -32
  51. package/sass/components/theme.light.module.scss +0 -32
package/dist/css/materialize.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Materialize v2.0.4 (https://materializeweb.com)
2
+ * Materialize v2.1.0 (https://materializeweb.com)
3
3
  * Copyright 2014-2024 Materialize
4
4
  * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
5
5
  */
@@ -277,6 +277,145 @@
277
277
  --md-sys-typescale-title-small-letter-spacing: 0.10px;
278
278
  }
279
279
 
280
+ /* System Defaults */
281
+ :root, :host {
282
+ color-scheme: light;
283
+ --md-sys-color-primary: var(--md-sys-color-primary-light);
284
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
285
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
286
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
287
+ --md-sys-color-secondary: var(--md-sys-color-secondary-light);
288
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
289
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
290
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
291
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
292
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
293
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
294
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
295
+ --md-sys-color-error: var(--md-sys-color-error-light);
296
+ --md-sys-color-on-error: var(--md-sys-color-on-error-light);
297
+ --md-sys-color-error-container: var(--md-sys-color-error-container-light);
298
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
299
+ --md-sys-color-outline: var(--md-sys-color-outline-light);
300
+ --md-sys-color-background: var(--md-sys-color-background-light);
301
+ --md-sys-color-on-background: var(--md-sys-color-on-background-light);
302
+ --md-sys-color-surface: var(--md-sys-color-surface-light);
303
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
304
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
305
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
306
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
307
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
308
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
309
+ --md-sys-color-shadow: var(--md-sys-color-shadow-light);
310
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
311
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
312
+ --md-sys-color-scrim: var(--md-sys-color-scrim-light);
313
+ }
314
+
315
+ @media (prefers-color-scheme: dark) {
316
+ :root, :host {
317
+ color-scheme: dark;
318
+ --md-sys-color-primary: var(--md-sys-color-primary-dark);
319
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
320
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
321
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
322
+ --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
323
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
324
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
325
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
326
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
327
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
328
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
329
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
330
+ --md-sys-color-error: var(--md-sys-color-error-dark);
331
+ --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
332
+ --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
333
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
334
+ --md-sys-color-outline: var(--md-sys-color-outline-dark);
335
+ --md-sys-color-background: var(--md-sys-color-background-dark);
336
+ --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
337
+ --md-sys-color-surface: var(--md-sys-color-surface-dark);
338
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
339
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
340
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
341
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
342
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
343
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
344
+ --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
345
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
346
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
347
+ --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
348
+ }
349
+ }
350
+ /* ===================================================================== Themes */
351
+ :root[theme=light] {
352
+ color-scheme: light;
353
+ --md-sys-color-primary: var(--md-sys-color-primary-light);
354
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
355
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
356
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
357
+ --md-sys-color-secondary: var(--md-sys-color-secondary-light);
358
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
359
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
360
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
361
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
362
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
363
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
364
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
365
+ --md-sys-color-error: var(--md-sys-color-error-light);
366
+ --md-sys-color-on-error: var(--md-sys-color-on-error-light);
367
+ --md-sys-color-error-container: var(--md-sys-color-error-container-light);
368
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
369
+ --md-sys-color-outline: var(--md-sys-color-outline-light);
370
+ --md-sys-color-background: var(--md-sys-color-background-light);
371
+ --md-sys-color-on-background: var(--md-sys-color-on-background-light);
372
+ --md-sys-color-surface: var(--md-sys-color-surface-light);
373
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
374
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
375
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
376
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
377
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
378
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
379
+ --md-sys-color-shadow: var(--md-sys-color-shadow-light);
380
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
381
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
382
+ --md-sys-color-scrim: var(--md-sys-color-scrim-light);
383
+ }
384
+
385
+ :root[theme=dark] {
386
+ color-scheme: dark;
387
+ --md-sys-color-primary: var(--md-sys-color-primary-dark);
388
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
389
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
390
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
391
+ --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
392
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
393
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
394
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
395
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
396
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
397
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
398
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
399
+ --md-sys-color-error: var(--md-sys-color-error-dark);
400
+ --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
401
+ --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
402
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
403
+ --md-sys-color-outline: var(--md-sys-color-outline-dark);
404
+ --md-sys-color-background: var(--md-sys-color-background-dark);
405
+ --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
406
+ --md-sys-color-surface: var(--md-sys-color-surface-dark);
407
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
408
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
409
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
410
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
411
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
412
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
413
+ --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
414
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
415
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
416
+ --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
417
+ }
418
+
280
419
  .primary {
281
420
  background-color: var(--md-sys-color-primary);
282
421
  }
@@ -437,7 +576,7 @@
437
576
  color: var(--md-sys-color-on-surface);
438
577
  }
439
578
 
440
- .surface-variant, .progress, input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track, .switch label .lever {
579
+ .surface-variant, .progress, input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track {
441
580
  background-color: var(--md-sys-color-surface-variant);
442
581
  }
443
582
 
@@ -712,130 +851,6 @@
712
851
  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
713
852
  }
714
853
 
715
- :root {
716
- --md-sys-color-primary: var(--md-sys-color-primary-light);
717
- --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
718
- --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
719
- --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
720
- --md-sys-color-secondary: var(--md-sys-color-secondary-light);
721
- --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
722
- --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
723
- --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
724
- --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
725
- --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
726
- --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
727
- --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
728
- --md-sys-color-error: var(--md-sys-color-error-light);
729
- --md-sys-color-on-error: var(--md-sys-color-on-error-light);
730
- --md-sys-color-error-container: var(--md-sys-color-error-container-light);
731
- --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
732
- --md-sys-color-outline: var(--md-sys-color-outline-light);
733
- --md-sys-color-background: var(--md-sys-color-background-light);
734
- --md-sys-color-on-background: var(--md-sys-color-on-background-light);
735
- --md-sys-color-surface: var(--md-sys-color-surface-light);
736
- --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
737
- --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
738
- --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
739
- --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
740
- --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
741
- --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
742
- --md-sys-color-shadow: var(--md-sys-color-shadow-light);
743
- --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
744
- --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
745
- --md-sys-color-scrim: var(--md-sys-color-scrim-light);
746
- }
747
-
748
- :root[theme=dark] {
749
- --md-sys-color-primary: var(--md-sys-color-primary-dark);
750
- --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
751
- --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
752
- --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
753
- --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
754
- --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
755
- --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
756
- --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
757
- --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
758
- --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
759
- --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
760
- --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
761
- --md-sys-color-error: var(--md-sys-color-error-dark);
762
- --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
763
- --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
764
- --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
765
- --md-sys-color-outline: var(--md-sys-color-outline-dark);
766
- --md-sys-color-background: var(--md-sys-color-background-dark);
767
- --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
768
- --md-sys-color-surface: var(--md-sys-color-surface-dark);
769
- --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
770
- --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
771
- --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
772
- --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
773
- --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
774
- --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
775
- --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
776
- --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
777
- --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
778
- --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
779
- }
780
-
781
- :root, :host {
782
- --surface-color: var(--md-sys-color-surface);
783
- --background-color: var(--md-sys-color-background);
784
- --font-color-main: var(--md-sys-color-on-background);
785
- --font-color-medium: var(--md-sys-color-on-surface-variant);
786
- --font-color-disabled: var(--md-sys-color-on-surface);
787
- --font-on-primary-color-main: var(--md-sys-color-on-primary);
788
- --font-on-primary-color-dark-main: var(--md-sys-color-on-primary-dark);
789
- --font-on-primary-color-dark-medium: var(--md-sys-color-on-surface-variant-dark);
790
- --font-on-primary-color-medium: var(--md-sys-color-on-surface-variant);
791
- --font-on-primary-color-disabled: rgba(255, 255, 255, 0.38);
792
- --font-on-secondary-color-main: var(--md-sys-color-on-secondary);
793
- --hover-color: rgba(0, 0, 0, 0.04);
794
- --focus-color: rgba(0, 0, 0, 0.12);
795
- --focus-color-solid: #E0E0E0;
796
- --background-color-disabled: rgba(0, 0, 0, 0.12);
797
- --background-color-level-4dp: rgba(0, 0, 0, 0.09);
798
- --background-color-level-16dp-solid: var(--surface-color);
799
- --background-color-slight-emphasis: rgba(0, 0, 0, 0.08);
800
- --background-color-card: var(--surface-color);
801
- --tooltip-background-color: #313033;
802
- --tooltip-font-color: rgba(255, 255, 255, 0.77);
803
- --separator-color: #DDDDDD; /* borders between components */
804
- --error-color: #F44336;
805
- --slider-track-color: var(--md-sys-color-shadow-light);
806
- --switch-thumb-off-color: var(--md-ref-palette-primary100);
807
- --carousel-indicator-color: rgba(255, 255, 255, 0.45);
808
- --carousel-indicator-active-color: var(--md-ref-palette-primary100);
809
- --primary-color: var(--md-sys-color-primary);
810
- --primary-color-dark: var(--md-sys-color-primary-dark);
811
- --primary-color-raised-hover-solid: var(--md-ref-palette-primary70);
812
- --primary-color-raised-focus-solid: var(--md-ref-palette-primary80);
813
- --primary-color-font-medium-color: rgba(var(--primary-color-numeric), 0.7);
814
- --primary-color-font-disabled-color: rgba(var(--primary-color-numeric), 0.4);
815
- --primary-color-hover-opaque: rgba(var(--primary-color-numeric), 0.06);
816
- --primary-color-focus-opaque: rgba(var(--primary-color-numeric), 0.18);
817
- --secondary-color: var(--md-sys-color-secondary);
818
- --secondary-color-hover-solid: var(--md-ref-palette-secondary70);
819
- --secondary-color-focus-solid: var(--md-ref-palette-secondary80);
820
- --secondary-container-color: var(--md-sys-color-secondary-container);
821
- --font-on-secondary-container-color: var(--md-sys-color-on-secondary-container);
822
- --md_sys_color_on-surface: 28, 27, 31;
823
- }
824
-
825
- :root[theme=dark] {
826
- --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);
827
- --hover-color: rgba(255, 255, 255, 0.04);
828
- --focus-color: rgba(255, 255, 255, 0.12);
829
- --focus-color-solid: #424242;
830
- --background-color-disabled: rgba(255, 255, 255, 0.12);
831
- --background-color-level-4dp: rgba(255, 255, 255, 0.09);
832
- --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);
833
- --separator-color: #424242; /* borders between components */
834
- --error-color: #CF6679;
835
- --switch-thumb-off-color: #bababa;
836
- --md_sys_color_on-surface: 230, 225, 229;
837
- }
838
-
839
854
  .materialize-red {
840
855
  background-color: #e51c23 !important;
841
856
  }
@@ -3296,6 +3311,11 @@ html {
3296
3311
  box-sizing: inherit;
3297
3312
  }
3298
3313
 
3314
+ body {
3315
+ background-color: var(--md-sys-color-background);
3316
+ color: var(--md-sys-color-on-background);
3317
+ }
3318
+
3299
3319
  button,
3300
3320
  input,
3301
3321
  optgroup,
@@ -3325,30 +3345,32 @@ a {
3325
3345
  clear: both;
3326
3346
  }
3327
3347
 
3328
- .z-depth-0 {
3348
+ .z-depth-0, .btn:focus.tonal, .btn-small:focus.tonal, .btn-large:focus.tonal, .btn:focus.filled, .btn-small:focus.filled, .btn-large:focus.filled, .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
3349
+ .btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
3350
+ .btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled], .btn.text, .text.btn-small, .text.btn-large, .btn-flat {
3329
3351
  -webkit-box-shadow: none !important;
3330
3352
  box-shadow: none !important;
3331
3353
  }
3332
3354
 
3333
3355
  /* 2dp elevation modified*/
3334
- .z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn-floating, .btn.elevated, .elevated.btn-small, .elevated.btn-large, .toast, .card, .card-panel, nav {
3356
+ .z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn-floating, .btn:focus.elevated, .btn-small:focus.elevated, .btn-large:focus.elevated, .btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover, .btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover, .btn.elevated, .elevated.btn-small, .elevated.btn-large, .card, .card-panel, nav {
3335
3357
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
3336
3358
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
3337
3359
  }
3338
3360
 
3339
- .z-depth-1-half, .btn-floating:focus, .btn-floating:hover, .btn:focus, .btn-small:focus, .btn-large:focus, .btn:hover, .btn-small:hover, .btn-large:hover {
3361
+ .z-depth-1-half, .btn-floating:focus, .btn-floating:hover {
3340
3362
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
3341
3363
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
3342
3364
  }
3343
3365
 
3344
3366
  /* 6dp elevation modified*/
3345
- .z-depth-2 {
3367
+ .z-depth-2, .btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover {
3346
3368
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
3347
3369
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
3348
3370
  }
3349
3371
 
3350
3372
  /* 12dp elevation modified*/
3351
- .z-depth-3 {
3373
+ .z-depth-3, .toast {
3352
3374
  -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
3353
3375
  box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
3354
3376
  }
@@ -3379,13 +3401,13 @@ a {
3379
3401
  .divider {
3380
3402
  height: 1px;
3381
3403
  overflow: hidden;
3382
- background-color: var(--separator-color);
3404
+ background-color: var(--md-sys-color-outline-variant);
3383
3405
  }
3384
3406
 
3385
3407
  blockquote {
3386
3408
  margin: 20px 0;
3387
3409
  padding-left: 1.5rem;
3388
- border-left: 5px solid var(--primary-color);
3410
+ border-left: 5px solid var(--md-sys-color-primary);
3389
3411
  }
3390
3412
 
3391
3413
  i {
@@ -3411,6 +3433,12 @@ i.large {
3411
3433
  font-size: 6rem;
3412
3434
  }
3413
3435
 
3436
+ html.noscroll {
3437
+ position: fixed;
3438
+ overflow-y: scroll;
3439
+ width: 100%;
3440
+ }
3441
+
3414
3442
  img.responsive-img,
3415
3443
  video.responsive-video {
3416
3444
  max-width: 100%;
@@ -3425,24 +3453,24 @@ video.responsive-video {
3425
3453
  height: 30px;
3426
3454
  }
3427
3455
  .pagination li a {
3428
- color: var(--font-color-medium);
3456
+ color: var(--md-sys-color-on-surface-variant);
3429
3457
  display: inline-block;
3430
3458
  font-size: 1.2rem;
3431
3459
  padding: 0 10px;
3432
3460
  line-height: 30px;
3433
3461
  }
3434
3462
  .pagination li:hover:not(.disabled) {
3435
- background-color: var(--primary-color-hover-opaque);
3463
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
3436
3464
  }
3437
3465
  .pagination li.active a {
3438
- color: var(--font-on-primary-color-main);
3466
+ color: var(--md-sys-color-on-primary);
3439
3467
  }
3440
3468
  .pagination li.active, .pagination li.active:hover {
3441
- background-color: var(--primary-color);
3469
+ background-color: var(--md-sys-color-primary);
3442
3470
  }
3443
3471
  .pagination li.disabled a {
3444
3472
  cursor: default;
3445
- color: var(--font-color-disabled);
3473
+ color: var(--md-sys-color-on-surface);
3446
3474
  }
3447
3475
  .pagination li i {
3448
3476
  font-size: 2rem;
@@ -3496,7 +3524,7 @@ video.responsive-video {
3496
3524
  display: none;
3497
3525
  }
3498
3526
  .breadcrumb:last-child {
3499
- color: var(--font-on-primary-color-main);
3527
+ color: var(--md-sys-color-on-primary);
3500
3528
  }
3501
3529
 
3502
3530
  .parallax-container {
@@ -3628,12 +3656,15 @@ ul.staggered-list li {
3628
3656
  }
3629
3657
 
3630
3658
  .page-footer {
3631
- padding-top: 20px;
3632
- color: var(--font-on-primary-color-main);
3633
- background-color: var(--primary-color);
3659
+ margin-top: 5rem;
3660
+ padding-top: 3rem;
3661
+ border-top: 1px dashed var(--md-sys-color-outline-variant);
3662
+ }
3663
+ .page-footer p {
3664
+ color: var(--md-sys-color-outline-light);
3634
3665
  }
3635
3666
  .page-footer a {
3636
- color: var(--font-on-primary-color-main);
3667
+ color: var(--md-sys-color-primary);
3637
3668
  }
3638
3669
  .page-footer .footer-copyright,
3639
3670
  .page-footer .footer-copyright a {
@@ -3652,8 +3683,6 @@ ul.staggered-list li {
3652
3683
  -ms-flex-pack: justify;
3653
3684
  justify-content: space-between;
3654
3685
  padding: 10px 0px;
3655
- color: var(--font-on-primary-color-dark-medium);
3656
- background-color: var(--primary-color-dark);
3657
3686
  }
3658
3687
 
3659
3688
  .page-footer ul {
@@ -3675,24 +3704,24 @@ table.striped tr {
3675
3704
  border-bottom: none;
3676
3705
  }
3677
3706
  table.striped tbody > tr:nth-child(odd) {
3678
- background-color: var(--background-color-slight-emphasis);
3707
+ background-color: rgba(0, 0, 0, 0.08);
3679
3708
  }
3680
3709
  table.highlight > tbody > tr {
3681
3710
  -webkit-transition: background-color 0.25s ease;
3682
3711
  transition: background-color 0.25s ease;
3683
3712
  }
3684
3713
  table.highlight > tbody > tr:hover {
3685
- background-color: var(--hover-color);
3714
+ background-color: rgba(0, 0, 0, 0.04);
3686
3715
  }
3687
3716
  table thead {
3688
- color: var(--font-color-medium);
3717
+ color: var(--md-sys-color-on-surface-variant);
3689
3718
  }
3690
3719
  table.centered thead tr th, table.centered tbody tr td {
3691
3720
  text-align: center;
3692
3721
  }
3693
3722
 
3694
3723
  tr {
3695
- border-bottom: 1px solid var(--separator-color);
3724
+ border-bottom: 1px solid var(--md-sys-color-outline-variant);
3696
3725
  }
3697
3726
 
3698
3727
  td, th {
@@ -3760,7 +3789,7 @@ td, th {
3760
3789
  }
3761
3790
  table.responsive-table thead {
3762
3791
  border: 0;
3763
- border-right: 1px solid var(--separator-color);
3792
+ border-right: 1px solid var(--md-sys-color-outline-variant);
3764
3793
  }
3765
3794
  }
3766
3795
  .video-container {
@@ -4320,7 +4349,7 @@ input[type=range] + .thumb {
4320
4349
  padding-left: 0;
4321
4350
  list-style-type: none;
4322
4351
  margin: 0.5rem 0 1rem 0;
4323
- border: 1px solid var(--separator-color);
4352
+ border: 1px solid var(--md-sys-color-outline-variant);
4324
4353
  border-radius: 2px;
4325
4354
  overflow: hidden;
4326
4355
  position: relative;
@@ -4330,7 +4359,7 @@ input[type=range] + .thumb {
4330
4359
  line-height: 1.5rem;
4331
4360
  padding: 10px 20px;
4332
4361
  margin: 0;
4333
- border-bottom: 1px solid var(--separator-color);
4362
+ border-bottom: 1px solid var(--md-sys-color-outline-variant);
4334
4363
  }
4335
4364
  .collection .collection-item.avatar {
4336
4365
  min-height: 84px;
@@ -4351,7 +4380,7 @@ input[type=range] + .thumb {
4351
4380
  font-size: 18px;
4352
4381
  line-height: 42px;
4353
4382
  color: #fff;
4354
- background-color: var(--slider-track-color);
4383
+ background-color: var(--md-sys-color-shadow-light);
4355
4384
  text-align: center;
4356
4385
  }
4357
4386
  .collection .collection-item.avatar .title {
@@ -4369,24 +4398,24 @@ input[type=range] + .thumb {
4369
4398
  border-bottom: none;
4370
4399
  }
4371
4400
  .collection .collection-item.active {
4372
- background-color: var(--primary-color);
4373
- color: var(--font-on-primary-color-main);
4401
+ background-color: var(--md-sys-color-primary);
4402
+ color: var(--md-sys-color-on-primary);
4374
4403
  }
4375
4404
  .collection .collection-item.active .secondary-content {
4376
- color: var(--font-on-primary-color-main);
4405
+ color: var(--md-sys-color-on-primary);
4377
4406
  }
4378
4407
  .collection a.collection-item {
4379
4408
  display: block;
4380
4409
  -webkit-transition: 0.25s;
4381
4410
  transition: 0.25s;
4382
- color: var(--primary-color);
4411
+ color: var(--md-sys-color-primary);
4383
4412
  }
4384
4413
  .collection a.collection-item:not(.active):hover {
4385
- background-color: var(--hover-color);
4414
+ background-color: rgba(0, 0, 0, 0.04);
4386
4415
  }
4387
4416
  .collection.with-header .collection-header {
4388
4417
  background-color: transparent;
4389
- border-bottom: 1px solid var(--separator-color);
4418
+ border-bottom: 1px solid var(--md-sys-color-outline-variant);
4390
4419
  padding: 10px 20px;
4391
4420
  }
4392
4421
  .collection.with-header .collection-item {
@@ -4398,7 +4427,7 @@ input[type=range] + .thumb {
4398
4427
 
4399
4428
  .secondary-content {
4400
4429
  float: right;
4401
- color: var(--primary-color);
4430
+ color: var(--md-sys-color-primary);
4402
4431
  }
4403
4432
 
4404
4433
  .collapsible .collection {
@@ -4406,15 +4435,19 @@ input[type=range] + .thumb {
4406
4435
  border: none;
4407
4436
  }
4408
4437
 
4438
+ :root {
4439
+ --bagde-height: 22px;
4440
+ }
4441
+
4409
4442
  span.badge {
4410
4443
  min-width: 3rem;
4411
4444
  padding: 0 6px;
4412
4445
  margin-left: 14px;
4413
4446
  text-align: center;
4414
4447
  font-size: 1rem;
4415
- line-height: 22px;
4416
- height: 22px;
4417
- color: var(--font-color-medium);
4448
+ line-height: var(--bagde-height);
4449
+ height: var(--bagde-height);
4450
+ color: var(--md-sys-color-on-surface-variant);
4418
4451
  float: right;
4419
4452
  -webkit-box-sizing: border-box;
4420
4453
  box-sizing: border-box;
@@ -4422,8 +4455,8 @@ span.badge {
4422
4455
  span.badge.new {
4423
4456
  font-weight: 300;
4424
4457
  font-size: 0.8rem;
4425
- color: var(--font-on-primary-color-main);
4426
- background-color: var(--primary-color);
4458
+ color: var(--md-sys-color-on-primary);
4459
+ background-color: var(--md-sys-color-primary);
4427
4460
  border-radius: 2px;
4428
4461
  }
4429
4462
  span.badge.new:after {
@@ -4434,20 +4467,20 @@ span.badge[data-badge-caption]::after {
4434
4467
  }
4435
4468
 
4436
4469
  .active span.badge {
4437
- color: var(--font-on-primary-color-main);
4470
+ color: var(--md-sys-color-on-primary);
4438
4471
  }
4439
4472
 
4440
4473
  nav ul a span.badge {
4441
4474
  display: inline-block;
4442
4475
  float: none;
4443
4476
  margin-left: 4px;
4444
- line-height: 22px;
4445
- height: 22px;
4477
+ line-height: var(--bagde-height);
4478
+ height: var(--bagde-height);
4446
4479
  -webkit-font-smoothing: auto;
4447
4480
  }
4448
4481
 
4449
4482
  .collection-item span.badge {
4450
- margin-top: calc(0.75rem - 11px);
4483
+ margin-top: calc(0.75rem - var(--bagde-height) * 0.5);
4451
4484
  }
4452
4485
 
4453
4486
  .collapsible span.badge {
@@ -4455,11 +4488,11 @@ nav ul a span.badge {
4455
4488
  }
4456
4489
 
4457
4490
  .collapsible .active span.badge:not(.new) {
4458
- color: var(--font-color-medium);
4491
+ color: var(--md-sys-color-on-surface-variant);
4459
4492
  }
4460
4493
 
4461
4494
  .sidenav span.badge {
4462
- margin-top: calc(24px - 11px);
4495
+ margin-top: calc(var(--sidenav-line-height) * 0.5 - 11px);
4463
4496
  }
4464
4497
 
4465
4498
  table span.badge {
@@ -4498,8 +4531,28 @@ table span.badge {
4498
4531
  }
4499
4532
 
4500
4533
  .row {
4534
+ --gap-size: 1.5rem;
4501
4535
  display: grid;
4502
4536
  grid-template-columns: repeat(12, 1fr);
4537
+ gap: var(--gap-size);
4538
+ }
4539
+ .row .g-0 {
4540
+ gap: 0;
4541
+ }
4542
+ .row .g-1 {
4543
+ gap: calc(0.25 * var(--gap-size));
4544
+ }
4545
+ .row .g-2 {
4546
+ gap: calc(0.5 * var(--gap-size));
4547
+ }
4548
+ .row .g-3 {
4549
+ gap: calc(1 * var(--gap-size));
4550
+ }
4551
+ .row .g-4 {
4552
+ gap: calc(1.5 * var(--gap-size));
4553
+ }
4554
+ .row .g-5 {
4555
+ gap: calc(3 * var(--gap-size));
4503
4556
  }
4504
4557
  .row .s1 {
4505
4558
  grid-column: auto/span 1;
@@ -4784,18 +4837,23 @@ table span.badge {
4784
4837
  }
4785
4838
  }
4786
4839
 
4840
+ :root {
4841
+ --navbar-height: 64px;
4842
+ --navbar-height-mobile: 56px;
4843
+ }
4844
+
4787
4845
  nav {
4788
- color: var(--font-on-primary-color-main);
4789
- background-color: var(--secondary-container-color);
4846
+ color: var(--md-sys-color-on-primary);
4847
+ background-color: var(--md-sys-color-secondary-container);
4790
4848
  width: 100%;
4791
- height: 56px;
4792
- line-height: 56px;
4849
+ height: var(--navbar-height-mobile);
4850
+ line-height: var(--navbar-height-mobile);
4793
4851
  }
4794
4852
  nav.nav-extended {
4795
4853
  height: auto;
4796
4854
  }
4797
4855
  nav.nav-extended .nav-wrapper {
4798
- min-height: 56px;
4856
+ min-height: var(--navbar-height-mobile);
4799
4857
  height: auto;
4800
4858
  }
4801
4859
  nav.nav-extended .nav-content {
@@ -4803,7 +4861,7 @@ nav.nav-extended .nav-content {
4803
4861
  line-height: normal;
4804
4862
  }
4805
4863
  nav a {
4806
- color: var(--font-on-primary-color-main);
4864
+ color: var(--md-sys-color-on-primary);
4807
4865
  }
4808
4866
  nav i,
4809
4867
  nav [class^=mdi-], nav [class*=mdi-],
@@ -4811,8 +4869,8 @@ nav i.material-icons, nav i.material-symbols-outlined,
4811
4869
  nav i.material-symbols-rounded, nav i.material-symbols-sharp {
4812
4870
  display: block;
4813
4871
  font-size: 24px;
4814
- height: 56px;
4815
- line-height: 56px;
4872
+ height: var(--navbar-height-mobile);
4873
+ line-height: var(--navbar-height-mobile);
4816
4874
  }
4817
4875
  nav .nav-wrapper {
4818
4876
  position: relative;
@@ -4827,16 +4885,16 @@ nav .sidenav-trigger {
4827
4885
  float: left;
4828
4886
  position: relative;
4829
4887
  z-index: 1;
4830
- height: 56px;
4888
+ height: var(--navbar-height-mobile);
4831
4889
  margin: 0 18px;
4832
4890
  }
4833
4891
  nav .sidenav-trigger i {
4834
- height: 56px;
4835
- line-height: 56px;
4892
+ height: var(--navbar-height-mobile);
4893
+ line-height: var(--navbar-height-mobile);
4836
4894
  }
4837
4895
  nav .brand-logo {
4838
4896
  position: absolute;
4839
- color: var(--font-on-primary-color-main);
4897
+ color: var(--md-sys-color-on-primary);
4840
4898
  display: inline-block;
4841
4899
  font-size: 2.1rem;
4842
4900
  padding: 0;
@@ -4895,16 +4953,16 @@ nav ul:not(.dropdown-content) > li > a {
4895
4953
  -webkit-transition: background-color 0.3s;
4896
4954
  transition: background-color 0.3s;
4897
4955
  font-size: 1rem;
4898
- color: var(--font-on-primary-color-main);
4956
+ color: var(--md-sys-color-on-primary);
4899
4957
  display: block;
4900
4958
  padding: 0 15px;
4901
4959
  cursor: pointer;
4902
4960
  }
4903
4961
  nav ul:not(.dropdown-content) > li > a.active {
4904
- background-color: var(--primary-color-raised-focus-solid);
4962
+ background-color: var(--md-ref-palette-primary80);
4905
4963
  }
4906
4964
  nav ul:not(.dropdown-content) > li > a:hover:not(.active) {
4907
- background-color: var(--primary-color-raised-hover-solid);
4965
+ background-color: var(--md-ref-palette-primary70);
4908
4966
  }
4909
4967
  nav ul:not(.dropdown-content) > li > a.btn, nav ul:not(.dropdown-content) > li > a.btn-small, nav ul:not(.dropdown-content) > li > a.btn-large, nav ul:not(.dropdown-content) > li > a.btn-flat, nav ul:not(.dropdown-content) > li > a.btn-floating {
4910
4968
  margin-top: -2px;
@@ -4931,7 +4989,7 @@ nav .input-field input[type=search] {
4931
4989
  font-size: 1.2rem;
4932
4990
  border: none;
4933
4991
  padding-left: 2rem;
4934
- color: #888;
4992
+ color: var(--md-sys-color-on-primary);
4935
4993
  }
4936
4994
  nav .input-field input[type=search]:focus, nav .input-field input[type=search][type=text]:valid, nav .input-field input[type=search][type=password]:valid, nav .input-field input[type=search][type=email]:valid, nav .input-field input[type=search][type=url]:valid, nav .input-field input[type=search][type=date]:valid {
4937
4995
  border: none;
@@ -4948,12 +5006,12 @@ nav .input-field label i {
4948
5006
  transition: color 0.3s;
4949
5007
  }
4950
5008
  nav .input-field label.active i {
4951
- color: var(--font-on-primary-color-main);
5009
+ color: var(--md-sys-color-on-primary);
4952
5010
  }
4953
5011
 
4954
5012
  .navbar-fixed {
4955
5013
  position: relative;
4956
- height: 56px;
5014
+ height: var(--navbar-height-mobile);
4957
5015
  z-index: 997;
4958
5016
  }
4959
5017
  .navbar-fixed nav {
@@ -4963,14 +5021,14 @@ nav .input-field label.active i {
4963
5021
 
4964
5022
  @media only screen and (min-width : 601px) {
4965
5023
  nav.nav-extended .nav-wrapper {
4966
- min-height: 64px;
5024
+ min-height: var(--navbar-height-mobile);
4967
5025
  }
4968
5026
  nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
4969
- height: 64px;
4970
- line-height: 64px;
5027
+ height: var(--navbar-height);
5028
+ line-height: var(--navbar-height);
4971
5029
  }
4972
5030
  .navbar-fixed {
4973
- height: 64px;
5031
+ height: var(--navbar-height);
4974
5032
  }
4975
5033
  }
4976
5034
  a {
@@ -4980,7 +5038,7 @@ a {
4980
5038
  html {
4981
5039
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4982
5040
  font-weight: normal;
4983
- color: var(--font-color-main);
5041
+ color: var(--md-sys-color-on-background);
4984
5042
  }
4985
5043
  @media only screen and (min-width: 0) {
4986
5044
  html {
@@ -5201,13 +5259,13 @@ small {
5201
5259
  padding: 24px;
5202
5260
  margin: 0.5rem 0 1rem 0;
5203
5261
  border-radius: 12px;
5204
- background-color: var(--background-color-card);
5262
+ background-color: var(--md-sys-color-surface);
5205
5263
  }
5206
5264
 
5207
5265
  .card {
5208
5266
  overflow: hidden;
5209
5267
  position: relative;
5210
- background-color: var(--background-color-card);
5268
+ background-color: var(--md-sys-color-surface);
5211
5269
  -webkit-transition: -webkit-box-shadow 0.25s;
5212
5270
  transition: -webkit-box-shadow 0.25s;
5213
5271
  transition: box-shadow 0.25s;
@@ -5315,7 +5373,7 @@ small {
5315
5373
  width: 100%;
5316
5374
  }
5317
5375
  .card .card-image .card-title {
5318
- color: var(--background-color-card);
5376
+ color: var(--md-sys-color-surface);
5319
5377
  position: absolute;
5320
5378
  bottom: 0;
5321
5379
  left: 0;
@@ -5338,7 +5396,7 @@ small {
5338
5396
  line-height: 32px;
5339
5397
  }
5340
5398
  .card .card-action {
5341
- border-top: 1px solid var(--separator-color);
5399
+ border-top: 1px solid var(--md-sys-color-outline-variant);
5342
5400
  position: relative;
5343
5401
  background-color: inherit;
5344
5402
  }
@@ -5350,17 +5408,17 @@ small {
5350
5408
  display: inline-block;
5351
5409
  }
5352
5410
  .card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating) {
5353
- color: var(--primary-color);
5411
+ color: var(--md-sys-color-primary);
5354
5412
  -webkit-transition: color 0.3s ease;
5355
5413
  transition: color 0.3s ease;
5356
5414
  }
5357
5415
  .card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating):hover {
5358
- background-color: var(--primary-color-hover-opaque);
5416
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
5359
5417
  }
5360
5418
  .card .card-reveal {
5361
5419
  padding: 24px;
5362
5420
  position: absolute;
5363
- background-color: var(--background-color-card);
5421
+ background-color: var(--md-sys-color-surface);
5364
5422
  width: 100%;
5365
5423
  overflow-y: auto;
5366
5424
  left: 0;
@@ -5401,7 +5459,7 @@ small {
5401
5459
  }
5402
5460
 
5403
5461
  .toast {
5404
- border-radius: 2px;
5462
+ border-radius: 4px;
5405
5463
  top: 35px;
5406
5464
  width: auto;
5407
5465
  margin-top: 10px;
@@ -5409,12 +5467,13 @@ small {
5409
5467
  max-width: 100%;
5410
5468
  height: auto;
5411
5469
  min-height: 48px;
5412
- line-height: 1.5em;
5413
- background-color: var(--tooltip-background-color);
5414
- padding: 10px 25px;
5415
- font-size: 1rem;
5416
- font-weight: 400;
5417
- color: var(--tooltip-font-color);
5470
+ padding-left: 16px;
5471
+ padding-right: 12px;
5472
+ font-size: 14px;
5473
+ font-weight: 500;
5474
+ line-height: 20px;
5475
+ color: var(--md-sys-color-inverse-on-surface);
5476
+ background-color: var(--md-sys-color-inverse-surface);
5418
5477
  display: -webkit-box;
5419
5478
  display: -webkit-flex;
5420
5479
  display: -ms-flexbox;
@@ -5430,7 +5489,7 @@ small {
5430
5489
  cursor: default;
5431
5490
  }
5432
5491
  .toast .toast-action {
5433
- color: #eeff41;
5492
+ color: var(--md-sys-color-inverse-primary);
5434
5493
  font-weight: 500;
5435
5494
  margin-right: -25px;
5436
5495
  margin-left: 3rem;
@@ -5453,7 +5512,7 @@ small {
5453
5512
  overflow-y: hidden;
5454
5513
  height: 48px;
5455
5514
  width: 100%;
5456
- background-color: var(--surface-color);
5515
+ background-color: var(--md-sys-color-surface);
5457
5516
  margin: 0 auto;
5458
5517
  white-space: nowrap;
5459
5518
  }
@@ -5466,10 +5525,10 @@ small {
5466
5525
  .tabs.tabs-transparent .tab.disabled a,
5467
5526
  .tabs.tabs-transparent .tab.disabled a:hover,
5468
5527
  .tabs.tabs-transparent .tab.disabled a:focus {
5469
- color: var(--font-on-primary-color-disabled);
5528
+ color: rgba(255, 255, 255, 0.38);
5470
5529
  }
5471
5530
  .tabs.tabs-transparent .tab a:hover {
5472
- background-color: var(--hover-color);
5531
+ background-color: rgba(0, 0, 0, 0.04);
5473
5532
  }
5474
5533
  .tabs.tabs-transparent .tab a.active,
5475
5534
  .tabs.tabs-transparent .tab a:focus {
@@ -5478,10 +5537,10 @@ small {
5478
5537
  .tabs.tabs-transparent .tab a:hover,
5479
5538
  .tabs.tabs-transparent .tab a.active,
5480
5539
  .tabs.tabs-transparent .tab a:focus {
5481
- color: var(--font-on-primary-color-main);
5540
+ color: var(--md-sys-color-on-primary);
5482
5541
  }
5483
5542
  .tabs.tabs-transparent .indicator {
5484
- background-color: var(--font-on-primary-color-main);
5543
+ background-color: var(--md-sys-color-on-primary);
5485
5544
  }
5486
5545
  .tabs.tabs-fixed-width {
5487
5546
  display: -webkit-box;
@@ -5506,7 +5565,7 @@ small {
5506
5565
  margin: 0;
5507
5566
  }
5508
5567
  .tabs .tab a {
5509
- color: var(--font-color-medium);
5568
+ color: var(--md-sys-color-on-surface-variant);
5510
5569
  display: block;
5511
5570
  width: 100%;
5512
5571
  height: 100%;
@@ -5521,17 +5580,17 @@ small {
5521
5580
  background-color: transparent;
5522
5581
  }
5523
5582
  .tabs .tab a.active, .tabs .tab a:focus, .tabs .tab a:hover {
5524
- color: var(--primary-color);
5583
+ color: var(--md-sys-color-primary);
5525
5584
  }
5526
5585
  .tabs .tab a:hover {
5527
- background-color: var(--primary-color-hover-opaque);
5586
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
5528
5587
  }
5529
5588
  .tabs .tab a:focus, .tabs .tab a.active {
5530
- background-color: var(--primary-color-focus-opaque);
5589
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
5531
5590
  outline: none;
5532
5591
  }
5533
5592
  .tabs .tab.disabled a, .tabs .tab.disabled a:hover {
5534
- color: var(--font-color-disabled);
5593
+ color: var(--md-sys-color-on-surface);
5535
5594
  cursor: default;
5536
5595
  background-color: transparent;
5537
5596
  }
@@ -5541,11 +5600,13 @@ small {
5541
5600
  .tabs .indicator {
5542
5601
  position: absolute;
5543
5602
  bottom: 0;
5544
- height: 2px;
5545
- background-color: var(--primary-color);
5603
+ height: 3px;
5604
+ background-color: var(--md-sys-color-primary);
5546
5605
  will-change: left, right;
5606
+ border-radius: 3px 3px 0 0;
5547
5607
  }
5548
5608
 
5609
+ /* Fixed Sidenav hide on smaller */
5549
5610
  @media only screen and (max-width : 992.99px) {
5550
5611
  .tabs {
5551
5612
  display: -webkit-box;
@@ -5566,17 +5627,22 @@ small {
5566
5627
  .material-tooltip {
5567
5628
  padding: 0 8px;
5568
5629
  border-radius: 4px;
5569
- background-color: var(--md-sys-color-inverse-surface);
5570
5630
  color: var(--md-sys-color-inverse-on-surface);
5631
+ background-color: var(--md-sys-color-inverse-surface);
5571
5632
  font-family: var(--md-sys-typescale-body-small-font-family-name);
5572
5633
  font-size: var(--md-sys-typescale-body-small-font-size);
5573
5634
  line-height: var(--md-sys-typescale-body-small-line-height);
5574
5635
  font-weight: var(--md-sys-typescale-body-small-font-weight);
5575
5636
  min-height: 24px;
5576
5637
  opacity: 0;
5577
- text-align: center;
5638
+ padding-top: 6px;
5639
+ padding-bottom: 6px;
5640
+ font-size: 12px;
5641
+ line-height: 16px;
5642
+ font-weight: 400;
5643
+ letter-spacing: 0.4px;
5578
5644
  position: absolute;
5579
- max-width: calc(100% - 4px);
5645
+ max-width: 300px;
5580
5646
  overflow: hidden;
5581
5647
  left: 0;
5582
5648
  top: 0;
@@ -5607,17 +5673,19 @@ small {
5607
5673
  }
5608
5674
 
5609
5675
  .btn, .btn-small, .btn-large, .btn-floating, .btn-flat {
5610
- --font-size-icon: 16px;
5611
- --padding: 24px;
5612
- --padding-icon: 16px;
5613
- --gap-icon: 8px;
5614
- height: 40px;
5676
+ --btn-height: 40px;
5677
+ --btn-font-size-icon: 16px;
5678
+ --btn-padding: 24px;
5679
+ --btn-padding-icon: 16px;
5680
+ --btn-gap-icon: 8px;
5681
+ --btn-border-radius: 4px;
5682
+ --btn-font-size: 14px;
5683
+ height: var(--btn-height);
5615
5684
  border: none;
5616
- border-radius: 4px;
5617
- padding-left: var(--padding);
5618
- padding-right: var(--padding);
5619
- color: var(--font-on-primary-color-main);
5620
- font-size: 14px;
5685
+ border-radius: var(--btn-border-radius);
5686
+ padding-left: var(--btn-padding);
5687
+ padding-right: var(--btn-padding);
5688
+ font-size: ver(--btn-font-size);
5621
5689
  font-weight: 500;
5622
5690
  text-decoration: none;
5623
5691
  display: -webkit-inline-box;
@@ -5645,117 +5713,124 @@ small {
5645
5713
  }
5646
5714
 
5647
5715
  .btn.icon-left, .icon-left.btn-small, .icon-left.btn-large {
5648
- padding-left: calc(var(--padding-icon) + var(--font-size-icon) + var(--gap-icon));
5716
+ padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
5649
5717
  }
5650
5718
 
5651
5719
  .btn.icon-right, .icon-right.btn-small, .icon-right.btn-large {
5652
- padding-right: calc(var(--padding-icon) + var(--font-size-icon) + var(--gap-icon));
5720
+ padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
5653
5721
  }
5654
5722
 
5655
5723
  .btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i, .btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i {
5656
5724
  position: absolute;
5657
- font-size: var(--font-size-icon);
5725
+ font-size: var(--btn-font-size-icon);
5658
5726
  }
5659
5727
 
5660
5728
  .btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i {
5661
- left: var(--padding-icon);
5729
+ left: var(--btn-padding-icon);
5662
5730
  }
5663
5731
 
5664
5732
  .btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i {
5665
- right: var(--padding-icon);
5666
- }
5667
-
5668
- .btn.disabled,
5669
- .btn-floating.disabled,
5670
- .btn-large.disabled,
5671
- .btn-small.disabled,
5672
- .btn-flat.disabled,
5673
- .btn:disabled,
5674
- .btn-floating:disabled,
5675
- .btn-large:disabled,
5676
- .btn-small:disabled,
5677
- .btn-flat:disabled,
5678
- .btn[disabled],
5679
- .btn-floating[disabled],
5680
- .btn-large[disabled],
5681
- .btn-small[disabled],
5682
- .btn-flat[disabled] {
5683
- pointer-events: none;
5684
- background-color: var(--background-color-disabled) !important;
5685
- -webkit-box-shadow: none;
5686
- box-shadow: none;
5687
- color: var(--font-color-disabled) !important;
5688
- cursor: default;
5733
+ right: var(--btn-padding-icon);
5689
5734
  }
5690
- .btn.disabled:hover,
5691
- .btn-floating.disabled:hover,
5692
- .btn-large.disabled:hover,
5693
- .btn-small.disabled:hover,
5694
- .btn-flat.disabled:hover,
5695
- .btn:disabled:hover,
5696
- .btn-floating:disabled:hover,
5697
- .btn-large:disabled:hover,
5698
- .btn-small:disabled:hover,
5699
- .btn-flat:disabled:hover,
5700
- .btn[disabled]:hover,
5701
- .btn-floating[disabled]:hover,
5702
- .btn-large[disabled]:hover,
5703
- .btn-small[disabled]:hover,
5704
- .btn-flat[disabled]:hover {
5705
- background-color: var(--background-color-disabled) !important;
5706
- color: var(--font-color-disabled) !important;
5707
- }
5708
-
5709
- .btn.filled, .btn, .btn-small, .btn-large {
5735
+
5736
+ .btn.filled, .filled.btn-small, .filled.btn-large {
5737
+ color: var(--md-sys-color-on-primary);
5710
5738
  background-color: var(--md-sys-color-primary);
5711
5739
  }
5712
5740
 
5713
- .btn.tonal, .tonal.btn-small, .tonal.btn-large, .btn.elevated, .elevated.btn-small, .elevated.btn-large {
5741
+ .btn.tonal, .tonal.btn-small, .tonal.btn-large {
5742
+ color: var(--md-sys-color-on-secondary-container);
5714
5743
  background-color: var(--md-sys-color-secondary-container);
5744
+ }
5745
+
5746
+ .btn.elevated, .elevated.btn-small, .elevated.btn-large {
5715
5747
  color: var(--md-sys-color-on-secondary-container);
5748
+ background-color: var(--md-sys-color-secondary-container);
5716
5749
  }
5717
5750
 
5718
- .btn.text, .text.btn-small, .text.btn-large, .btn-flat {
5719
- -webkit-box-shadow: none;
5720
- box-shadow: none;
5751
+ .btn.outlined, .outlined.btn-small, .outlined.btn-large {
5721
5752
  background-color: transparent;
5722
5753
  color: var(--md-sys-color-primary);
5723
- cursor: pointer;
5724
- -webkit-transition: background-color 0.2s;
5725
- transition: background-color 0.2s;
5754
+ border: 1px solid var(--md-sys-color-outline);
5726
5755
  }
5727
- .btn.text:focus, .text.btn-small:focus, .text.btn-large:focus, .btn.text:hover, .text.btn-small:hover, .text.btn-large:hover, .btn-flat:focus, .btn-flat:hover {
5756
+
5757
+ .btn.text, .text.btn-small, .text.btn-large, .btn-flat {
5758
+ color: var(--md-sys-color-primary);
5759
+ background-color: transparent;
5760
+ }
5761
+
5762
+ .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
5763
+ .btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
5764
+ .btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
5765
+ color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
5766
+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
5767
+ pointer-events: none;
5728
5768
  -webkit-box-shadow: none;
5729
5769
  box-shadow: none;
5730
- background-color: var(--hover-color);
5770
+ cursor: default;
5731
5771
  }
5732
- .btn.text:focus, .text.btn-small:focus, .text.btn-large:focus, .btn-flat:focus {
5733
- background-color: var(--focus-color);
5772
+
5773
+ .btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover {
5774
+ color: var(--md-sys-color-primary);
5775
+ background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
5734
5776
  }
5735
- .btn.text.disabled, .text.disabled.btn-small, .text.disabled.btn-large, .btn.text.btn.text[disabled], .text.text[disabled].btn-small, .text.text[disabled].btn-large, .btn.text.btn-flat[disabled], .btn-flat.disabled, .btn-flat.btn.text[disabled], .btn-flat.btn-flat[disabled] {
5736
- background-color: transparent !important;
5737
- color: var(--font-color-disabled) !important;
5738
- cursor: default;
5777
+
5778
+ .btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover {
5779
+ color: var(--md-sys-color-on-primary);
5780
+ background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
5739
5781
  }
5740
5782
 
5741
- .btn.outlined, .outlined.btn-small, .outlined.btn-large {
5742
- background-color: transparent;
5743
- color: var(--primary-color);
5744
- border: 1px solid var(--primary-color);
5783
+ .btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover {
5784
+ color: var(--md-sys-color-on-secondary-container);
5785
+ background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
5745
5786
  }
5746
5787
 
5747
- .btn:hover, .btn-small:hover, .btn-large:hover {
5748
- background-color: var(--primary-color-raised-hover-solid);
5788
+ .btn.outlined:hover, .outlined.btn-small:hover, .outlined.btn-large:hover {
5789
+ color: var(--md-sys-color-primary);
5790
+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
5791
+ }
5792
+
5793
+ .btn.text:hover, .text.btn-small:hover, .text.btn-large:hover {
5794
+ color: var(--md-sys-color-primary);
5795
+ background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
5749
5796
  }
5750
- .btn:focus, .btn-small:focus, .btn-large:focus {
5751
- background-color: var(--primary-color-raised-focus-solid);
5797
+
5798
+ .btn:focus.elevated, .btn-small:focus.elevated, .btn-large:focus.elevated {
5799
+ color: var(--md-sys-color-primary);
5800
+ background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
5801
+ }
5802
+
5803
+ .btn:focus.filled, .btn-small:focus.filled, .btn-large:focus.filled {
5804
+ color: var(--md-sys-color-on-primary);
5805
+ background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
5806
+ }
5807
+
5808
+ .btn:focus.tonal, .btn-small:focus.tonal, .btn-large:focus.tonal {
5809
+ color: var(--md-sys-color-on-secondary-container);
5810
+ background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
5811
+ }
5812
+
5813
+ .btn:focus.outlined, .btn-small:focus.outlined, .btn-large:focus.outlined {
5814
+ color: var(--md-sys-color-primary);
5815
+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
5816
+ border: 1px solid var(--md-sys-color-primary);
5817
+ }
5818
+
5819
+ .btn:focus.text, .btn-small:focus.text, .btn-large:focus.text {
5820
+ color: var(--md-sys-color-primary);
5821
+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
5822
+ }
5823
+
5824
+ .btn:focus-visible.filled, .btn-small:focus-visible.filled, .btn-large:focus-visible.filled, .btn:focus-visible.elevated, .btn-small:focus-visible.elevated, .btn-large:focus-visible.elevated, .btn:focus-visible.tonal, .btn-small:focus-visible.tonal, .btn-large:focus-visible.tonal, .btn:focus-visible.outlined, .btn-small:focus-visible.outlined, .btn-large:focus-visible.outlined, .btn:focus-visible.text, .btn-small:focus-visible.text, .btn-large:focus-visible.text {
5825
+ outline: 3px solid var(--md-sys-color-secondary);
5826
+ outline-offset: 2px;
5752
5827
  }
5753
5828
 
5754
5829
  .btn-floating {
5755
- color: var(--font-on-secondary-color-main);
5756
5830
  width: 40px;
5757
5831
  height: 40px;
5758
- background-color: var(--secondary-color);
5832
+ color: var(--md-sys-color-on-primary-container);
5833
+ background-color: var(--md-sys-color-primary-container);
5759
5834
  border-radius: 16px;
5760
5835
  padding: 0;
5761
5836
  display: grid;
@@ -5773,10 +5848,10 @@ small {
5773
5848
  vertical-align: middle;
5774
5849
  }
5775
5850
  .btn-floating:hover {
5776
- background-color: var(--secondary-color-hover-solid);
5851
+ background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%);
5777
5852
  }
5778
5853
  .btn-floating:focus {
5779
- background-color: var(--secondary-color-focus-solid);
5854
+ background-color: var(--md-ref-palette-secondary80);
5780
5855
  }
5781
5856
  .btn-floating:before {
5782
5857
  border-radius: 0;
@@ -5790,11 +5865,12 @@ small {
5790
5865
  bottom: -28px;
5791
5866
  }
5792
5867
  .btn-floating.btn-small {
5793
- width: 30px;
5794
- height: 30px;
5868
+ --btn-small-height: calc(0.75 * var(--btn-height));
5869
+ width: var(--btn-small-height) e;
5870
+ height: var(--btn-small-height);
5795
5871
  }
5796
5872
  .btn-floating.btn-small.halfway-fab {
5797
- bottom: -15px;
5873
+ bottom: calc(var(--btn-small-height) * -0.5);
5798
5874
  }
5799
5875
  .btn-floating.halfway-fab {
5800
5876
  position: absolute;
@@ -5806,7 +5882,7 @@ small {
5806
5882
  left: 24px;
5807
5883
  }
5808
5884
  .btn-floating i {
5809
- color: var(--font-on-secondary-color-main);
5885
+ color: var(--md-sys-color-on-secondary);
5810
5886
  font-size: 1.6rem;
5811
5887
  width: inherit;
5812
5888
  display: inline-block;
@@ -5915,7 +5991,7 @@ button.btn-floating {
5915
5991
  background-color: transparent;
5916
5992
  -webkit-box-shadow: none;
5917
5993
  box-shadow: none;
5918
- color: var(--font-on-secondary-color-main);
5994
+ color: var(--md-sys-color-on-secondary);
5919
5995
  line-height: 56px;
5920
5996
  z-index: 1;
5921
5997
  }
@@ -5944,14 +6020,14 @@ button.btn-floating {
5944
6020
  z-index: -1;
5945
6021
  width: 40px;
5946
6022
  height: 40px;
5947
- background-color: var(--secondary-color);
6023
+ background-color: var(--md-sys-color-secondary);
5948
6024
  border-radius: 16px;
5949
6025
  -webkit-transform: scale(0);
5950
6026
  transform: scale(0);
5951
6027
  }
5952
6028
 
5953
6029
  .btn-large {
5954
- height: 60px;
6030
+ height: calc(1.5 * var(--btn-height));
5955
6031
  font-size: 18px;
5956
6032
  padding: 0 28px;
5957
6033
  }
@@ -5960,8 +6036,7 @@ button.btn-floating {
5960
6036
  }
5961
6037
 
5962
6038
  .btn-small {
5963
- height: 30px;
5964
- line-height: 30px;
6039
+ height: calc(0.75 * var(--btn-height));
5965
6040
  font-size: 13px;
5966
6041
  }
5967
6042
  .btn-small i {
@@ -5979,7 +6054,7 @@ button.btn-floating {
5979
6054
  .dropdown-content {
5980
6055
  padding-left: 0;
5981
6056
  list-style-type: none;
5982
- background-color: var(--surface-color);
6057
+ background-color: var(--md-sys-color-surface);
5983
6058
  margin: 0;
5984
6059
  display: none;
5985
6060
  min-width: 100px;
@@ -5992,12 +6067,9 @@ button.btn-floating {
5992
6067
  -webkit-transform-origin: 0 0;
5993
6068
  transform-origin: 0 0;
5994
6069
  }
5995
- .dropdown-content:focus {
5996
- outline: 0;
5997
- }
5998
6070
  .dropdown-content li {
5999
6071
  clear: both;
6000
- color: var(--font-color-main);
6072
+ color: var(--md-sys-color-on-background);
6001
6073
  cursor: pointer;
6002
6074
  min-height: 50px;
6003
6075
  line-height: 1.5rem;
@@ -6005,10 +6077,7 @@ button.btn-floating {
6005
6077
  text-align: left;
6006
6078
  }
6007
6079
  .dropdown-content li:hover, .dropdown-content li.active {
6008
- background-color: var(--hover-color);
6009
- }
6010
- .dropdown-content li:focus {
6011
- outline: none;
6080
+ background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
6012
6081
  }
6013
6082
  .dropdown-content li.divider {
6014
6083
  min-height: 0;
@@ -6016,7 +6085,7 @@ button.btn-floating {
6016
6085
  }
6017
6086
  .dropdown-content li > a, .dropdown-content li > span {
6018
6087
  font-size: 16px;
6019
- color: var(--primary-color);
6088
+ color: var(--md-sys-color-primary);
6020
6089
  display: block;
6021
6090
  line-height: 22px;
6022
6091
  padding: 14px 16px;
@@ -6035,7 +6104,7 @@ button.btn-floating {
6035
6104
  }
6036
6105
 
6037
6106
  body.keyboard-focused .dropdown-content li:focus {
6038
- background-color: var(--focus-color);
6107
+ background-color: rgba(0, 0, 0, 0.12);
6039
6108
  }
6040
6109
 
6041
6110
  .input-field.col .dropdown-content [type=checkbox] + label {
@@ -6051,17 +6120,21 @@ body.keyboard-focused .dropdown-content li:focus {
6051
6120
  }
6052
6121
 
6053
6122
  .modal {
6123
+ --modal-footer-height: 56px;
6124
+ --modal-footer-divider-height: 1px;
6125
+ --modal-border-radius: 28px;
6126
+ --modal-padding: 24px;
6054
6127
  display: none;
6055
6128
  position: fixed;
6056
6129
  left: 0;
6057
6130
  right: 0;
6058
- background-color: var(--background-color-level-16dp-solid);
6131
+ background-color: var(--md-sys-color-surface);
6059
6132
  padding: 0;
6060
6133
  max-height: 70%;
6061
6134
  width: 55%;
6062
6135
  margin: auto;
6063
6136
  overflow-y: auto;
6064
- border-radius: 2px;
6137
+ border-radius: var(--modal-border-radius);
6065
6138
  will-change: top, opacity;
6066
6139
  }
6067
6140
  .modal:focus {
@@ -6076,17 +6149,17 @@ body.keyboard-focused .dropdown-content li:focus {
6076
6149
  margin-top: 0;
6077
6150
  }
6078
6151
  .modal .modal-content {
6079
- padding: 24px;
6152
+ padding: var(--modal-padding);
6080
6153
  overflow-y: hidden;
6081
6154
  }
6082
6155
  .modal .modal-close {
6083
6156
  cursor: pointer;
6084
6157
  }
6085
6158
  .modal .modal-footer {
6086
- border-radius: 0 0 2px 2px;
6087
- background-color: var(--background-color-level-16dp-solid);
6159
+ border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
6160
+ background-color: var(--md-sys-color-surface);
6088
6161
  padding: 4px 6px;
6089
- height: 56px;
6162
+ height: var(--modal-footer-height);
6090
6163
  width: 100%;
6091
6164
  text-align: right;
6092
6165
  }
@@ -6114,15 +6187,15 @@ body.keyboard-focused .dropdown-content li:focus {
6114
6187
  }
6115
6188
  .modal.modal-fixed-footer .modal-content {
6116
6189
  position: absolute;
6117
- height: calc(100% - 56px);
6190
+ height: calc(100% - var(--modal-footer-height));
6118
6191
  max-height: 100%;
6119
6192
  width: 100%;
6120
6193
  overflow-y: auto;
6121
6194
  }
6122
6195
  .modal.modal-fixed-footer .modal-footer {
6123
- border-top: 1px solid var(--separator-color);
6196
+ border-top: var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant);
6124
6197
  position: absolute;
6125
- bottom: 0;
6198
+ bottom: var(--modal-footer-divider-height);
6126
6199
  }
6127
6200
 
6128
6201
  .modal.bottom-sheet {
@@ -6138,9 +6211,9 @@ body.keyboard-focused .dropdown-content li:focus {
6138
6211
  .collapsible {
6139
6212
  padding-left: 0;
6140
6213
  list-style-type: none;
6141
- border-top: 1px solid var(--separator-color);
6142
- border-right: 1px solid var(--separator-color);
6143
- border-left: 1px solid var(--separator-color);
6214
+ border-top: 1px solid var(--md-sys-color-outline-variant);
6215
+ border-right: 1px solid var(--md-sys-color-outline-variant);
6216
+ border-left: 1px solid var(--md-sys-color-outline-variant);
6144
6217
  margin: 0.5rem 0 1rem 0;
6145
6218
  }
6146
6219
 
@@ -6153,8 +6226,7 @@ body.keyboard-focused .dropdown-content li:focus {
6153
6226
  -webkit-tap-highlight-color: transparent;
6154
6227
  line-height: 1.5;
6155
6228
  padding: 1rem;
6156
- border-bottom: 1px solid var(--separator-color);
6157
- background-color: var(--surface-color);
6229
+ border-bottom: 1px solid var(--md-sys-color-outline-variant);
6158
6230
  }
6159
6231
  .collapsible-header:focus {
6160
6232
  outline: 0;
@@ -6179,17 +6251,16 @@ body.keyboard-focused .dropdown-content li:focus {
6179
6251
  }
6180
6252
 
6181
6253
  .keyboard-focused .collapsible-header:focus {
6182
- background-color: var(--focus-color);
6254
+ background-color: rgba(0, 0, 0, 0.12);
6183
6255
  }
6184
6256
 
6185
6257
  .collapsible-body {
6186
6258
  max-height: 0;
6187
- border-bottom: 1px solid var(--separator-color);
6259
+ border-bottom: 1px solid var(--md-sys-color-outline-variant);
6188
6260
  -webkit-box-sizing: border-box;
6189
6261
  box-sizing: border-box;
6190
6262
  padding: 0 2rem;
6191
6263
  overflow: hidden;
6192
- background-color: var(--surface-color);
6193
6264
  }
6194
6265
 
6195
6266
  .collapsible.popout {
@@ -6214,7 +6285,8 @@ body.keyboard-focused .dropdown-content li:focus {
6214
6285
  --font-size: 14px;
6215
6286
  --font-size-icon: 18px;
6216
6287
  --padding: 8px;
6217
- background-color: var(--background-color-level-4dp);
6288
+ color: var(--md-sys-color-on-surface-variant);
6289
+ background-color: rgba(0, 0, 0, 0.09);
6218
6290
  display: -webkit-inline-box;
6219
6291
  display: -webkit-inline-flex;
6220
6292
  display: -ms-inline-flexbox;
@@ -6227,7 +6299,6 @@ body.keyboard-focused .dropdown-content li:focus {
6227
6299
  padding-right: var(--padding);
6228
6300
  font-size: var(--font-size);
6229
6301
  font-weight: 500;
6230
- color: var(--font-color-medium);
6231
6302
  border-radius: 8px;
6232
6303
  -webkit-box-align: center;
6233
6304
  -webkit-align-items: center;
@@ -6241,8 +6312,8 @@ body.keyboard-focused .dropdown-content li:focus {
6241
6312
  }
6242
6313
  .chip:focus {
6243
6314
  outline: none;
6244
- background-color: var(--primary-color);
6245
- color: var(--font-on-primary-color-main);
6315
+ background-color: var(--md-sys-color-primary);
6316
+ color: var(--md-sys-color-on-primary);
6246
6317
  }
6247
6318
 
6248
6319
  .chip.outlined {
@@ -6295,7 +6366,7 @@ body.keyboard-focused .dropdown-content li:focus {
6295
6366
  -ms-flex-wrap: wrap;
6296
6367
  flex-wrap: wrap;
6297
6368
  border: none;
6298
- border-bottom: 1px solid var(--font-color-medium);
6369
+ border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
6299
6370
  -webkit-box-shadow: none;
6300
6371
  box-shadow: none;
6301
6372
  margin: 0 0 8px 0;
@@ -6305,9 +6376,9 @@ body.keyboard-focused .dropdown-content li:focus {
6305
6376
  transition: all 0.3s;
6306
6377
  }
6307
6378
  .chips.focus {
6308
- border-bottom: 1px solid var(--primary-color);
6309
- -webkit-box-shadow: 0 1px 0 0 var(--primary-color);
6310
- box-shadow: 0 1px 0 0 var(--primary-color);
6379
+ border-bottom: 1px solid var(--md-sys-color-primary);
6380
+ -webkit-box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
6381
+ box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
6311
6382
  }
6312
6383
  .chips:hover {
6313
6384
  cursor: text;
@@ -6315,7 +6386,7 @@ body.keyboard-focused .dropdown-content li:focus {
6315
6386
  .chips input:not([type]):not(.browser-default).input {
6316
6387
  background: none;
6317
6388
  border: 0;
6318
- color: var(--font-color-main);
6389
+ color: var(--md-sys-color-on-background);
6319
6390
  display: inline-block;
6320
6391
  font-size: 16px;
6321
6392
  height: 32px;
@@ -6383,7 +6454,7 @@ body.keyboard-focused .dropdown-content li:focus {
6383
6454
  .materialbox-caption {
6384
6455
  position: fixed;
6385
6456
  display: none;
6386
- color: var(--font-color-main);
6457
+ color: var(--md-sys-color-on-background);
6387
6458
  line-height: 50px;
6388
6459
  bottom: 0;
6389
6460
  left: 0;
@@ -6396,36 +6467,35 @@ body.keyboard-focused .dropdown-content li:focus {
6396
6467
  }
6397
6468
 
6398
6469
  select:focus {
6399
- outline: 1px solid var(--primary-color-raised-focus-solid);
6470
+ outline: 1px solid var(--md-ref-palette-primary80);
6400
6471
  }
6401
6472
 
6473
+ /*
6402
6474
  button:focus {
6403
6475
  outline: none;
6404
- background-color: var(--primary-color-raised-focus-solid);
6476
+ background-color: $button-background-focus;
6405
6477
  }
6406
-
6478
+ */
6407
6479
  label {
6408
6480
  font-size: 0.8rem;
6409
- color: var(--font-color-medium);
6481
+ color: var(--md-sys-color-on-surface-variant);
6410
6482
  }
6411
6483
 
6412
- /* Text Inputs + Textarea
6413
- ========================================================================== */
6414
6484
  /* Style Placeholders */
6415
6485
  ::-webkit-input-placeholder {
6416
- color: var(--font-color-medium);
6486
+ color: var(--md-sys-color-on-surface-variant);
6417
6487
  }
6418
6488
  ::-moz-placeholder {
6419
- color: var(--font-color-medium);
6489
+ color: var(--md-sys-color-on-surface-variant);
6420
6490
  }
6421
6491
  :-ms-input-placeholder {
6422
- color: var(--font-color-medium);
6492
+ color: var(--md-sys-color-on-surface-variant);
6423
6493
  }
6424
6494
  ::-ms-input-placeholder {
6425
- color: var(--font-color-medium);
6495
+ color: var(--md-sys-color-on-surface-variant);
6426
6496
  }
6427
6497
  ::placeholder {
6428
- color: var(--font-color-medium);
6498
+ color: var(--md-sys-color-on-surface-variant);
6429
6499
  }
6430
6500
 
6431
6501
  /* Text inputs */
@@ -6444,7 +6514,7 @@ input[type=number]:not(.browser-default),
6444
6514
  input[type=search]:not(.browser-default),
6445
6515
  textarea.materialize-textarea {
6446
6516
  outline: none;
6447
- color: var(--font-color-main);
6517
+ color: var(--md-sys-color-on-background);
6448
6518
  width: 100%;
6449
6519
  font-size: 16px;
6450
6520
  height: 56px;
@@ -6454,14 +6524,15 @@ textarea.materialize-textarea {
6454
6524
  /*
6455
6525
  %custom-success-message {
6456
6526
  content: attr(data-success);
6457
- color: $input-success-color;
6527
+ color: $success-color;
6458
6528
  }
6459
6529
  %custom-error-message {
6460
6530
  content: attr(data-error);
6461
- color: $input-error-color;
6531
+ color: var(--md-sys-color-error);
6462
6532
  }
6463
6533
  */
6464
6534
  .input-field {
6535
+ --input-color: var(--md-sys-color-primary);
6465
6536
  position: relative;
6466
6537
  clear: both;
6467
6538
  }
@@ -6470,15 +6541,15 @@ textarea.materialize-textarea {
6470
6541
  box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
6471
6542
  padding: 0 16px;
6472
6543
  padding-top: 20px;
6473
- background-color: var(--surface-color);
6544
+ background-color: var(--md-sys-color-surface);
6474
6545
  border: none;
6475
6546
  border-radius: 4px;
6476
- border-bottom: 1px solid var(--font-color-medium);
6547
+ border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
6477
6548
  border-bottom-left-radius: 0;
6478
6549
  border-bottom-right-radius: 0;
6479
6550
  }
6480
6551
  .input-field input:focus:not([readonly]), .input-field textarea:focus:not([readonly]) {
6481
- border-bottom: 2px solid var(--primary-color);
6552
+ border-bottom: 2px solid var(--input-color);
6482
6553
  padding-top: 21px;
6483
6554
  }
6484
6555
  .input-field input:disabled, .input-field input[readonly=readonly], .input-field textarea:disabled, .input-field textarea[readonly=readonly] {
@@ -6487,7 +6558,7 @@ textarea.materialize-textarea {
6487
6558
  background-color: rgba(var(--md_sys_color_on-surface), 0.04);
6488
6559
  }
6489
6560
  .input-field input:focus:not([readonly]) + label, .input-field textarea:focus:not([readonly]) + label {
6490
- color: var(--primary-color);
6561
+ color: var(--input-color);
6491
6562
  }
6492
6563
  .input-field input:not(:-moz-placeholder-shown) + label, .input-field textarea:not(:-moz-placeholder-shown) + label {
6493
6564
  transform: scale(0.75);
@@ -6528,7 +6599,7 @@ textarea.materialize-textarea {
6528
6599
  user-select: none;
6529
6600
  }
6530
6601
  .input-field > label {
6531
- color: var(--font-color-medium);
6602
+ color: var(--md-sys-color-on-surface-variant);
6532
6603
  -webkit-user-select: none;
6533
6604
  -moz-user-select: none;
6534
6605
  -ms-user-select: none;
@@ -6546,13 +6617,13 @@ textarea.materialize-textarea {
6546
6617
  transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
6547
6618
  }
6548
6619
  .input-field .supporting-text {
6549
- color: var(--font-color-medium);
6620
+ color: var(--md-sys-color-on-surface-variant);
6550
6621
  font-size: 12px;
6551
6622
  padding: 0 16px;
6552
6623
  margin-top: 4px;
6553
6624
  }
6554
6625
  .input-field .character-counter {
6555
- color: var(--font-color-medium);
6626
+ color: var(--md-sys-color-on-surface-variant);
6556
6627
  font-size: 12px;
6557
6628
  float: right;
6558
6629
  padding: 0 16px;
@@ -6594,60 +6665,60 @@ textarea.materialize-textarea {
6594
6665
  }
6595
6666
  .input-field.outlined input, .input-field.outlined textarea {
6596
6667
  padding-top: 0;
6597
- background-color: var(--background-color);
6598
- border: 1px solid var(--font-color-medium);
6668
+ background-color: var(--md-sys-color-background);
6669
+ border: 1px solid var(--md-sys-color-on-surface-variant);
6599
6670
  border-radius: 4px;
6600
6671
  }
6601
6672
  .input-field.outlined input:focus:not([readonly]), .input-field.outlined textarea:focus:not([readonly]) {
6602
- border: 2px solid var(--primary-color);
6673
+ border: 2px solid var(--input-color);
6603
6674
  padding-top: 0;
6604
6675
  margin-left: -1px;
6605
6676
  }
6606
6677
  .input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined textarea:focus:not([readonly]) + label {
6607
- color: var(--primary-color);
6678
+ color: var(--input-color);
6608
6679
  }
6609
6680
  .input-field.outlined input:not(:-moz-placeholder-shown) + label, .input-field.outlined textarea:not(:-moz-placeholder-shown) + label {
6610
6681
  top: -8px;
6611
6682
  left: 16px;
6612
6683
  margin-left: -4px;
6613
6684
  padding: 0 4px;
6614
- background-color: var(--background-color);
6685
+ background-color: var(--md-sys-color-background);
6615
6686
  }
6616
6687
  .input-field.outlined input:not(:-ms-input-placeholder) + label, .input-field.outlined textarea:not(:-ms-input-placeholder) + label {
6617
6688
  top: -8px;
6618
6689
  left: 16px;
6619
6690
  margin-left: -4px;
6620
6691
  padding: 0 4px;
6621
- background-color: var(--background-color);
6692
+ background-color: var(--md-sys-color-background);
6622
6693
  }
6623
6694
  .input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined input:not([placeholder=" "]) + label, .input-field.outlined input:not(:placeholder-shown) + label, .input-field.outlined textarea:focus:not([readonly]) + label, .input-field.outlined textarea:not([placeholder=" "]) + label, .input-field.outlined textarea:not(:placeholder-shown) + label {
6624
6695
  top: -8px;
6625
6696
  left: 16px;
6626
6697
  margin-left: -4px;
6627
6698
  padding: 0 4px;
6628
- background-color: var(--background-color);
6699
+ background-color: var(--md-sys-color-background);
6629
6700
  }
6630
6701
  .input-field.outlined input:disabled, .input-field.outlined input[readonly=readonly], .input-field.outlined textarea:disabled, .input-field.outlined textarea[readonly=readonly] {
6631
6702
  color: rgba(var(--md_sys_color_on-surface), 0.38);
6632
6703
  border-color: rgba(var(--md_sys_color_on-surface), 0.12);
6633
6704
  }
6634
6705
  .input-field.error input, .input-field.error textarea {
6635
- border-color: var(--error-color);
6706
+ border-color: var(--md-sys-color-error);
6636
6707
  }
6637
6708
  .input-field.error input:focus:not([readonly]), .input-field.error textarea:focus:not([readonly]) {
6638
- border-color: var(--error-color);
6709
+ border-color: var(--md-sys-color-error);
6639
6710
  }
6640
6711
  .input-field.error input:focus:not([readonly]) + label, .input-field.error textarea:focus:not([readonly]) + label {
6641
- color: var(--error-color);
6712
+ color: var(--md-sys-color-error);
6642
6713
  }
6643
6714
  .input-field.error label {
6644
- color: var(--error-color);
6715
+ color: var(--md-sys-color-error);
6645
6716
  }
6646
6717
  .input-field.error .supporting-text {
6647
- color: var(--error-color);
6718
+ color: var(--md-sys-color-error);
6648
6719
  }
6649
6720
  .input-field.error .suffix {
6650
- color: var(--error-color);
6721
+ color: var(--md-sys-color-error);
6651
6722
  }
6652
6723
 
6653
6724
  /* Search Field */
@@ -6734,7 +6805,7 @@ textarea.materialize-textarea {
6734
6805
 
6735
6806
  /* Autocomplete Items */
6736
6807
  .autocomplete-content li .highlight {
6737
- color: var(--font-color-main);
6808
+ color: var(--md-sys-color-on-background);
6738
6809
  }
6739
6810
  .autocomplete-content li img {
6740
6811
  height: 40px;
@@ -6742,8 +6813,6 @@ textarea.materialize-textarea {
6742
6813
  margin: 5px 15px;
6743
6814
  }
6744
6815
 
6745
- /* Radio Buttons
6746
- ========================================================================== */
6747
6816
  [type=radio]:not(:checked),
6748
6817
  [type=radio]:checked {
6749
6818
  position: absolute;
@@ -6794,7 +6863,7 @@ textarea.materialize-textarea {
6794
6863
 
6795
6864
  [type=radio]:not(:checked) + span:before,
6796
6865
  [type=radio]:not(:checked) + span:after {
6797
- border: 2px solid var(--font-color-medium);
6866
+ border: 2px solid var(--md-sys-color-on-surface-variant);
6798
6867
  }
6799
6868
 
6800
6869
  [type=radio]:not(:checked) + span:after {
@@ -6810,12 +6879,12 @@ textarea.materialize-textarea {
6810
6879
  [type=radio]:checked + span:after,
6811
6880
  [type=radio].with-gap:checked + span:before,
6812
6881
  [type=radio].with-gap:checked + span:after {
6813
- border: 2px solid var(--primary-color);
6882
+ border: 2px solid var(--md-sys-color-primary);
6814
6883
  }
6815
6884
 
6816
6885
  [type=radio]:checked + span:after,
6817
6886
  [type=radio].with-gap:checked + span:after {
6818
- background-color: var(--primary-color);
6887
+ background-color: var(--md-sys-color-primary);
6819
6888
  }
6820
6889
 
6821
6890
  [type=radio]:checked + span:after {
@@ -6831,38 +6900,38 @@ textarea.materialize-textarea {
6831
6900
 
6832
6901
  /* Focused styles */
6833
6902
  [type=radio].tabbed:focus + span:before {
6834
- -webkit-box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
6835
- box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
6903
+ -webkit-box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
6904
+ box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
6836
6905
  }
6837
6906
 
6838
6907
  /* Disabled Radio With gap */
6839
6908
  [type=radio].with-gap:disabled:checked + span:before {
6840
- border: 2px solid var(--font-color-disabled);
6909
+ border: 2px solid var(--md-sys-color-on-surface);
6841
6910
  }
6842
6911
 
6843
6912
  [type=radio].with-gap:disabled:checked + span:after {
6844
6913
  border: none;
6845
- background-color: var(--font-color-disabled);
6914
+ background-color: var(--md-sys-color-on-surface);
6846
6915
  }
6847
6916
 
6848
6917
  /* Disabled style */
6849
6918
  [type=radio]:disabled:not(:checked) + span:before,
6850
6919
  [type=radio]:disabled:checked + span:before {
6851
6920
  background-color: transparent;
6852
- border-color: var(--font-color-disabled);
6921
+ border-color: var(--md-sys-color-on-surface);
6853
6922
  }
6854
6923
 
6855
6924
  [type=radio]:disabled + span {
6856
- color: var(--font-color-disabled);
6925
+ color: var(--md-sys-color-on-surface);
6857
6926
  }
6858
6927
 
6859
6928
  [type=radio]:disabled:not(:checked) + span:before {
6860
- border-color: var(--font-color-disabled);
6929
+ border-color: var(--md-sys-color-on-surface);
6861
6930
  }
6862
6931
 
6863
6932
  [type=radio]:disabled:checked + span:after {
6864
- background-color: var(--font-color-disabled);
6865
- border-color: var(--font-color-disabled);
6933
+ background-color: var(--md-sys-color-on-surface);
6934
+ border-color: var(--md-sys-color-on-surface);
6866
6935
  }
6867
6936
 
6868
6937
  /* Checkboxes
@@ -6899,7 +6968,7 @@ textarea.materialize-textarea {
6899
6968
  width: 18px;
6900
6969
  height: 18px;
6901
6970
  z-index: 0;
6902
- border: 2px solid var(--font-color-medium);
6971
+ border: 2px solid var(--md-sys-color-on-surface-variant);
6903
6972
  border-radius: 1px;
6904
6973
  margin-top: 3px;
6905
6974
  -webkit-transition: 0.2s;
@@ -6912,16 +6981,16 @@ textarea.materialize-textarea {
6912
6981
  }
6913
6982
  [type=checkbox]:not(:checked):disabled + span:not(.lever):before {
6914
6983
  border: none;
6915
- background-color: var(--font-color-disabled);
6984
+ background-color: var(--md-sys-color-on-surface);
6916
6985
  }
6917
6986
  [type=checkbox].tabbed:focus + span:not(.lever):after {
6918
6987
  -webkit-transform: scale(1);
6919
6988
  transform: scale(1);
6920
6989
  border: 0;
6921
6990
  border-radius: 50%;
6922
- -webkit-box-shadow: 0 0 0 10px var(--focus-color);
6923
- box-shadow: 0 0 0 10px var(--focus-color);
6924
- background-color: var(--focus-color);
6991
+ -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
6992
+ box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
6993
+ background-color: rgba(0, 0, 0, 0.12);
6925
6994
  }
6926
6995
 
6927
6996
  [type=checkbox]:checked + span:not(.lever):before {
@@ -6931,8 +7000,8 @@ textarea.materialize-textarea {
6931
7000
  height: 22px;
6932
7001
  border-top: 2px solid transparent;
6933
7002
  border-left: 2px solid transparent;
6934
- border-right: 2px solid var(--primary-color);
6935
- border-bottom: 2px solid var(--primary-color);
7003
+ border-right: 2px solid var(--md-sys-color-primary);
7004
+ border-bottom: 2px solid var(--md-sys-color-primary);
6936
7005
  -webkit-transform: rotate(40deg);
6937
7006
  transform: rotate(40deg);
6938
7007
  -webkit-backface-visibility: hidden;
@@ -6941,8 +7010,8 @@ textarea.materialize-textarea {
6941
7010
  transform-origin: 100% 100%;
6942
7011
  }
6943
7012
  [type=checkbox]:checked:disabled + span:before {
6944
- border-right: 2px solid var(--font-color-disabled);
6945
- border-bottom: 2px solid var(--font-color-disabled);
7013
+ border-right: 2px solid var(--md-sys-color-on-surface);
7014
+ border-bottom: 2px solid var(--md-sys-color-on-surface);
6946
7015
  }
6947
7016
 
6948
7017
  /* Indeterminate checkbox */
@@ -6953,7 +7022,7 @@ textarea.materialize-textarea {
6953
7022
  height: 22px;
6954
7023
  border-top: none;
6955
7024
  border-left: none;
6956
- border-right: 2px solid var(--primary-color);
7025
+ border-right: 2px solid var(--md-sys-color-primary);
6957
7026
  border-bottom: none;
6958
7027
  -webkit-transform: rotate(90deg);
6959
7028
  transform: rotate(90deg);
@@ -6963,7 +7032,7 @@ textarea.materialize-textarea {
6963
7032
  transform-origin: 100% 100%;
6964
7033
  }
6965
7034
  [type=checkbox]:indeterminate:disabled + span:not(.lever):before {
6966
- border-right: 2px solid var(--font-color-disabled);
7035
+ border-right: 2px solid var(--md-sys-color-on-surface);
6967
7036
  background-color: transparent;
6968
7037
  }
6969
7038
 
@@ -6995,7 +7064,7 @@ textarea.materialize-textarea {
6995
7064
  height: 20px;
6996
7065
  width: 20px;
6997
7066
  background-color: transparent;
6998
- border: 2px solid var(--font-color-medium);
7067
+ border: 2px solid var(--md-sys-color-on-surface-variant);
6999
7068
  top: 0px;
7000
7069
  z-index: 0;
7001
7070
  }
@@ -7006,8 +7075,8 @@ textarea.materialize-textarea {
7006
7075
  height: 13px;
7007
7076
  border-top: 2px solid transparent;
7008
7077
  border-left: 2px solid transparent;
7009
- border-right: 2px solid var(--font-on-primary-color-main);
7010
- border-bottom: 2px solid var(--font-on-primary-color-main);
7078
+ border-right: 2px solid var(--md-sys-color-on-primary);
7079
+ border-bottom: 2px solid var(--md-sys-color-on-primary);
7011
7080
  -webkit-transform: rotateZ(37deg);
7012
7081
  transform: rotateZ(37deg);
7013
7082
  -webkit-transform-origin: 100% 100%;
@@ -7017,19 +7086,19 @@ textarea.materialize-textarea {
7017
7086
  top: 0;
7018
7087
  width: 20px;
7019
7088
  height: 20px;
7020
- border: 2px solid var(--primary-color);
7021
- background-color: var(--primary-color);
7089
+ border: 2px solid var(--md-sys-color-primary);
7090
+ background-color: var(--md-sys-color-primary);
7022
7091
  z-index: 0;
7023
7092
  }
7024
7093
  [type=checkbox].filled-in.tabbed:focus + span:not(.lever):after {
7025
7094
  border-radius: 2px;
7026
- border-color: var(--font-color-medium);
7027
- background-color: var(--focus-color);
7095
+ border-color: var(--md-sys-color-on-surface-variant) r;
7096
+ background-color: rgba(0, 0, 0, 0.12);
7028
7097
  }
7029
7098
  [type=checkbox].filled-in.tabbed:checked:focus + span:not(.lever):after {
7030
7099
  border-radius: 2px;
7031
- background-color: var(--primary-color);
7032
- border-color: var(--primary-color);
7100
+ background-color: var(--md-sys-color-primary);
7101
+ border-color: var(--md-sys-color-primary);
7033
7102
  }
7034
7103
  [type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):before {
7035
7104
  background-color: transparent;
@@ -7037,18 +7106,16 @@ textarea.materialize-textarea {
7037
7106
  }
7038
7107
  [type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):after {
7039
7108
  border-color: transparent;
7040
- background-color: var(--font-color-disabled);
7109
+ background-color: var(--md-sys-color-on-surface);
7041
7110
  }
7042
7111
  [type=checkbox].filled-in:disabled:checked + span:not(.lever):before {
7043
7112
  background-color: transparent;
7044
7113
  }
7045
7114
  [type=checkbox].filled-in:disabled:checked + span:not(.lever):after {
7046
- background-color: var(--font-color-disabled);
7047
- border-color: var(--font-color-disabled);
7115
+ background-color: var(--md-sys-color-on-surface);
7116
+ border-color: var(--md-sys-color-on-surface);
7048
7117
  }
7049
7118
 
7050
- /* Switch
7051
- ========================================================================== */
7052
7119
  .switch {
7053
7120
  --track-height: 32px;
7054
7121
  --track-width: 52px;
@@ -7079,8 +7146,8 @@ textarea.materialize-textarea {
7079
7146
  height: 0;
7080
7147
  }
7081
7148
  .switch label input[type=checkbox]:checked + .lever {
7082
- background-color: var(--primary-color);
7083
- border-color: var(--primary-color);
7149
+ background-color: var(--md-sys-color-primary);
7150
+ border-color: var(--md-sys-color-primary);
7084
7151
  }
7085
7152
  .switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
7086
7153
  top: var(--gap-on);
@@ -7097,6 +7164,7 @@ textarea.materialize-textarea {
7097
7164
  border-style: solid;
7098
7165
  border-width: 2px;
7099
7166
  border-color: var(--md-sys-color-outline);
7167
+ background-color: var(--md-sys-color-surface-variant);
7100
7168
  border-radius: 15px;
7101
7169
  margin-right: 10px;
7102
7170
  -webkit-transition: background 0.3s ease;
@@ -7131,21 +7199,21 @@ input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
7131
7199
  }
7132
7200
 
7133
7201
  input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {
7134
- background-color: var(--primary-color-hover-opaque);
7202
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
7135
7203
  }
7136
7204
 
7137
7205
  input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
7138
7206
  input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
7139
- background-color: var(--primary-color-focus-opaque);
7207
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
7140
7208
  }
7141
7209
 
7142
7210
  input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
7143
- background-color: var(--hover-color);
7211
+ background-color: rgba(0, 0, 0, 0.04);
7144
7212
  }
7145
7213
 
7146
7214
  input[type=checkbox]:not(:disabled) ~ .lever:active:before,
7147
7215
  input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
7148
- background-color: var(--focus-color);
7216
+ background-color: rgba(0, 0, 0, 0.12);
7149
7217
  }
7150
7218
 
7151
7219
  .switch input[type=checkbox][disabled] + .lever {
@@ -7157,15 +7225,15 @@ input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
7157
7225
  ========================================================================== */
7158
7226
  select.browser-default {
7159
7227
  opacity: 1;
7160
- color: var(--font-color-main);
7228
+ color: var(--md-sys-color-on-background);
7161
7229
  }
7162
7230
 
7163
7231
  select {
7164
7232
  opacity: 0;
7165
- background-color: var(--surface-color);
7233
+ background-color: var(--md-sys-color-surface);
7166
7234
  width: 100%;
7167
7235
  padding: 5px;
7168
- border: 1px solid var(--separator-color);
7236
+ border: 1px solid var(--md-sys-color-outline-variant);
7169
7237
  border-radius: 2px;
7170
7238
  height: 3rem;
7171
7239
  }
@@ -7209,31 +7277,31 @@ select {
7209
7277
  /*
7210
7278
  input.select-dropdown {
7211
7279
  &:focus {
7212
- border-bottom: 1px solid $input-focus-color;
7280
+ border-bottom: 1px solid var(--md-sys-color-primary);
7213
7281
  }
7214
7282
  position: relative;
7215
7283
  cursor: pointer;
7216
7284
  background-color: transparent;
7217
7285
  border: none;
7218
- border-bottom: $input-border;
7286
+ border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
7219
7287
  outline: none;
7220
- height: $input-height;
7221
- line-height: $input-height;
7288
+ height: 3rem;
7289
+ line-height: 3rem;
7222
7290
  width: 100%;
7223
- font-size: $input-font-size;
7224
- margin: $input-margin;
7291
+ font-size: 16px;
7292
+ margin: 0 0 8px 0;
7225
7293
  padding: 0;
7226
7294
  display: block;
7227
7295
  user-select:none;
7228
7296
  z-index: 1;
7229
- color: $select-input-color;
7297
+ color: var(--md-sys-color-on-background);
7230
7298
  }
7231
7299
  */
7232
7300
  /*
7233
7301
  & + label {
7234
7302
  position: absolute;
7235
7303
  top: -26px;
7236
- font-size: $label-font-size;
7304
+ font-size: .8rem;
7237
7305
  }
7238
7306
  */
7239
7307
  }
@@ -7244,7 +7312,7 @@ select {
7244
7312
  bottom: 0;
7245
7313
  margin: auto 0;
7246
7314
  z-index: 0;
7247
- fill: var(--font-color-main);
7315
+ fill: var(--md-sys-color-on-background);
7248
7316
  }
7249
7317
  .select-wrapper .hide-select {
7250
7318
  width: 0;
@@ -7256,18 +7324,18 @@ select {
7256
7324
  }
7257
7325
 
7258
7326
  select:disabled {
7259
- color: var(--font-color-disabled);
7327
+ color: var(--md-sys-color-on-surface);
7260
7328
  }
7261
7329
 
7262
7330
  .select-wrapper.disabled + label {
7263
- color: var(--font-color-disabled);
7331
+ color: var(--md-sys-color-on-surface);
7264
7332
  }
7265
7333
  .select-wrapper.disabled .caret {
7266
- fill: var(--font-color-disabled);
7334
+ fill: var(--md-sys-color-on-surface);
7267
7335
  }
7268
7336
 
7269
7337
  .select-wrapper input.select-dropdown:disabled {
7270
- color: var(--font-color-disabled);
7338
+ color: var(--md-sys-color-on-surface);
7271
7339
  cursor: default;
7272
7340
  -webkit-user-select: none;
7273
7341
  -moz-user-select: none;
@@ -7276,27 +7344,34 @@ select:disabled {
7276
7344
  }
7277
7345
 
7278
7346
  .select-wrapper i {
7279
- color: var(--font-color-disabled);
7347
+ color: var(--md-sys-color-on-surface);
7280
7348
  }
7281
7349
 
7282
7350
  .select-dropdown li.disabled,
7283
7351
  .select-dropdown li.disabled > span,
7284
7352
  .select-dropdown li.optgroup {
7285
- color: var(--font-color-disabled);
7286
- background-color: transparent;
7353
+ color: var(--md-sys-color-on-surface);
7287
7354
  }
7288
7355
 
7289
- body.keyboard-focused .select-dropdown.dropdown-content li:focus {
7290
- background-color: var(--focus-color);
7356
+ /*
7357
+ body.keyboard-focused {
7358
+ .select-dropdown.dropdown-content li:focus {
7359
+ //background-color: $select-option-focus;
7360
+ }
7291
7361
  }
7292
7362
 
7293
- .select-dropdown.dropdown-content li:hover:not(.disabled) {
7294
- background-color: var(--hover-color);
7295
- }
7296
- .select-dropdown.dropdown-content li.selected:not(.disabled) {
7297
- background-color: var(--focus-color);
7298
- }
7363
+ .select-dropdown.dropdown-content {
7364
+ li {
7365
+ &:hover:not(.disabled) {
7366
+ //background-color: $select-option-hover;
7367
+ }
7299
7368
 
7369
+ &.selected:not(.disabled) {
7370
+ //background-color: $select-option-selected;
7371
+ }
7372
+ }
7373
+ }
7374
+ */
7300
7375
  /*
7301
7376
  // Prefix Icons
7302
7377
  .prefix ~ .select-wrapper {
@@ -7321,20 +7396,22 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
7321
7396
  }
7322
7397
 
7323
7398
  .select-dropdown li.optgroup {
7324
- border-top: 1px solid var(--hover-color);
7399
+ border-top: 1px solid rgba(0, 0, 0, 0.04);
7325
7400
  }
7326
7401
  .select-dropdown li.optgroup.selected > span {
7327
- color: var(--font-color-main);
7402
+ color: var(--md-sys-color-on-background);
7328
7403
  }
7329
7404
  .select-dropdown li.optgroup > span {
7330
- color: var(--font-color-medium);
7405
+ color: var(--md-sys-color-on-surface-variant);
7331
7406
  }
7332
7407
  .select-dropdown li.optgroup ~ li.optgroup-option {
7333
7408
  padding-left: 1rem;
7334
7409
  }
7335
7410
 
7336
- /* File Input
7337
- ========================================================================== */
7411
+ .select-dropdown .selected {
7412
+ color: red;
7413
+ }
7414
+
7338
7415
  .file-field {
7339
7416
  display: grid;
7340
7417
  grid-template-columns: -webkit-min-content auto;
@@ -7372,8 +7449,6 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
7372
7449
  display: none;
7373
7450
  }
7374
7451
 
7375
- /* Range
7376
- ========================================================================== */
7377
7452
  .range-field {
7378
7453
  position: relative;
7379
7454
  }
@@ -7404,7 +7479,7 @@ input[type=range] + .thumb {
7404
7479
  height: 0;
7405
7480
  width: 0;
7406
7481
  border-radius: 50%;
7407
- background-color: var(--primary-color);
7482
+ background-color: var(--md-sys-color-primary);
7408
7483
  margin-left: 7px;
7409
7484
  -webkit-transform-origin: 50% 50%;
7410
7485
  transform-origin: 50% 50%;
@@ -7415,7 +7490,7 @@ input[type=range] + .thumb .value {
7415
7490
  display: block;
7416
7491
  width: 30px;
7417
7492
  text-align: center;
7418
- color: var(--primary-color);
7493
+ color: var(--md-sys-color-primary);
7419
7494
  font-size: 0;
7420
7495
  -webkit-transform: rotate(45deg);
7421
7496
  transform: rotate(45deg);
@@ -7424,7 +7499,7 @@ input[type=range] + .thumb.active {
7424
7499
  border-radius: 50% 50% 50% 0;
7425
7500
  }
7426
7501
  input[type=range] + .thumb.active .value {
7427
- color: var(--font-on-primary-color-main);
7502
+ color: var(--md-sys-color-on-primary);
7428
7503
  margin-left: -1px;
7429
7504
  margin-top: 8px;
7430
7505
  font-size: 10px;
@@ -7444,21 +7519,21 @@ input[type=range]::-webkit-slider-thumb {
7444
7519
  height: 14px;
7445
7520
  width: 14px;
7446
7521
  border-radius: 50%;
7447
- background: var(--primary-color);
7522
+ background: var(--md-sys-color-primary);
7448
7523
  -webkit-transition: -webkit-box-shadow 0.3s;
7449
7524
  transition: -webkit-box-shadow 0.3s;
7450
7525
  transition: box-shadow 0.3s;
7451
7526
  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
7452
7527
  -webkit-appearance: none;
7453
- background-color: var(--primary-color);
7528
+ background-color: var(--md-sys-color-primary);
7454
7529
  -webkit-transform-origin: 50% 50%;
7455
7530
  transform-origin: 50% 50%;
7456
7531
  margin: -5px 0 0 0;
7457
7532
  }
7458
7533
 
7459
7534
  .keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
7460
- -webkit-box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
7461
- box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
7535
+ -webkit-box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
7536
+ box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
7462
7537
  }
7463
7538
 
7464
7539
  input[type=range] {
@@ -7479,7 +7554,7 @@ input[type=range]::-moz-range-thumb {
7479
7554
  height: 14px;
7480
7555
  width: 14px;
7481
7556
  border-radius: 50%;
7482
- background: var(--primary-color);
7557
+ background: var(--md-sys-color-primary);
7483
7558
  -moz-transition: box-shadow 0.3s;
7484
7559
  transition: box-shadow 0.3s;
7485
7560
  margin-top: -5px;
@@ -7491,7 +7566,7 @@ input[type=range]:-moz-focusring {
7491
7566
  }
7492
7567
 
7493
7568
  .keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
7494
- box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
7569
+ box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
7495
7570
  }
7496
7571
 
7497
7572
  input[type=range]::-ms-track {
@@ -7505,12 +7580,12 @@ input[type=range]::-ms-track {
7505
7580
 
7506
7581
  input[type=range]::-ms-fill-lower,
7507
7582
  input[type=range]::-moz-range-progress {
7508
- background: var(--primary-color);
7583
+ background: var(--md-sys-color-primary);
7509
7584
  }
7510
7585
 
7511
7586
  input[type=range]::-ms-fill-upper,
7512
7587
  input[type=range]::-moz-range-track {
7513
- background: var(--slider-track-color);
7588
+ background: var(--md-sys-color-shadow-light);
7514
7589
  }
7515
7590
 
7516
7591
  input[type=range]::-ms-thumb {
@@ -7518,18 +7593,18 @@ input[type=range]::-ms-thumb {
7518
7593
  height: 14px;
7519
7594
  width: 14px;
7520
7595
  border-radius: 50%;
7521
- background: var(--primary-color);
7596
+ background: var(--md-sys-color-primary);
7522
7597
  -ms-transition: box-shadow 0.3s;
7523
7598
  transition: box-shadow 0.3s;
7524
7599
  }
7525
7600
 
7526
7601
  .keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
7527
- box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
7602
+ box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
7528
7603
  }
7529
7604
 
7530
- /***************
7531
- Nav List
7532
- ***************/
7605
+ .table-of-contents {
7606
+ list-style: none;
7607
+ }
7533
7608
  .table-of-contents.fixed {
7534
7609
  position: fixed;
7535
7610
  }
@@ -7539,27 +7614,32 @@ input[type=range]::-ms-thumb {
7539
7614
  .table-of-contents a {
7540
7615
  display: inline-block;
7541
7616
  font-weight: 400;
7542
- color: var(--font-color-medium);
7617
+ color: var(--md-sys-color-secondary);
7543
7618
  padding-left: 16px;
7544
7619
  height: 2rem;
7545
7620
  line-height: 2rem;
7546
- border-left: 1px solid var(--separator-color);
7621
+ border-left: 1px solid var(--md-sys-color-outline-variant);
7547
7622
  }
7548
7623
  .table-of-contents a:hover {
7549
- color: var(--font-color-main);
7624
+ color: var(--md-sys-color-on-background);
7550
7625
  padding-left: 15px;
7551
7626
  }
7552
7627
  .table-of-contents a.active {
7553
- color: var(--primary-color);
7628
+ color: var(--md-sys-color-primary);
7554
7629
  font-weight: 500;
7555
7630
  padding-left: 14px;
7556
- border-left: 2px solid var(--primary-color);
7631
+ border-left: 2px solid var(--md-sys-color-primary);
7557
7632
  }
7558
7633
 
7559
7634
  /* This should be an UL-Element*/
7560
7635
  .sidenav {
7636
+ --sidenav-width: 300px;
7637
+ --sidenav-font-size: 14px;
7638
+ --sidenav-padding: 16px;
7639
+ --sidenav-item-height: 48px;
7640
+ --sidenav-line-height: var(--sidenav-item-height);
7561
7641
  position: fixed;
7562
- width: 300px;
7642
+ width: var(--sidenav-width);
7563
7643
  left: 0;
7564
7644
  top: 0;
7565
7645
  margin: 0;
@@ -7567,7 +7647,6 @@ input[type=range]::-ms-thumb {
7567
7647
  transform: translateX(-100%);
7568
7648
  height: 100vh;
7569
7649
  padding: 0;
7570
- background-color: var(--background-color-level-16dp-solid);
7571
7650
  z-index: 999;
7572
7651
  overflow-y: auto;
7573
7652
  will-change: transform;
@@ -7579,7 +7658,14 @@ input[type=range]::-ms-thumb {
7579
7658
  -moz-user-select: none;
7580
7659
  -ms-user-select: none;
7581
7660
  user-select: none;
7661
+ color: var(--md-sys-color-on-secondary-container);
7662
+ background-color: var(--md-sys-color-surface);
7582
7663
  /* Hover only on top row */
7664
+ /*a:hover {
7665
+ //color: red;
7666
+ //background-color: var(--md-sys-color-on-secondary-container);
7667
+ //md.sys.color.on-secondary-container
7668
+ }*/
7583
7669
  }
7584
7670
  .sidenav.right-aligned {
7585
7671
  right: 0;
@@ -7592,15 +7678,11 @@ input[type=range]::-ms-thumb {
7592
7678
  .sidenav .collapsible {
7593
7679
  margin: 0;
7594
7680
  }
7595
- .sidenav a:hover {
7596
- background-color: var(--hover-color);
7597
- }
7598
7681
  .sidenav a:focus {
7599
- background-color: var(--focus-color);
7682
+ background-color: rgba(0, 0, 0, 0.12);
7600
7683
  }
7601
7684
  .sidenav li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) {
7602
- color: var(--font-on-secondary-container-color);
7603
- background-color: var(--secondary-container-color);
7685
+ background-color: color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent);
7604
7686
  }
7605
7687
  .sidenav .collapsible-body > ul {
7606
7688
  padding-left: 10px;
@@ -7615,7 +7697,7 @@ input[type=range]::-ms-thumb {
7615
7697
  .sidenav li > a {
7616
7698
  /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */
7617
7699
  margin: 0 12px;
7618
- padding: 0 16px;
7700
+ padding: 0 var(--sidenav-padding);
7619
7701
  /*
7620
7702
  min-width: 0;
7621
7703
  white-space: nowrap;
@@ -7626,8 +7708,8 @@ input[type=range]::-ms-thumb {
7626
7708
  display: -webkit-flex;
7627
7709
  display: -ms-flexbox;
7628
7710
  display: flex;
7629
- height: 48px;
7630
- font-size: 14px;
7711
+ height: var(--sidenav-item-height);
7712
+ font-size: var(--sidenav-font-size);
7631
7713
  font-weight: 500;
7632
7714
  -webkit-box-align: center;
7633
7715
  -webkit-align-items: center;
@@ -7638,7 +7720,10 @@ input[type=range]::-ms-thumb {
7638
7720
  /* TODO: Use special class in future like "mw-icon" */
7639
7721
  }
7640
7722
  .sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) {
7641
- color: var(--font-color-main);
7723
+ color: var(--md-sys-color-on-secondary-container);
7724
+ }
7725
+ .sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating):hover {
7726
+ background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
7642
7727
  }
7643
7728
  .sidenav li > a.btn, .sidenav li > a.btn-small, .sidenav li > a.btn-large, .sidenav li > a.btn-flat, .sidenav li > a.btn-floating {
7644
7729
  margin: 10px 15px;
@@ -7649,24 +7734,23 @@ input[type=range]::-ms-thumb {
7649
7734
  display: -ms-inline-flexbox;
7650
7735
  display: inline-flex;
7651
7736
  vertical-align: middle;
7652
- color: var(--font-color-medium);
7653
7737
  margin-right: 12px;
7654
7738
  }
7655
7739
  .sidenav .divider {
7656
- margin: 8px 0 0 0;
7740
+ margin: calc(var(--sidenav-padding) * 0.5) 0 0 0;
7657
7741
  }
7658
7742
  .sidenav .subheader {
7659
7743
  cursor: initial;
7660
7744
  pointer-events: none;
7661
- color: var(--font-color-medium);
7662
- font-size: 14px;
7745
+ color: red;
7746
+ font-size: var(--sidenav-font-size);
7663
7747
  font-weight: 500;
7664
- line-height: 48px;
7748
+ line-height: var(--sidenav-line-height);
7665
7749
  }
7666
7750
  .sidenav .user-view {
7667
7751
  position: relative;
7668
- padding: 32px 32px 0;
7669
- margin-bottom: 8px;
7752
+ padding: calc(var(--sidenav-padding) * 2) calc(var(--sidenav-padding) * 2) 0;
7753
+ margin-bottom: calc(var(--sidenav-padding) * 0.5);
7670
7754
  }
7671
7755
  .sidenav .user-view > a {
7672
7756
  height: auto;
@@ -7693,8 +7777,8 @@ input[type=range]::-ms-thumb {
7693
7777
  }
7694
7778
  .sidenav .user-view .name,
7695
7779
  .sidenav .user-view .email {
7696
- font-size: 14px;
7697
- line-height: 24px;
7780
+ font-size: var(--sidenav-font-size);
7781
+ line-height: calc(var(--sidenav-line-height) * 0.5);
7698
7782
  }
7699
7783
  .sidenav .user-view .name {
7700
7784
  margin-top: 16px;
@@ -7737,10 +7821,10 @@ input[type=range]::-ms-thumb {
7737
7821
  transform: translateX(105%);
7738
7822
  }
7739
7823
  .sidenav > a {
7740
- padding: 0 16px;
7824
+ padding: 0 var(--sidenav-padding);
7741
7825
  }
7742
7826
  .sidenav .user-view {
7743
- padding: 16px 16px 0;
7827
+ padding: var(--sidenav-padding) var(--sidenav-padding) 0;
7744
7828
  }
7745
7829
  }
7746
7830
  .sidenav .collapsible-body {
@@ -7779,21 +7863,22 @@ input[type=range]::-ms-thumb {
7779
7863
  height: 4px;
7780
7864
  display: block;
7781
7865
  width: 100%;
7782
- border-radius: 2px;
7866
+ border-radius: 4px;
7783
7867
  margin: 0.5rem 0 1rem 0;
7784
7868
  overflow: hidden;
7869
+ background-color: var(--md-sys-color-secondary-container);
7785
7870
  }
7786
7871
  .progress .determinate {
7787
7872
  position: absolute;
7788
7873
  top: 0;
7789
7874
  left: 0;
7790
7875
  bottom: 0;
7791
- background-color: var(--primary-color);
7876
+ background-color: var(--md-sys-color-primary);
7792
7877
  -webkit-transition: width 0.3s linear;
7793
7878
  transition: width 0.3s linear;
7794
7879
  }
7795
7880
  .progress .indeterminate {
7796
- background-color: var(--primary-color);
7881
+ background-color: var(--md-sys-color-primary);
7797
7882
  }
7798
7883
  .progress .indeterminate:before {
7799
7884
  content: "";
@@ -7938,7 +8023,7 @@ input[type=range]::-ms-thumb {
7938
8023
  width: 100%;
7939
8024
  height: 100%;
7940
8025
  opacity: 0;
7941
- border-color: var(--primary-color);
8026
+ border-color: var(--md-sys-color-primary);
7942
8027
  }
7943
8028
 
7944
8029
  .spinner-blue,
@@ -8376,13 +8461,13 @@ input[type=range]::-ms-thumb {
8376
8461
  bottom: 30px;
8377
8462
  }
8378
8463
  .slider.fullscreen ul.indicators .indicator-item {
8379
- background-color: var(--carousel-indicator-color);
8464
+ background-color: rgba(255, 255, 255, 0.45);
8380
8465
  }
8381
8466
  .slider.fullscreen ul.indicators .indicator-item.active {
8382
- background-color: var(--carousel-indicator-active-color);
8467
+ background-color: var(--md-ref-palette-primary100);
8383
8468
  }
8384
8469
  .slider .slides {
8385
- background-color: var(--surface-color);
8470
+ background-color: var(--md-sys-color-surface);
8386
8471
  margin: 0;
8387
8472
  height: 400px;
8388
8473
  padding-left: 0;
@@ -8442,7 +8527,7 @@ input[type=range]::-ms-thumb {
8442
8527
  top: 0;
8443
8528
  left: 0;
8444
8529
  cursor: pointer;
8445
- background-color: var(--slider-track-color);
8530
+ background-color: var(--md-sys-color-shadow-light);
8446
8531
  -webkit-transition: background-color 0.3s;
8447
8532
  transition: background-color 0.3s;
8448
8533
  border-radius: 50%;
@@ -8451,14 +8536,15 @@ input[type=range]::-ms-thumb {
8451
8536
  height: 100%;
8452
8537
  }
8453
8538
  .slider .indicators .indicator-item-btn.active {
8454
- background-color: var(--primary-color);
8539
+ background-color: var(--md-sys-color-primary);
8455
8540
  }
8456
8541
 
8457
8542
  .carousel {
8543
+ --carousel-height: 400px;
8458
8544
  overflow: hidden;
8459
8545
  position: relative;
8460
8546
  width: 100%;
8461
- height: 400px;
8547
+ height: var(--carousel-height);
8462
8548
  -webkit-perspective: 500px;
8463
8549
  perspective: 500px;
8464
8550
  -webkit-transform-style: preserve-3d;
@@ -8483,7 +8569,7 @@ input[type=range]::-ms-thumb {
8483
8569
  .carousel.carousel-slider .carousel-item {
8484
8570
  width: 100%;
8485
8571
  height: 100%;
8486
- min-height: 400px;
8572
+ min-height: var(--carousel-height);
8487
8573
  position: absolute;
8488
8574
  top: 0;
8489
8575
  left: 0;
@@ -8498,8 +8584,8 @@ input[type=range]::-ms-thumb {
8498
8584
  }
8499
8585
  .carousel .carousel-item {
8500
8586
  visibility: hidden;
8501
- width: 200px;
8502
- height: 200px;
8587
+ width: calc(var(--carousel-height) * 0.5);
8588
+ height: calc(var(--carousel-height) * 0.5);
8503
8589
  position: absolute;
8504
8590
  top: 0;
8505
8591
  left: 0;
@@ -8524,13 +8610,13 @@ input[type=range]::-ms-thumb {
8524
8610
  height: 8px;
8525
8611
  width: 8px;
8526
8612
  margin: 24px 4px;
8527
- background-color: var(--carousel-indicator-color);
8613
+ background-color: rgba(255, 255, 255, 0.45);
8528
8614
  -webkit-transition: background-color 0.3s;
8529
8615
  transition: background-color 0.3s;
8530
8616
  border-radius: 50%;
8531
8617
  }
8532
8618
  .carousel .indicators .indicator-item.active {
8533
- background-color: var(--carousel-indicator-active-color);
8619
+ background-color: var(--md-ref-palette-primary100);
8534
8620
  }
8535
8621
  .carousel.scrolling .carousel-item .materialboxed,
8536
8622
  .carousel .carousel-item:not(.active) .materialboxed {
@@ -8579,8 +8665,8 @@ input[type=range]::-ms-thumb {
8579
8665
  position: absolute;
8580
8666
  font-size: 1rem;
8581
8667
  border-radius: 50%;
8582
- background-color: var(--secondary-color);
8583
- color: var(--font-on-secondary-color-main);
8668
+ background-color: var(--md-sys-color-surface);
8669
+ color: var(--md-sys-color-on-secondary);
8584
8670
  -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
8585
8671
  box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
8586
8672
  width: 100%;
@@ -8611,7 +8697,7 @@ input[type=range]::-ms-thumb {
8611
8697
  width: 100%;
8612
8698
  height: 100%;
8613
8699
  border-radius: 50%;
8614
- background-color: var(--surface-color);
8700
+ background-color: var(--md-sys-color-surface);
8615
8701
  }
8616
8702
  .tap-target-wave::before {
8617
8703
  -webkit-transform: scale(0);
@@ -8725,7 +8811,7 @@ input[type=range]::-ms-thumb {
8725
8811
  -ms-flex-direction: column;
8726
8812
  flex-direction: column;
8727
8813
  padding: 0;
8728
- background-color: var(--surface-color);
8814
+ background-color: var(--md-sys-color-surface);
8729
8815
  }
8730
8816
 
8731
8817
  .datepicker-controls {
@@ -8776,7 +8862,7 @@ input[type=range]::-ms-thumb {
8776
8862
  }
8777
8863
  .datepicker-controls .month-prev > svg,
8778
8864
  .datepicker-controls .month-next > svg {
8779
- fill: var(--font-color-medium);
8865
+ fill: var(--md-sys-color-on-surface-variant);
8780
8866
  }
8781
8867
 
8782
8868
  .month-prev, .month-next {
@@ -8792,8 +8878,8 @@ input[type=range]::-ms-thumb {
8792
8878
  -webkit-flex: 1 auto;
8793
8879
  -ms-flex: 1 auto;
8794
8880
  flex: 1 auto;
8795
- background-color: var(--primary-color);
8796
- color: var(--font-on-primary-color-main);
8881
+ background-color: var(--md-sys-color-primary);
8882
+ color: var(--md-sys-color-on-primary);
8797
8883
  padding: 20px 22px;
8798
8884
  font-weight: 500;
8799
8885
  }
@@ -8801,7 +8887,7 @@ input[type=range]::-ms-thumb {
8801
8887
  display: block;
8802
8888
  font-size: 1.5rem;
8803
8889
  line-height: 25px;
8804
- color: var(--font-on-primary-color-main);
8890
+ color: var(--md-sys-color-on-primary);
8805
8891
  }
8806
8892
  .datepicker-date-display .date-text {
8807
8893
  display: block;
@@ -8835,22 +8921,22 @@ input[type=range]::-ms-thumb {
8835
8921
  }
8836
8922
  .datepicker-table abbr {
8837
8923
  text-decoration: none;
8838
- color: var(--font-color-medium);
8924
+ color: var(--md-sys-color-on-surface-variant);
8839
8925
  }
8840
8926
  .datepicker-table td {
8841
- color: var(--font-color-main);
8927
+ color: var(--md-sys-color-on-background);
8842
8928
  border-radius: 50%;
8843
8929
  padding: 0;
8844
8930
  }
8845
8931
  .datepicker-table td.is-today {
8846
- color: var(--primary-color);
8932
+ color: var(--md-sys-color-primary);
8847
8933
  }
8848
8934
  .datepicker-table td.is-selected {
8849
- background-color: var(--primary-color);
8850
- color: var(--font-on-primary-color-main);
8935
+ background-color: var(--md-sys-color-primary);
8936
+ color: var(--md-sys-color-on-primary);
8851
8937
  }
8852
8938
  .datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {
8853
- color: var(--font-color-disabled);
8939
+ color: var(--md-sys-color-on-surface);
8854
8940
  pointer-events: none;
8855
8941
  }
8856
8942
 
@@ -8866,10 +8952,10 @@ input[type=range]::-ms-thumb {
8866
8952
  color: inherit;
8867
8953
  }
8868
8954
  .datepicker-day-button:hover {
8869
- background-color: var(--primary-color-hover-opaque);
8955
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
8870
8956
  }
8871
8957
  .datepicker-day-button:focus {
8872
- background-color: var(--primary-color-focus-opaque);
8958
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
8873
8959
  }
8874
8960
 
8875
8961
  /* Footer */
@@ -8891,12 +8977,12 @@ input[type=range]::-ms-thumb {
8891
8977
  .datepicker-clear,
8892
8978
  .datepicker-today,
8893
8979
  .datepicker-done {
8894
- color: var(--primary-color);
8980
+ color: var(--md-sys-color-primary);
8895
8981
  padding: 0 1rem;
8896
8982
  }
8897
8983
 
8898
8984
  .datepicker-clear {
8899
- color: var(--error-color);
8985
+ color: var(--md-sys-color-error);
8900
8986
  }
8901
8987
 
8902
8988
  /* Media Queries */
@@ -8946,7 +9032,7 @@ input[type=range]::-ms-thumb {
8946
9032
  }
8947
9033
 
8948
9034
  .text-primary {
8949
- color: var(--font-on-primary-color-main);
9035
+ color: var(--md-sys-color-on-primary);
8950
9036
  }
8951
9037
 
8952
9038
  /* Clock Digital Display */
@@ -8956,7 +9042,7 @@ input[type=range]::-ms-thumb {
8956
9042
  -webkit-flex: 1 auto;
8957
9043
  -ms-flex: 1 auto;
8958
9044
  flex: 1 auto;
8959
- background-color: var(--primary-color);
9045
+ background-color: var(--md-sys-color-primary);
8960
9046
  padding: 10px;
8961
9047
  font-weight: 300;
8962
9048
  }
@@ -9016,11 +9102,11 @@ input[type=text].text-primary {
9016
9102
  -webkit-flex: 2.5 auto;
9017
9103
  -ms-flex: 2.5 auto;
9018
9104
  flex: 2.5 auto;
9019
- background-color: var(--surface-color);
9105
+ background-color: var(--md-sys-color-surface);
9020
9106
  }
9021
9107
 
9022
9108
  .timepicker-plate {
9023
- background-color: var(--background-color-level-4dp);
9109
+ background-color: rgba(0, 0, 0, 0.09);
9024
9110
  border-radius: 50%;
9025
9111
  width: 270px;
9026
9112
  height: 270px;
@@ -9050,7 +9136,7 @@ input[type=text].text-primary {
9050
9136
 
9051
9137
  .timepicker-tick {
9052
9138
  border-radius: 50%;
9053
- color: var(--font-color-main);
9139
+ color: var(--md-sys-color-on-background);
9054
9140
  line-height: 40px;
9055
9141
  text-align: center;
9056
9142
  width: 40px;
@@ -9062,7 +9148,7 @@ input[type=text].text-primary {
9062
9148
 
9063
9149
  .timepicker-tick.active,
9064
9150
  .timepicker-tick:hover {
9065
- background-color: var(--primary-color-hover-opaque);
9151
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
9066
9152
  }
9067
9153
 
9068
9154
  .timepicker-dial {
@@ -9089,7 +9175,7 @@ input[type=text].text-primary {
9089
9175
  transition: opacity 175ms;
9090
9176
  }
9091
9177
  .timepicker-canvas line {
9092
- stroke: var(--primary-color);
9178
+ stroke: var(--md-sys-color-primary);
9093
9179
  stroke-width: 4;
9094
9180
  stroke-linecap: round;
9095
9181
  }
@@ -9100,12 +9186,12 @@ input[type=text].text-primary {
9100
9186
 
9101
9187
  .timepicker-canvas-bearing {
9102
9188
  stroke: none;
9103
- fill: var(--primary-color);
9189
+ fill: var(--md-sys-color-primary);
9104
9190
  }
9105
9191
 
9106
9192
  .timepicker-canvas-bg {
9107
9193
  stroke: none;
9108
- fill: var(--primary-color);
9194
+ fill: var(--md-sys-color-primary);
9109
9195
  }
9110
9196
 
9111
9197
  /* Footer */
@@ -9123,11 +9209,11 @@ input[type=text].text-primary {
9123
9209
  }
9124
9210
 
9125
9211
  .timepicker-clear {
9126
- color: var(--error-color);
9212
+ color: var(--md-sys-color-error);
9127
9213
  }
9128
9214
 
9129
9215
  .timepicker-close {
9130
- color: var(--primary-color);
9216
+ color: var(--md-sys-color-primary);
9131
9217
  }
9132
9218
 
9133
9219
  .timepicker-clear,