@materializecss/materialize 1.2.2 → 2.0.0-alpha

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 (89) hide show
  1. package/Gruntfile.js +68 -313
  2. package/README.md +2 -2
  3. package/dist/css/materialize.css +1009 -1822
  4. package/dist/css/materialize.min.css +2 -8
  5. package/dist/js/materialize.js +8402 -12300
  6. package/dist/js/materialize.min.js +3 -2
  7. package/dist/js/materialize.min.js.map +1 -0
  8. package/package.json +13 -9
  9. package/sass/components/_badges.scss +12 -2
  10. package/sass/components/_buttons.scss +16 -11
  11. package/sass/components/_cards.scss +14 -9
  12. package/sass/components/_carousel.scss +5 -2
  13. package/sass/components/_chips.scss +3 -3
  14. package/sass/components/_collapsible.scss +22 -8
  15. package/sass/components/_collection.scss +14 -6
  16. package/sass/components/_datepicker.scss +30 -11
  17. package/sass/components/_dropdown.scss +6 -4
  18. package/sass/components/_global.scss +132 -111
  19. package/sass/components/_grid.scss +119 -98
  20. package/sass/components/_modal.scss +3 -3
  21. package/sass/components/_navbar.scss +31 -17
  22. package/sass/components/_normalize.scss +26 -124
  23. package/sass/components/_sidenav.scss +21 -20
  24. package/sass/components/_slider.scss +27 -7
  25. package/sass/components/_table_of_contents.scss +12 -12
  26. package/sass/components/_tabs.scss +47 -16
  27. package/sass/components/_tapTarget.scss +6 -6
  28. package/sass/components/_timepicker.scss +54 -46
  29. package/sass/components/_toast.scss +3 -3
  30. package/sass/components/_tooltip.scss +4 -5
  31. package/sass/components/_typography.scss +1 -1
  32. package/sass/components/_variables.scss +185 -120
  33. package/sass/components/forms/_checkboxes.scss +9 -9
  34. package/sass/components/forms/_file-input.scss +9 -7
  35. package/sass/components/forms/_input-fields.scss +173 -234
  36. package/sass/components/forms/_radio-buttons.scss +1 -1
  37. package/sass/components/forms/_range.scss +11 -11
  38. package/sass/components/forms/_select.scss +29 -19
  39. package/sass/components/forms/_switches.scss +22 -18
  40. package/sass/materialize.scss +1 -1
  41. package/src/autocomplete.ts +459 -0
  42. package/src/bounding.ts +6 -0
  43. package/{js/buttons.js → src/buttons.ts} +103 -162
  44. package/src/cards.ts +54 -0
  45. package/{js/carousel.js → src/carousel.ts} +137 -262
  46. package/src/characterCounter.ts +88 -0
  47. package/src/chips.ts +350 -0
  48. package/src/collapsible.ts +184 -0
  49. package/{js/component.js → src/component.ts} +6 -19
  50. package/{js/datepicker.js → src/datepicker.ts} +213 -299
  51. package/{js/dropdown.js → src/dropdown.ts} +140 -254
  52. package/src/edges.ts +6 -0
  53. package/src/forms.ts +120 -0
  54. package/src/global.ts +385 -0
  55. package/src/materialbox.ts +348 -0
  56. package/src/modal.ts +256 -0
  57. package/{js/parallax.js → src/parallax.ts} +47 -60
  58. package/{js/pushpin.js → src/pushpin.ts} +19 -47
  59. package/{js/range.js → src/range.ts} +58 -139
  60. package/{js/scrollspy.js → src/scrollspy.ts} +81 -153
  61. package/src/select.ts +448 -0
  62. package/{js/sidenav.js → src/sidenav.ts} +96 -202
  63. package/src/slider.ts +415 -0
  64. package/src/tabs.ts +290 -0
  65. package/src/tapTarget.ts +240 -0
  66. package/{js/timepicker.js → src/timepicker.ts} +268 -272
  67. package/{js/toasts.js → src/toasts.ts} +75 -134
  68. package/{js/tooltip.js → src/tooltip.ts} +59 -96
  69. package/src/waves.ts +70 -0
  70. package/extras/noUiSlider/nouislider.css +0 -404
  71. package/extras/noUiSlider/nouislider.js +0 -2147
  72. package/extras/noUiSlider/nouislider.min.js +0 -1
  73. package/js/anime.min.js +0 -34
  74. package/js/autocomplete.js +0 -479
  75. package/js/cards.js +0 -40
  76. package/js/cash.js +0 -960
  77. package/js/characterCounter.js +0 -136
  78. package/js/chips.js +0 -486
  79. package/js/collapsible.js +0 -275
  80. package/js/forms.js +0 -285
  81. package/js/global.js +0 -428
  82. package/js/materialbox.js +0 -453
  83. package/js/modal.js +0 -382
  84. package/js/select.js +0 -391
  85. package/js/slider.js +0 -497
  86. package/js/tabs.js +0 -402
  87. package/js/tapTarget.js +0 -315
  88. package/js/waves.js +0 -615
  89. package/sass/components/_waves.scss +0 -187
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Materialize v1.2.2 (https://materializecss.github.io/materialize)
2
+ * Materialize v2.0.0-alpha (https://materializecss.github.io/materialize)
3
3
  * Copyright 2014-2023 Materialize
4
4
  * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
5
5
  */
@@ -2140,38 +2140,31 @@
2140
2140
  color: transparent !important;
2141
2141
  }
2142
2142
 
2143
- /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
2143
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2144
2144
  /* Document
2145
2145
  ========================================================================== */
2146
2146
  /**
2147
2147
  * 1. Correct the line height in all browsers.
2148
- * 2. Prevent adjustments of font size after orientation changes in
2149
- * IE on Windows Phone and in iOS.
2148
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
2150
2149
  */
2151
2150
  html {
2152
2151
  line-height: 1.15; /* 1 */
2153
- -ms-text-size-adjust: 100%; /* 2 */
2154
2152
  -webkit-text-size-adjust: 100%; /* 2 */
2155
2153
  }
2156
2154
 
2157
2155
  /* Sections
2158
2156
  ========================================================================== */
2159
2157
  /**
2160
- * Remove the margin in all browsers (opinionated).
2158
+ * Remove the margin in all browsers.
2161
2159
  */
2162
2160
  body {
2163
2161
  margin: 0;
2164
2162
  }
2165
2163
 
2166
2164
  /**
2167
- * Add the correct display in IE 9-.
2165
+ * Render the `main` element consistently in IE.
2168
2166
  */
2169
- article,
2170
- aside,
2171
- footer,
2172
- header,
2173
- nav,
2174
- section {
2167
+ main {
2175
2168
  display: block;
2176
2169
  }
2177
2170
 
@@ -2186,23 +2179,6 @@ h1 {
2186
2179
 
2187
2180
  /* Grouping content
2188
2181
  ========================================================================== */
2189
- /**
2190
- * Add the correct display in IE 9-.
2191
- * 1. Add the correct display in IE.
2192
- */
2193
- figcaption,
2194
- figure,
2195
- main { /* 1 */
2196
- display: block;
2197
- }
2198
-
2199
- /**
2200
- * Add the correct margin in IE 8.
2201
- */
2202
- figure {
2203
- margin: 1em 40px;
2204
- }
2205
-
2206
2182
  /**
2207
2183
  * 1. Add the correct box sizing in Firefox.
2208
2184
  * 2. Show the overflow in Edge and IE.
@@ -2226,16 +2202,14 @@ pre {
2226
2202
  /* Text-level semantics
2227
2203
  ========================================================================== */
2228
2204
  /**
2229
- * 1. Remove the gray background on active links in IE 10.
2230
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
2205
+ * Remove the gray background on active links in IE 10.
2231
2206
  */
2232
2207
  a {
2233
- background-color: transparent; /* 1 */
2234
- -webkit-text-decoration-skip: objects; /* 2 */
2208
+ background-color: transparent;
2235
2209
  }
2236
2210
 
2237
2211
  /**
2238
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
2212
+ * 1. Remove the bottom border in Chrome 57-
2239
2213
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
2240
2214
  */
2241
2215
  abbr[title] {
@@ -2246,14 +2220,6 @@ abbr[title] {
2246
2220
  text-decoration: underline dotted; /* 2 */
2247
2221
  }
2248
2222
 
2249
- /**
2250
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
2251
- */
2252
- b,
2253
- strong {
2254
- font-weight: inherit;
2255
- }
2256
-
2257
2223
  /**
2258
2224
  * Add the correct font weight in Chrome, Edge, and Safari.
2259
2225
  */
@@ -2273,21 +2239,6 @@ samp {
2273
2239
  font-size: 1em; /* 2 */
2274
2240
  }
2275
2241
 
2276
- /**
2277
- * Add the correct font style in Android 4.3-.
2278
- */
2279
- dfn {
2280
- font-style: italic;
2281
- }
2282
-
2283
- /**
2284
- * Add the correct background and color in IE 9-.
2285
- */
2286
- mark {
2287
- background-color: #ff0;
2288
- color: #000;
2289
- }
2290
-
2291
2242
  /**
2292
2243
  * Add the correct font size in all browsers.
2293
2244
  */
@@ -2318,39 +2269,16 @@ sup {
2318
2269
  /* Embedded content
2319
2270
  ========================================================================== */
2320
2271
  /**
2321
- * Add the correct display in IE 9-.
2322
- */
2323
- audio,
2324
- video {
2325
- display: inline-block;
2326
- }
2327
-
2328
- /**
2329
- * Add the correct display in iOS 4-7.
2330
- */
2331
- audio:not([controls]) {
2332
- display: none;
2333
- height: 0;
2334
- }
2335
-
2336
- /**
2337
- * Remove the border on images inside links in IE 10-.
2272
+ * Remove the border on images inside links in IE 10.
2338
2273
  */
2339
2274
  img {
2340
2275
  border-style: none;
2341
2276
  }
2342
2277
 
2343
- /**
2344
- * Hide the overflow in IE.
2345
- */
2346
- svg:not(:root) {
2347
- overflow: hidden;
2348
- }
2349
-
2350
2278
  /* Forms
2351
2279
  ========================================================================== */
2352
2280
  /**
2353
- * 1. Change the font styles in all browsers (opinionated).
2281
+ * 1. Change the font styles in all browsers.
2354
2282
  * 2. Remove the margin in Firefox and Safari.
2355
2283
  */
2356
2284
  button,
@@ -2358,7 +2286,7 @@ input,
2358
2286
  optgroup,
2359
2287
  select,
2360
2288
  textarea {
2361
- font-family: sans-serif; /* 1 */
2289
+ font-family: inherit; /* 1 */
2362
2290
  font-size: 100%; /* 1 */
2363
2291
  line-height: 1.15; /* 1 */
2364
2292
  margin: 0; /* 2 */
@@ -2383,15 +2311,13 @@ select { /* 1 */
2383
2311
  }
2384
2312
 
2385
2313
  /**
2386
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
2387
- * controls in Android 4.
2388
- * 2. Correct the inability to style clickable types in iOS and Safari.
2314
+ * Correct the inability to style clickable types in iOS and Safari.
2389
2315
  */
2390
2316
  button,
2391
- html [type=button],
2317
+ [type=button],
2392
2318
  [type=reset],
2393
2319
  [type=submit] {
2394
- -webkit-appearance: button; /* 2 */
2320
+ -webkit-appearance: button;
2395
2321
  }
2396
2322
 
2397
2323
  /**
@@ -2439,24 +2365,22 @@ legend {
2439
2365
  }
2440
2366
 
2441
2367
  /**
2442
- * 1. Add the correct display in IE 9-.
2443
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
2368
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
2444
2369
  */
2445
2370
  progress {
2446
- display: inline-block; /* 1 */
2447
- vertical-align: baseline; /* 2 */
2371
+ vertical-align: baseline;
2448
2372
  }
2449
2373
 
2450
2374
  /**
2451
- * Remove the default vertical scrollbar in IE.
2375
+ * Remove the default vertical scrollbar in IE 10+.
2452
2376
  */
2453
2377
  textarea {
2454
2378
  overflow: auto;
2455
2379
  }
2456
2380
 
2457
2381
  /**
2458
- * 1. Add the correct box sizing in IE 10-.
2459
- * 2. Remove the padding in IE 10-.
2382
+ * 1. Add the correct box sizing in IE 10.
2383
+ * 2. Remove the padding in IE 10.
2460
2384
  */
2461
2385
  [type=checkbox],
2462
2386
  [type=radio] {
@@ -2483,9 +2407,8 @@ textarea {
2483
2407
  }
2484
2408
 
2485
2409
  /**
2486
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
2410
+ * Remove the inner padding in Chrome and Safari on macOS.
2487
2411
  */
2488
- [type=search]::-webkit-search-cancel-button,
2489
2412
  [type=search]::-webkit-search-decoration {
2490
2413
  -webkit-appearance: none;
2491
2414
  }
@@ -2502,11 +2425,9 @@ textarea {
2502
2425
  /* Interactive
2503
2426
  ========================================================================== */
2504
2427
  /*
2505
- * Add the correct display in IE 9-.
2506
- * 1. Add the correct display in Edge, IE, and Firefox.
2428
+ * Add the correct display in Edge, IE 10+, and Firefox.
2507
2429
  */
2508
- details,
2509
- menu {
2430
+ details {
2510
2431
  display: block;
2511
2432
  }
2512
2433
 
@@ -2517,26 +2438,17 @@ summary {
2517
2438
  display: list-item;
2518
2439
  }
2519
2440
 
2520
- /* Scripting
2441
+ /* Misc
2521
2442
  ========================================================================== */
2522
2443
  /**
2523
- * Add the correct display in IE 9-.
2524
- */
2525
- canvas {
2526
- display: inline-block;
2527
- }
2528
-
2529
- /**
2530
- * Add the correct display in IE.
2444
+ * Add the correct display in IE 10+.
2531
2445
  */
2532
2446
  template {
2533
2447
  display: none;
2534
2448
  }
2535
2449
 
2536
- /* Hidden
2537
- ========================================================================== */
2538
2450
  /**
2539
- * Add the correct display in IE 10-.
2451
+ * Add the correct display in IE 10.
2540
2452
  */
2541
2453
  [hidden] {
2542
2454
  display: none;
@@ -2560,14 +2472,6 @@ textarea {
2560
2472
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2561
2473
  }
2562
2474
 
2563
- ul:not(.browser-default) {
2564
- padding-left: 0;
2565
- list-style-type: none;
2566
- }
2567
- ul:not(.browser-default) > li {
2568
- list-style-type: none;
2569
- }
2570
-
2571
2475
  a {
2572
2476
  color: #039be5;
2573
2477
  text-decoration: none;
@@ -2600,7 +2504,7 @@ a {
2600
2504
  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);
2601
2505
  }
2602
2506
 
2603
- .z-depth-1-half, .btn-floating:hover, .btn:hover, .btn-small:hover, .btn-large:hover {
2507
+ .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 {
2604
2508
  -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);
2605
2509
  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);
2606
2510
  }
@@ -2643,13 +2547,13 @@ a {
2643
2547
  .divider {
2644
2548
  height: 1px;
2645
2549
  overflow: hidden;
2646
- background-color: #e0e0e0;
2550
+ background-color: var(--separator-color);
2647
2551
  }
2648
2552
 
2649
2553
  blockquote {
2650
2554
  margin: 20px 0;
2651
2555
  padding-left: 1.5rem;
2652
- border-left: 5px solid #ee6e73;
2556
+ border-left: 5px solid var(--primary-color);
2653
2557
  }
2654
2558
 
2655
2559
  i {
@@ -2690,21 +2594,24 @@ video.responsive-video {
2690
2594
  height: 30px;
2691
2595
  }
2692
2596
  .pagination li a {
2693
- color: #444;
2597
+ color: var(--font-color-medium);
2694
2598
  display: inline-block;
2695
2599
  font-size: 1.2rem;
2696
2600
  padding: 0 10px;
2697
2601
  line-height: 30px;
2698
2602
  }
2603
+ .pagination li:hover:not(.disabled) {
2604
+ background-color: var(--primary-color-hover-opaque);
2605
+ }
2699
2606
  .pagination li.active a {
2700
- color: #fff;
2607
+ color: var(--font-on-primary-color-main);
2701
2608
  }
2702
- .pagination li.active {
2703
- background-color: #ee6e73;
2609
+ .pagination li.active, .pagination li.active:hover {
2610
+ background-color: var(--primary-color);
2704
2611
  }
2705
2612
  .pagination li.disabled a {
2706
2613
  cursor: default;
2707
- color: #999;
2614
+ color: var(--font-color-disabled);
2708
2615
  }
2709
2616
  .pagination li i {
2710
2617
  font-size: 2rem;
@@ -2731,18 +2638,18 @@ video.responsive-video {
2731
2638
  .breadcrumb {
2732
2639
  display: inline-block;
2733
2640
  font-size: 18px;
2734
- color: rgba(255, 255, 255, 0.7);
2641
+ color: var(--font-on-primary-color-medium);
2735
2642
  }
2736
2643
  .breadcrumb i,
2737
2644
  .breadcrumb [class^=mdi-], .breadcrumb [class*=mdi-],
2738
2645
  .breadcrumb i.material-icons {
2739
- display: inline-block;
2646
+ display: block;
2740
2647
  float: left;
2741
2648
  font-size: 24px;
2742
2649
  }
2743
2650
  .breadcrumb:before {
2744
2651
  content: "\e5cc";
2745
- color: rgba(255, 255, 255, 0.7);
2652
+ color: var(--font-on-primary-color-medium);
2746
2653
  vertical-align: top;
2747
2654
  display: inline-block;
2748
2655
  font-family: "Material Icons";
@@ -2757,7 +2664,7 @@ video.responsive-video {
2757
2664
  display: none;
2758
2665
  }
2759
2666
  .breadcrumb:last-child {
2760
- color: #fff;
2667
+ color: var(--font-on-primary-color-main);
2761
2668
  }
2762
2669
 
2763
2670
  .parallax-container {
@@ -2890,10 +2797,14 @@ ul.staggered-list li {
2890
2797
 
2891
2798
  .page-footer {
2892
2799
  padding-top: 20px;
2893
- color: #fff;
2894
- background-color: #ee6e73;
2800
+ color: var(--font-on-primary-color-main);
2801
+ background-color: var(--primary-color);
2802
+ }
2803
+ .page-footer a {
2804
+ color: var(--font-on-primary-color-main);
2895
2805
  }
2896
- .page-footer .footer-copyright {
2806
+ .page-footer .footer-copyright,
2807
+ .page-footer .footer-copyright a {
2897
2808
  overflow: hidden;
2898
2809
  min-height: 50px;
2899
2810
  display: -webkit-box;
@@ -2909,8 +2820,8 @@ ul.staggered-list li {
2909
2820
  -ms-flex-pack: justify;
2910
2821
  justify-content: space-between;
2911
2822
  padding: 10px 0px;
2912
- color: rgba(255, 255, 255, 0.8);
2913
- background-color: rgba(51, 51, 51, 0.08);
2823
+ color: var(--font-on-primary-color-dark-medium);
2824
+ background-color: var(--primary-color-dark);
2914
2825
  }
2915
2826
 
2916
2827
  table, th, td {
@@ -2926,22 +2837,25 @@ table {
2926
2837
  table.striped tr {
2927
2838
  border-bottom: none;
2928
2839
  }
2929
- table.striped > tbody > tr:nth-child(odd) {
2930
- background-color: rgba(242, 242, 242, 0.5);
2840
+ table.striped tbody > tr:nth-child(odd) {
2841
+ background-color: var(--background-color-slight-emphasis);
2931
2842
  }
2932
2843
  table.highlight > tbody > tr {
2933
2844
  -webkit-transition: background-color 0.25s ease;
2934
2845
  transition: background-color 0.25s ease;
2935
2846
  }
2936
2847
  table.highlight > tbody > tr:hover {
2937
- background-color: rgba(242, 242, 242, 0.5);
2848
+ background-color: var(--hover-color);
2849
+ }
2850
+ table thead {
2851
+ color: var(--font-color-medium);
2938
2852
  }
2939
2853
  table.centered thead tr th, table.centered tbody tr td {
2940
2854
  text-align: center;
2941
2855
  }
2942
2856
 
2943
2857
  tr {
2944
- border-bottom: 1px solid rgba(0, 0, 0, 0.12);
2858
+ border-bottom: 1px solid var(--separator-color);
2945
2859
  }
2946
2860
 
2947
2861
  td, th {
@@ -3009,7 +2923,7 @@ table.responsive-table td {
3009
2923
  }
3010
2924
  table.responsive-table thead {
3011
2925
  border: 0;
3012
- border-right: 1px solid rgba(0, 0, 0, 0.12);
2926
+ border-right: 1px solid var(--separator-color);
3013
2927
  }
3014
2928
  }
3015
2929
  .video-container {
@@ -3031,7 +2945,7 @@ table.responsive-table td {
3031
2945
  height: 4px;
3032
2946
  display: block;
3033
2947
  width: 100%;
3034
- background-color: #acece6;
2948
+ background-color: rgba(var(--primary-color-numeric), 40%);
3035
2949
  border-radius: 2px;
3036
2950
  margin: 0.5rem 0 1rem 0;
3037
2951
  overflow: hidden;
@@ -3041,12 +2955,12 @@ table.responsive-table td {
3041
2955
  top: 0;
3042
2956
  left: 0;
3043
2957
  bottom: 0;
3044
- background-color: #26a69a;
2958
+ background-color: var(--primary-color);
3045
2959
  -webkit-transition: width 0.3s linear;
3046
2960
  transition: width 0.3s linear;
3047
2961
  }
3048
2962
  .progress .indeterminate {
3049
- background-color: #26a69a;
2963
+ background-color: var(--primary-color);
3050
2964
  }
3051
2965
  .progress .indeterminate:before {
3052
2966
  content: "";
@@ -3187,18 +3101,20 @@ input[type=range] + .thumb {
3187
3101
  }
3188
3102
 
3189
3103
  .collection {
3104
+ padding-left: 0;
3105
+ list-style-type: none;
3190
3106
  margin: 0.5rem 0 1rem 0;
3191
- border: 1px solid #e0e0e0;
3107
+ border: 1px solid var(--separator-color);
3192
3108
  border-radius: 2px;
3193
3109
  overflow: hidden;
3194
3110
  position: relative;
3195
3111
  }
3196
3112
  .collection .collection-item {
3197
- background-color: #fff;
3113
+ background-color: transparent;
3198
3114
  line-height: 1.5rem;
3199
3115
  padding: 10px 20px;
3200
3116
  margin: 0;
3201
- border-bottom: 1px solid #e0e0e0;
3117
+ border-bottom: 1px solid var(--separator-color);
3202
3118
  }
3203
3119
  .collection .collection-item.avatar {
3204
3120
  min-height: 84px;
@@ -3219,7 +3135,7 @@ input[type=range] + .thumb {
3219
3135
  font-size: 18px;
3220
3136
  line-height: 42px;
3221
3137
  color: #fff;
3222
- background-color: #999;
3138
+ background-color: var(--slider-track-color);
3223
3139
  text-align: center;
3224
3140
  }
3225
3141
  .collection .collection-item.avatar .title {
@@ -3237,24 +3153,24 @@ input[type=range] + .thumb {
3237
3153
  border-bottom: none;
3238
3154
  }
3239
3155
  .collection .collection-item.active {
3240
- background-color: #26a69a;
3241
- color: #eafaf9;
3156
+ background-color: var(--primary-color);
3157
+ color: var(--font-on-primary-color-main);
3242
3158
  }
3243
3159
  .collection .collection-item.active .secondary-content {
3244
- color: #fff;
3160
+ color: var(--font-on-primary-color-main);
3245
3161
  }
3246
3162
  .collection a.collection-item {
3247
3163
  display: block;
3248
3164
  -webkit-transition: 0.25s;
3249
3165
  transition: 0.25s;
3250
- color: #26a69a;
3166
+ color: var(--primary-color);
3251
3167
  }
3252
3168
  .collection a.collection-item:not(.active):hover {
3253
- background-color: #ddd;
3169
+ background-color: var(--hover-color);
3254
3170
  }
3255
3171
  .collection.with-header .collection-header {
3256
- background-color: #fff;
3257
- border-bottom: 1px solid #e0e0e0;
3172
+ background-color: transparent;
3173
+ border-bottom: 1px solid var(--separator-color);
3258
3174
  padding: 10px 20px;
3259
3175
  }
3260
3176
  .collection.with-header .collection-item {
@@ -3266,7 +3182,7 @@ input[type=range] + .thumb {
3266
3182
 
3267
3183
  .secondary-content {
3268
3184
  float: right;
3269
- color: #26a69a;
3185
+ color: var(--primary-color);
3270
3186
  }
3271
3187
 
3272
3188
  .collapsible .collection {
@@ -3282,7 +3198,7 @@ span.badge {
3282
3198
  font-size: 1rem;
3283
3199
  line-height: 22px;
3284
3200
  height: 22px;
3285
- color: #757575;
3201
+ color: var(--font-color-medium);
3286
3202
  float: right;
3287
3203
  -webkit-box-sizing: border-box;
3288
3204
  box-sizing: border-box;
@@ -3290,8 +3206,8 @@ span.badge {
3290
3206
  span.badge.new {
3291
3207
  font-weight: 300;
3292
3208
  font-size: 0.8rem;
3293
- color: #fff;
3294
- background-color: #26a69a;
3209
+ color: var(--font-on-primary-color-main);
3210
+ background-color: var(--primary-color);
3295
3211
  border-radius: 2px;
3296
3212
  }
3297
3213
  span.badge.new:after {
@@ -3301,6 +3217,10 @@ span.badge[data-badge-caption]::after {
3301
3217
  content: " " attr(data-badge-caption);
3302
3218
  }
3303
3219
 
3220
+ .active span.badge {
3221
+ color: var(--font-on-primary-color-main);
3222
+ }
3223
+
3304
3224
  nav ul a span.badge {
3305
3225
  display: inline-block;
3306
3226
  float: none;
@@ -3318,6 +3238,10 @@ nav ul a span.badge {
3318
3238
  margin-left: auto;
3319
3239
  }
3320
3240
 
3241
+ .collapsible .active span.badge:not(.new) {
3242
+ color: var(--font-color-medium);
3243
+ }
3244
+
3321
3245
  .sidenav span.badge {
3322
3246
  margin-top: calc(24px - 11px);
3323
3247
  }
@@ -3352,775 +3276,318 @@ table span.badge {
3352
3276
  width: 70%;
3353
3277
  }
3354
3278
  }
3279
+ /*
3355
3280
  .col .row {
3356
- margin-left: -0.75rem;
3357
- margin-right: -0.75rem;
3281
+ margin-left: (-1 * $gutter-width * 0.5);
3282
+ margin-right: (-1 * $gutter-width * 0.5);
3358
3283
  }
3359
-
3284
+ */
3360
3285
  .section {
3361
3286
  padding-top: 1rem;
3362
3287
  padding-bottom: 1rem;
3363
- }
3364
- .section.no-pad {
3365
- padding: 0;
3366
- }
3367
- .section.no-pad-bot {
3368
- padding-bottom: 0;
3369
- }
3370
- .section.no-pad-top {
3371
- padding-top: 0;
3288
+ /*
3289
+ &.no-pad {
3290
+ padding: 0;
3291
+ }
3292
+ &.no-pad-bot {
3293
+ padding-bottom: 0;
3294
+ }
3295
+ &.no-pad-top {
3296
+ padding-top: 0;
3297
+ }
3298
+ */
3372
3299
  }
3373
3300
 
3374
3301
  .row {
3375
- margin-left: auto;
3376
- margin-right: auto;
3377
- margin-bottom: 20px;
3378
- }
3379
- .row:after {
3380
- content: "";
3381
- display: table;
3382
- clear: both;
3383
- }
3384
- .row .col {
3385
- float: left;
3386
- -webkit-box-sizing: border-box;
3387
- box-sizing: border-box;
3388
- padding: 0 0.75rem;
3389
- min-height: 1px;
3390
- }
3391
- .row .col[class*=push-], .row .col[class*=pull-] {
3392
- position: relative;
3393
- }
3394
- .row .col.s1 {
3395
- width: 8.3333333333%;
3396
- margin-left: auto;
3397
- left: auto;
3398
- right: auto;
3399
- }
3400
- .row .col.s2 {
3401
- width: 16.6666666667%;
3402
- margin-left: auto;
3403
- left: auto;
3404
- right: auto;
3405
- }
3406
- .row .col.s3 {
3407
- width: 25%;
3408
- margin-left: auto;
3409
- left: auto;
3410
- right: auto;
3411
- }
3412
- .row .col.s4 {
3413
- width: 33.3333333333%;
3414
- margin-left: auto;
3415
- left: auto;
3416
- right: auto;
3417
- }
3418
- .row .col.s5 {
3419
- width: 41.6666666667%;
3420
- margin-left: auto;
3421
- left: auto;
3422
- right: auto;
3423
- }
3424
- .row .col.s6 {
3425
- width: 50%;
3426
- margin-left: auto;
3427
- left: auto;
3428
- right: auto;
3429
- }
3430
- .row .col.s7 {
3431
- width: 58.3333333333%;
3432
- margin-left: auto;
3433
- left: auto;
3434
- right: auto;
3302
+ display: grid;
3303
+ grid-template-columns: repeat(12, 1fr);
3435
3304
  }
3436
- .row .col.s8 {
3437
- width: 66.6666666667%;
3438
- margin-left: auto;
3439
- left: auto;
3440
- right: auto;
3441
- }
3442
- .row .col.s9 {
3443
- width: 75%;
3444
- margin-left: auto;
3445
- left: auto;
3446
- right: auto;
3447
- }
3448
- .row .col.s10 {
3449
- width: 83.3333333333%;
3450
- margin-left: auto;
3451
- left: auto;
3452
- right: auto;
3453
- }
3454
- .row .col.s11 {
3455
- width: 91.6666666667%;
3456
- margin-left: auto;
3457
- left: auto;
3458
- right: auto;
3459
- }
3460
- .row .col.s12 {
3461
- width: 100%;
3462
- margin-left: auto;
3463
- left: auto;
3464
- right: auto;
3465
- }
3466
- .row .col.offset-s1 {
3467
- margin-left: 8.3333333333%;
3468
- }
3469
- .row .col.pull-s1 {
3470
- right: 8.3333333333%;
3471
- }
3472
- .row .col.push-s1 {
3473
- left: 8.3333333333%;
3474
- }
3475
- .row .col.offset-s2 {
3476
- margin-left: 16.6666666667%;
3305
+ .row .s1 {
3306
+ grid-column: auto/span 1;
3477
3307
  }
3478
- .row .col.pull-s2 {
3479
- right: 16.6666666667%;
3308
+ .row .s2 {
3309
+ grid-column: auto/span 2;
3480
3310
  }
3481
- .row .col.push-s2 {
3482
- left: 16.6666666667%;
3311
+ .row .s3 {
3312
+ grid-column: auto/span 3;
3483
3313
  }
3484
- .row .col.offset-s3 {
3485
- margin-left: 25%;
3314
+ .row .s4 {
3315
+ grid-column: auto/span 4;
3486
3316
  }
3487
- .row .col.pull-s3 {
3488
- right: 25%;
3317
+ .row .s5 {
3318
+ grid-column: auto/span 5;
3489
3319
  }
3490
- .row .col.push-s3 {
3491
- left: 25%;
3320
+ .row .s6 {
3321
+ grid-column: auto/span 6;
3492
3322
  }
3493
- .row .col.offset-s4 {
3494
- margin-left: 33.3333333333%;
3323
+ .row .s7 {
3324
+ grid-column: auto/span 7;
3495
3325
  }
3496
- .row .col.pull-s4 {
3497
- right: 33.3333333333%;
3498
- }
3499
- .row .col.push-s4 {
3500
- left: 33.3333333333%;
3501
- }
3502
- .row .col.offset-s5 {
3503
- margin-left: 41.6666666667%;
3504
- }
3505
- .row .col.pull-s5 {
3506
- right: 41.6666666667%;
3507
- }
3508
- .row .col.push-s5 {
3509
- left: 41.6666666667%;
3510
- }
3511
- .row .col.offset-s6 {
3512
- margin-left: 50%;
3513
- }
3514
- .row .col.pull-s6 {
3515
- right: 50%;
3516
- }
3517
- .row .col.push-s6 {
3518
- left: 50%;
3326
+ .row .s8 {
3327
+ grid-column: auto/span 8;
3519
3328
  }
3520
- .row .col.offset-s7 {
3521
- margin-left: 58.3333333333%;
3329
+ .row .s9 {
3330
+ grid-column: auto/span 9;
3522
3331
  }
3523
- .row .col.pull-s7 {
3524
- right: 58.3333333333%;
3332
+ .row .s10 {
3333
+ grid-column: auto/span 10;
3525
3334
  }
3526
- .row .col.push-s7 {
3527
- left: 58.3333333333%;
3335
+ .row .s11 {
3336
+ grid-column: auto/span 11;
3528
3337
  }
3529
- .row .col.offset-s8 {
3530
- margin-left: 66.6666666667%;
3338
+ .row .s12 {
3339
+ grid-column: auto/span 12;
3531
3340
  }
3532
- .row .col.pull-s8 {
3533
- right: 66.6666666667%;
3341
+ .row .offset-s1 {
3342
+ grid-column-start: 2;
3534
3343
  }
3535
- .row .col.push-s8 {
3536
- left: 66.6666666667%;
3344
+ .row .offset-s2 {
3345
+ grid-column-start: 3;
3537
3346
  }
3538
- .row .col.offset-s9 {
3539
- margin-left: 75%;
3347
+ .row .offset-s3 {
3348
+ grid-column-start: 4;
3540
3349
  }
3541
- .row .col.pull-s9 {
3542
- right: 75%;
3350
+ .row .offset-s4 {
3351
+ grid-column-start: 5;
3543
3352
  }
3544
- .row .col.push-s9 {
3545
- left: 75%;
3353
+ .row .offset-s5 {
3354
+ grid-column-start: 6;
3546
3355
  }
3547
- .row .col.offset-s10 {
3548
- margin-left: 83.3333333333%;
3356
+ .row .offset-s6 {
3357
+ grid-column-start: 7;
3549
3358
  }
3550
- .row .col.pull-s10 {
3551
- right: 83.3333333333%;
3359
+ .row .offset-s7 {
3360
+ grid-column-start: 8;
3552
3361
  }
3553
- .row .col.push-s10 {
3554
- left: 83.3333333333%;
3362
+ .row .offset-s8 {
3363
+ grid-column-start: 9;
3555
3364
  }
3556
- .row .col.offset-s11 {
3557
- margin-left: 91.6666666667%;
3365
+ .row .offset-s9 {
3366
+ grid-column-start: 10;
3558
3367
  }
3559
- .row .col.pull-s11 {
3560
- right: 91.6666666667%;
3368
+ .row .offset-s10 {
3369
+ grid-column-start: 11;
3561
3370
  }
3562
- .row .col.push-s11 {
3563
- left: 91.6666666667%;
3564
- }
3565
- .row .col.offset-s12 {
3566
- margin-left: 100%;
3567
- }
3568
- .row .col.pull-s12 {
3569
- right: 100%;
3570
- }
3571
- .row .col.push-s12 {
3572
- left: 100%;
3371
+ .row .offset-s11 {
3372
+ grid-column-start: 12;
3573
3373
  }
3574
3374
  @media only screen and (min-width : 601px) {
3575
- .row .col.m1 {
3576
- width: 8.3333333333%;
3577
- margin-left: auto;
3578
- left: auto;
3579
- right: auto;
3375
+ .row .m1 {
3376
+ grid-column: auto/span 1;
3580
3377
  }
3581
- .row .col.m2 {
3582
- width: 16.6666666667%;
3583
- margin-left: auto;
3584
- left: auto;
3585
- right: auto;
3378
+ .row .m2 {
3379
+ grid-column: auto/span 2;
3586
3380
  }
3587
- .row .col.m3 {
3588
- width: 25%;
3589
- margin-left: auto;
3590
- left: auto;
3591
- right: auto;
3381
+ .row .m3 {
3382
+ grid-column: auto/span 3;
3592
3383
  }
3593
- .row .col.m4 {
3594
- width: 33.3333333333%;
3595
- margin-left: auto;
3596
- left: auto;
3597
- right: auto;
3384
+ .row .m4 {
3385
+ grid-column: auto/span 4;
3598
3386
  }
3599
- .row .col.m5 {
3600
- width: 41.6666666667%;
3601
- margin-left: auto;
3602
- left: auto;
3603
- right: auto;
3387
+ .row .m5 {
3388
+ grid-column: auto/span 5;
3604
3389
  }
3605
- .row .col.m6 {
3606
- width: 50%;
3607
- margin-left: auto;
3608
- left: auto;
3609
- right: auto;
3390
+ .row .m6 {
3391
+ grid-column: auto/span 6;
3610
3392
  }
3611
- .row .col.m7 {
3612
- width: 58.3333333333%;
3613
- margin-left: auto;
3614
- left: auto;
3615
- right: auto;
3616
- }
3617
- .row .col.m8 {
3618
- width: 66.6666666667%;
3619
- margin-left: auto;
3620
- left: auto;
3621
- right: auto;
3393
+ .row .m7 {
3394
+ grid-column: auto/span 7;
3622
3395
  }
3623
- .row .col.m9 {
3624
- width: 75%;
3625
- margin-left: auto;
3626
- left: auto;
3627
- right: auto;
3396
+ .row .m8 {
3397
+ grid-column: auto/span 8;
3628
3398
  }
3629
- .row .col.m10 {
3630
- width: 83.3333333333%;
3631
- margin-left: auto;
3632
- left: auto;
3633
- right: auto;
3634
- }
3635
- .row .col.m11 {
3636
- width: 91.6666666667%;
3637
- margin-left: auto;
3638
- left: auto;
3639
- right: auto;
3640
- }
3641
- .row .col.m12 {
3642
- width: 100%;
3643
- margin-left: auto;
3644
- left: auto;
3645
- right: auto;
3399
+ .row .m9 {
3400
+ grid-column: auto/span 9;
3646
3401
  }
3647
- .row .col.offset-m1 {
3648
- margin-left: 8.3333333333%;
3402
+ .row .m10 {
3403
+ grid-column: auto/span 10;
3649
3404
  }
3650
- .row .col.pull-m1 {
3651
- right: 8.3333333333%;
3405
+ .row .m11 {
3406
+ grid-column: auto/span 11;
3652
3407
  }
3653
- .row .col.push-m1 {
3654
- left: 8.3333333333%;
3408
+ .row .m12 {
3409
+ grid-column: auto/span 12;
3655
3410
  }
3656
- .row .col.offset-m2 {
3657
- margin-left: 16.6666666667%;
3411
+ .row .offset-m1 {
3412
+ grid-column-start: 2;
3658
3413
  }
3659
- .row .col.pull-m2 {
3660
- right: 16.6666666667%;
3414
+ .row .offset-m2 {
3415
+ grid-column-start: 3;
3661
3416
  }
3662
- .row .col.push-m2 {
3663
- left: 16.6666666667%;
3417
+ .row .offset-m3 {
3418
+ grid-column-start: 4;
3664
3419
  }
3665
- .row .col.offset-m3 {
3666
- margin-left: 25%;
3420
+ .row .offset-m4 {
3421
+ grid-column-start: 5;
3667
3422
  }
3668
- .row .col.pull-m3 {
3669
- right: 25%;
3423
+ .row .offset-m5 {
3424
+ grid-column-start: 6;
3670
3425
  }
3671
- .row .col.push-m3 {
3672
- left: 25%;
3426
+ .row .offset-m6 {
3427
+ grid-column-start: 7;
3673
3428
  }
3674
- .row .col.offset-m4 {
3675
- margin-left: 33.3333333333%;
3429
+ .row .offset-m7 {
3430
+ grid-column-start: 8;
3676
3431
  }
3677
- .row .col.pull-m4 {
3678
- right: 33.3333333333%;
3432
+ .row .offset-m8 {
3433
+ grid-column-start: 9;
3679
3434
  }
3680
- .row .col.push-m4 {
3681
- left: 33.3333333333%;
3435
+ .row .offset-m9 {
3436
+ grid-column-start: 10;
3682
3437
  }
3683
- .row .col.offset-m5 {
3684
- margin-left: 41.6666666667%;
3438
+ .row .offset-m10 {
3439
+ grid-column-start: 11;
3685
3440
  }
3686
- .row .col.pull-m5 {
3687
- right: 41.6666666667%;
3688
- }
3689
- .row .col.push-m5 {
3690
- left: 41.6666666667%;
3691
- }
3692
- .row .col.offset-m6 {
3693
- margin-left: 50%;
3694
- }
3695
- .row .col.pull-m6 {
3696
- right: 50%;
3697
- }
3698
- .row .col.push-m6 {
3699
- left: 50%;
3700
- }
3701
- .row .col.offset-m7 {
3702
- margin-left: 58.3333333333%;
3703
- }
3704
- .row .col.pull-m7 {
3705
- right: 58.3333333333%;
3706
- }
3707
- .row .col.push-m7 {
3708
- left: 58.3333333333%;
3709
- }
3710
- .row .col.offset-m8 {
3711
- margin-left: 66.6666666667%;
3712
- }
3713
- .row .col.pull-m8 {
3714
- right: 66.6666666667%;
3715
- }
3716
- .row .col.push-m8 {
3717
- left: 66.6666666667%;
3718
- }
3719
- .row .col.offset-m9 {
3720
- margin-left: 75%;
3721
- }
3722
- .row .col.pull-m9 {
3723
- right: 75%;
3724
- }
3725
- .row .col.push-m9 {
3726
- left: 75%;
3727
- }
3728
- .row .col.offset-m10 {
3729
- margin-left: 83.3333333333%;
3730
- }
3731
- .row .col.pull-m10 {
3732
- right: 83.3333333333%;
3733
- }
3734
- .row .col.push-m10 {
3735
- left: 83.3333333333%;
3736
- }
3737
- .row .col.offset-m11 {
3738
- margin-left: 91.6666666667%;
3739
- }
3740
- .row .col.pull-m11 {
3741
- right: 91.6666666667%;
3742
- }
3743
- .row .col.push-m11 {
3744
- left: 91.6666666667%;
3745
- }
3746
- .row .col.offset-m12 {
3747
- margin-left: 100%;
3748
- }
3749
- .row .col.pull-m12 {
3750
- right: 100%;
3751
- }
3752
- .row .col.push-m12 {
3753
- left: 100%;
3441
+ .row .offset-m11 {
3442
+ grid-column-start: 12;
3754
3443
  }
3755
3444
  }
3756
3445
  @media only screen and (min-width : 993px) {
3757
- .row .col.l1 {
3758
- width: 8.3333333333%;
3759
- margin-left: auto;
3760
- left: auto;
3761
- right: auto;
3762
- }
3763
- .row .col.l2 {
3764
- width: 16.6666666667%;
3765
- margin-left: auto;
3766
- left: auto;
3767
- right: auto;
3768
- }
3769
- .row .col.l3 {
3770
- width: 25%;
3771
- margin-left: auto;
3772
- left: auto;
3773
- right: auto;
3774
- }
3775
- .row .col.l4 {
3776
- width: 33.3333333333%;
3777
- margin-left: auto;
3778
- left: auto;
3779
- right: auto;
3780
- }
3781
- .row .col.l5 {
3782
- width: 41.6666666667%;
3783
- margin-left: auto;
3784
- left: auto;
3785
- right: auto;
3786
- }
3787
- .row .col.l6 {
3788
- width: 50%;
3789
- margin-left: auto;
3790
- left: auto;
3791
- right: auto;
3792
- }
3793
- .row .col.l7 {
3794
- width: 58.3333333333%;
3795
- margin-left: auto;
3796
- left: auto;
3797
- right: auto;
3798
- }
3799
- .row .col.l8 {
3800
- width: 66.6666666667%;
3801
- margin-left: auto;
3802
- left: auto;
3803
- right: auto;
3804
- }
3805
- .row .col.l9 {
3806
- width: 75%;
3807
- margin-left: auto;
3808
- left: auto;
3809
- right: auto;
3810
- }
3811
- .row .col.l10 {
3812
- width: 83.3333333333%;
3813
- margin-left: auto;
3814
- left: auto;
3815
- right: auto;
3816
- }
3817
- .row .col.l11 {
3818
- width: 91.6666666667%;
3819
- margin-left: auto;
3820
- left: auto;
3821
- right: auto;
3822
- }
3823
- .row .col.l12 {
3824
- width: 100%;
3825
- margin-left: auto;
3826
- left: auto;
3827
- right: auto;
3828
- }
3829
- .row .col.offset-l1 {
3830
- margin-left: 8.3333333333%;
3446
+ .row .l1 {
3447
+ grid-column: auto/span 1;
3831
3448
  }
3832
- .row .col.pull-l1 {
3833
- right: 8.3333333333%;
3449
+ .row .l2 {
3450
+ grid-column: auto/span 2;
3834
3451
  }
3835
- .row .col.push-l1 {
3836
- left: 8.3333333333%;
3452
+ .row .l3 {
3453
+ grid-column: auto/span 3;
3837
3454
  }
3838
- .row .col.offset-l2 {
3839
- margin-left: 16.6666666667%;
3455
+ .row .l4 {
3456
+ grid-column: auto/span 4;
3840
3457
  }
3841
- .row .col.pull-l2 {
3842
- right: 16.6666666667%;
3458
+ .row .l5 {
3459
+ grid-column: auto/span 5;
3843
3460
  }
3844
- .row .col.push-l2 {
3845
- left: 16.6666666667%;
3461
+ .row .l6 {
3462
+ grid-column: auto/span 6;
3846
3463
  }
3847
- .row .col.offset-l3 {
3848
- margin-left: 25%;
3464
+ .row .l7 {
3465
+ grid-column: auto/span 7;
3849
3466
  }
3850
- .row .col.pull-l3 {
3851
- right: 25%;
3467
+ .row .l8 {
3468
+ grid-column: auto/span 8;
3852
3469
  }
3853
- .row .col.push-l3 {
3854
- left: 25%;
3470
+ .row .l9 {
3471
+ grid-column: auto/span 9;
3855
3472
  }
3856
- .row .col.offset-l4 {
3857
- margin-left: 33.3333333333%;
3473
+ .row .l10 {
3474
+ grid-column: auto/span 10;
3858
3475
  }
3859
- .row .col.pull-l4 {
3860
- right: 33.3333333333%;
3476
+ .row .l11 {
3477
+ grid-column: auto/span 11;
3861
3478
  }
3862
- .row .col.push-l4 {
3863
- left: 33.3333333333%;
3479
+ .row .l12 {
3480
+ grid-column: auto/span 12;
3864
3481
  }
3865
- .row .col.offset-l5 {
3866
- margin-left: 41.6666666667%;
3482
+ .row .offset-l1 {
3483
+ grid-column-start: 2;
3867
3484
  }
3868
- .row .col.pull-l5 {
3869
- right: 41.6666666667%;
3485
+ .row .offset-l2 {
3486
+ grid-column-start: 3;
3870
3487
  }
3871
- .row .col.push-l5 {
3872
- left: 41.6666666667%;
3488
+ .row .offset-l3 {
3489
+ grid-column-start: 4;
3873
3490
  }
3874
- .row .col.offset-l6 {
3875
- margin-left: 50%;
3491
+ .row .offset-l4 {
3492
+ grid-column-start: 5;
3876
3493
  }
3877
- .row .col.pull-l6 {
3878
- right: 50%;
3494
+ .row .offset-l5 {
3495
+ grid-column-start: 6;
3879
3496
  }
3880
- .row .col.push-l6 {
3881
- left: 50%;
3882
- }
3883
- .row .col.offset-l7 {
3884
- margin-left: 58.3333333333%;
3885
- }
3886
- .row .col.pull-l7 {
3887
- right: 58.3333333333%;
3888
- }
3889
- .row .col.push-l7 {
3890
- left: 58.3333333333%;
3891
- }
3892
- .row .col.offset-l8 {
3893
- margin-left: 66.6666666667%;
3894
- }
3895
- .row .col.pull-l8 {
3896
- right: 66.6666666667%;
3897
- }
3898
- .row .col.push-l8 {
3899
- left: 66.6666666667%;
3900
- }
3901
- .row .col.offset-l9 {
3902
- margin-left: 75%;
3497
+ .row .offset-l6 {
3498
+ grid-column-start: 7;
3903
3499
  }
3904
- .row .col.pull-l9 {
3905
- right: 75%;
3500
+ .row .offset-l7 {
3501
+ grid-column-start: 8;
3906
3502
  }
3907
- .row .col.push-l9 {
3908
- left: 75%;
3503
+ .row .offset-l8 {
3504
+ grid-column-start: 9;
3909
3505
  }
3910
- .row .col.offset-l10 {
3911
- margin-left: 83.3333333333%;
3506
+ .row .offset-l9 {
3507
+ grid-column-start: 10;
3912
3508
  }
3913
- .row .col.pull-l10 {
3914
- right: 83.3333333333%;
3509
+ .row .offset-l10 {
3510
+ grid-column-start: 11;
3915
3511
  }
3916
- .row .col.push-l10 {
3917
- left: 83.3333333333%;
3918
- }
3919
- .row .col.offset-l11 {
3920
- margin-left: 91.6666666667%;
3921
- }
3922
- .row .col.pull-l11 {
3923
- right: 91.6666666667%;
3924
- }
3925
- .row .col.push-l11 {
3926
- left: 91.6666666667%;
3927
- }
3928
- .row .col.offset-l12 {
3929
- margin-left: 100%;
3930
- }
3931
- .row .col.pull-l12 {
3932
- right: 100%;
3933
- }
3934
- .row .col.push-l12 {
3935
- left: 100%;
3512
+ .row .offset-l11 {
3513
+ grid-column-start: 12;
3936
3514
  }
3937
3515
  }
3938
3516
  @media only screen and (min-width : 1201px) {
3939
- .row .col.xl1 {
3940
- width: 8.3333333333%;
3941
- margin-left: auto;
3942
- left: auto;
3943
- right: auto;
3517
+ .row .xl1 {
3518
+ grid-column: auto/span 1;
3944
3519
  }
3945
- .row .col.xl2 {
3946
- width: 16.6666666667%;
3947
- margin-left: auto;
3948
- left: auto;
3949
- right: auto;
3520
+ .row .xl2 {
3521
+ grid-column: auto/span 2;
3950
3522
  }
3951
- .row .col.xl3 {
3952
- width: 25%;
3953
- margin-left: auto;
3954
- left: auto;
3955
- right: auto;
3523
+ .row .xl3 {
3524
+ grid-column: auto/span 3;
3956
3525
  }
3957
- .row .col.xl4 {
3958
- width: 33.3333333333%;
3959
- margin-left: auto;
3960
- left: auto;
3961
- right: auto;
3526
+ .row .xl4 {
3527
+ grid-column: auto/span 4;
3962
3528
  }
3963
- .row .col.xl5 {
3964
- width: 41.6666666667%;
3965
- margin-left: auto;
3966
- left: auto;
3967
- right: auto;
3529
+ .row .xl5 {
3530
+ grid-column: auto/span 5;
3968
3531
  }
3969
- .row .col.xl6 {
3970
- width: 50%;
3971
- margin-left: auto;
3972
- left: auto;
3973
- right: auto;
3532
+ .row .xl6 {
3533
+ grid-column: auto/span 6;
3974
3534
  }
3975
- .row .col.xl7 {
3976
- width: 58.3333333333%;
3977
- margin-left: auto;
3978
- left: auto;
3979
- right: auto;
3535
+ .row .xl7 {
3536
+ grid-column: auto/span 7;
3980
3537
  }
3981
- .row .col.xl8 {
3982
- width: 66.6666666667%;
3983
- margin-left: auto;
3984
- left: auto;
3985
- right: auto;
3538
+ .row .xl8 {
3539
+ grid-column: auto/span 8;
3986
3540
  }
3987
- .row .col.xl9 {
3988
- width: 75%;
3989
- margin-left: auto;
3990
- left: auto;
3991
- right: auto;
3992
- }
3993
- .row .col.xl10 {
3994
- width: 83.3333333333%;
3995
- margin-left: auto;
3996
- left: auto;
3997
- right: auto;
3998
- }
3999
- .row .col.xl11 {
4000
- width: 91.6666666667%;
4001
- margin-left: auto;
4002
- left: auto;
4003
- right: auto;
4004
- }
4005
- .row .col.xl12 {
4006
- width: 100%;
4007
- margin-left: auto;
4008
- left: auto;
4009
- right: auto;
4010
- }
4011
- .row .col.offset-xl1 {
4012
- margin-left: 8.3333333333%;
4013
- }
4014
- .row .col.pull-xl1 {
4015
- right: 8.3333333333%;
4016
- }
4017
- .row .col.push-xl1 {
4018
- left: 8.3333333333%;
4019
- }
4020
- .row .col.offset-xl2 {
4021
- margin-left: 16.6666666667%;
4022
- }
4023
- .row .col.pull-xl2 {
4024
- right: 16.6666666667%;
4025
- }
4026
- .row .col.push-xl2 {
4027
- left: 16.6666666667%;
4028
- }
4029
- .row .col.offset-xl3 {
4030
- margin-left: 25%;
4031
- }
4032
- .row .col.pull-xl3 {
4033
- right: 25%;
4034
- }
4035
- .row .col.push-xl3 {
4036
- left: 25%;
4037
- }
4038
- .row .col.offset-xl4 {
4039
- margin-left: 33.3333333333%;
4040
- }
4041
- .row .col.pull-xl4 {
4042
- right: 33.3333333333%;
4043
- }
4044
- .row .col.push-xl4 {
4045
- left: 33.3333333333%;
4046
- }
4047
- .row .col.offset-xl5 {
4048
- margin-left: 41.6666666667%;
4049
- }
4050
- .row .col.pull-xl5 {
4051
- right: 41.6666666667%;
4052
- }
4053
- .row .col.push-xl5 {
4054
- left: 41.6666666667%;
4055
- }
4056
- .row .col.offset-xl6 {
4057
- margin-left: 50%;
4058
- }
4059
- .row .col.pull-xl6 {
4060
- right: 50%;
4061
- }
4062
- .row .col.push-xl6 {
4063
- left: 50%;
3541
+ .row .xl9 {
3542
+ grid-column: auto/span 9;
4064
3543
  }
4065
- .row .col.offset-xl7 {
4066
- margin-left: 58.3333333333%;
3544
+ .row .xl10 {
3545
+ grid-column: auto/span 10;
4067
3546
  }
4068
- .row .col.pull-xl7 {
4069
- right: 58.3333333333%;
3547
+ .row .xl11 {
3548
+ grid-column: auto/span 11;
4070
3549
  }
4071
- .row .col.push-xl7 {
4072
- left: 58.3333333333%;
3550
+ .row .xl12 {
3551
+ grid-column: auto/span 12;
4073
3552
  }
4074
- .row .col.offset-xl8 {
4075
- margin-left: 66.6666666667%;
3553
+ .row .offset-xl1 {
3554
+ grid-column-start: 2;
4076
3555
  }
4077
- .row .col.pull-xl8 {
4078
- right: 66.6666666667%;
3556
+ .row .offset-xl2 {
3557
+ grid-column-start: 3;
4079
3558
  }
4080
- .row .col.push-xl8 {
4081
- left: 66.6666666667%;
3559
+ .row .offset-xl3 {
3560
+ grid-column-start: 4;
4082
3561
  }
4083
- .row .col.offset-xl9 {
4084
- margin-left: 75%;
3562
+ .row .offset-xl4 {
3563
+ grid-column-start: 5;
4085
3564
  }
4086
- .row .col.pull-xl9 {
4087
- right: 75%;
3565
+ .row .offset-xl5 {
3566
+ grid-column-start: 6;
4088
3567
  }
4089
- .row .col.push-xl9 {
4090
- left: 75%;
3568
+ .row .offset-xl6 {
3569
+ grid-column-start: 7;
4091
3570
  }
4092
- .row .col.offset-xl10 {
4093
- margin-left: 83.3333333333%;
3571
+ .row .offset-xl7 {
3572
+ grid-column-start: 8;
4094
3573
  }
4095
- .row .col.pull-xl10 {
4096
- right: 83.3333333333%;
3574
+ .row .offset-xl8 {
3575
+ grid-column-start: 9;
4097
3576
  }
4098
- .row .col.push-xl10 {
4099
- left: 83.3333333333%;
3577
+ .row .offset-xl9 {
3578
+ grid-column-start: 10;
4100
3579
  }
4101
- .row .col.offset-xl11 {
4102
- margin-left: 91.6666666667%;
3580
+ .row .offset-xl10 {
3581
+ grid-column-start: 11;
4103
3582
  }
4104
- .row .col.pull-xl11 {
4105
- right: 91.6666666667%;
4106
- }
4107
- .row .col.push-xl11 {
4108
- left: 91.6666666667%;
4109
- }
4110
- .row .col.offset-xl12 {
4111
- margin-left: 100%;
4112
- }
4113
- .row .col.pull-xl12 {
4114
- right: 100%;
4115
- }
4116
- .row .col.push-xl12 {
4117
- left: 100%;
3583
+ .row .offset-xl11 {
3584
+ grid-column-start: 12;
4118
3585
  }
4119
3586
  }
4120
3587
 
4121
3588
  nav {
4122
- color: #fff;
4123
- background-color: #ee6e73;
3589
+ color: var(--font-on-primary-color-main);
3590
+ background-color: var(--primary-color);
4124
3591
  width: 100%;
4125
3592
  height: 56px;
4126
3593
  line-height: 56px;
@@ -4137,7 +3604,7 @@ nav.nav-extended .nav-content {
4137
3604
  line-height: normal;
4138
3605
  }
4139
3606
  nav a {
4140
- color: #fff;
3607
+ color: var(--font-on-primary-color-main);
4141
3608
  }
4142
3609
  nav i,
4143
3610
  nav [class^=mdi-], nav [class*=mdi-],
@@ -4169,7 +3636,7 @@ nav .sidenav-trigger i {
4169
3636
  }
4170
3637
  nav .brand-logo {
4171
3638
  position: absolute;
4172
- color: #fff;
3639
+ color: var(--font-on-primary-color-main);
4173
3640
  display: inline-block;
4174
3641
  font-size: 2.1rem;
4175
3642
  padding: 0;
@@ -4213,40 +3680,42 @@ nav .nav-title {
4213
3680
  font-size: 32px;
4214
3681
  padding: 28px 0;
4215
3682
  }
4216
- nav ul {
3683
+ nav ul:not(.dropdown-content) {
3684
+ list-style-type: none;
4217
3685
  margin: 0;
4218
3686
  }
4219
- nav ul li {
3687
+ nav ul:not(.dropdown-content) li {
4220
3688
  -webkit-transition: background-color 0.3s;
4221
3689
  transition: background-color 0.3s;
4222
3690
  float: left;
4223
3691
  padding: 0;
4224
3692
  }
4225
- nav ul li.active {
4226
- background-color: rgba(0, 0, 0, 0.1);
4227
- }
4228
- nav ul a {
3693
+ nav ul:not(.dropdown-content) a {
4229
3694
  -webkit-transition: background-color 0.3s;
4230
3695
  transition: background-color 0.3s;
4231
3696
  font-size: 1rem;
4232
- color: #fff;
3697
+ color: var(--font-on-primary-color-main);
4233
3698
  display: block;
4234
3699
  padding: 0 15px;
4235
3700
  cursor: pointer;
4236
3701
  }
4237
- nav ul a.btn, nav ul a.btn-small, nav ul a.btn-large, nav ul a.btn-flat, nav ul a.btn-floating {
3702
+ nav ul:not(.dropdown-content) a.active {
3703
+ background-color: var(--primary-color-raised-focus-solid);
3704
+ }
3705
+ nav ul:not(.dropdown-content) a:hover:not(.active) {
3706
+ background-color: var(--primary-color-raised-hover-solid);
3707
+ }
3708
+ nav ul:not(.dropdown-content) a.btn, nav ul:not(.dropdown-content) a.btn-small, nav ul:not(.dropdown-content) a.btn-large, nav ul:not(.dropdown-content) a.btn-flat, nav ul:not(.dropdown-content) a.btn-floating {
4238
3709
  margin-top: -2px;
4239
3710
  margin-left: 15px;
4240
3711
  margin-right: 15px;
3712
+ display: inline-block;
4241
3713
  }
4242
- nav ul a.btn > .material-icons, nav ul a.btn-small > .material-icons, nav ul a.btn-large > .material-icons, nav ul a.btn-flat > .material-icons, nav ul a.btn-floating > .material-icons {
3714
+ nav ul:not(.dropdown-content) a.btn > .material-icons, nav ul:not(.dropdown-content) a.btn-small > .material-icons, nav ul:not(.dropdown-content) a.btn-large > .material-icons, nav ul:not(.dropdown-content) a.btn-flat > .material-icons, nav ul:not(.dropdown-content) a.btn-floating > .material-icons {
4243
3715
  height: inherit;
4244
3716
  line-height: inherit;
4245
3717
  }
4246
- nav ul a:hover {
4247
- background-color: rgba(0, 0, 0, 0.1);
4248
- }
4249
- nav ul.left {
3718
+ nav ul:not(.dropdown-content).left {
4250
3719
  float: left;
4251
3720
  }
4252
3721
  nav form {
@@ -4256,13 +3725,14 @@ nav .input-field {
4256
3725
  margin: 0;
4257
3726
  height: 100%;
4258
3727
  }
4259
- nav .input-field input {
3728
+ nav .input-field input[type=search] {
4260
3729
  height: 100%;
4261
3730
  font-size: 1.2rem;
4262
3731
  border: none;
4263
3732
  padding-left: 2rem;
3733
+ color: #888;
4264
3734
  }
4265
- nav .input-field input:focus, nav .input-field input[type=text]:valid, nav .input-field input[type=password]:valid, nav .input-field input[type=email]:valid, nav .input-field input[type=url]:valid, nav .input-field input[type=date]:valid {
3735
+ 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 {
4266
3736
  border: none;
4267
3737
  -webkit-box-shadow: none;
4268
3738
  box-shadow: none;
@@ -4272,12 +3742,12 @@ nav .input-field label {
4272
3742
  left: 0;
4273
3743
  }
4274
3744
  nav .input-field label i {
4275
- color: rgba(255, 255, 255, 0.7);
3745
+ color: var(--font-on-primary-color-medium);
4276
3746
  -webkit-transition: color 0.3s;
4277
3747
  transition: color 0.3s;
4278
3748
  }
4279
3749
  nav .input-field label.active i {
4280
- color: #fff;
3750
+ color: var(--font-on-primary-color-main);
4281
3751
  }
4282
3752
 
4283
3753
  .navbar-fixed {
@@ -4287,6 +3757,7 @@ nav .input-field label.active i {
4287
3757
  }
4288
3758
  .navbar-fixed nav {
4289
3759
  position: fixed;
3760
+ right: 0;
4290
3761
  }
4291
3762
 
4292
3763
  @media only screen and (min-width : 601px) {
@@ -4309,7 +3780,7 @@ html {
4309
3780
  line-height: 1.5;
4310
3781
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4311
3782
  font-weight: normal;
4312
- color: rgba(0, 0, 0, 0.87);
3783
+ color: var(--font-color-main);
4313
3784
  }
4314
3785
  @media only screen and (min-width: 0) {
4315
3786
  html {
@@ -4529,19 +4000,18 @@ small {
4529
4000
  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
4530
4001
  padding: 24px;
4531
4002
  margin: 0.5rem 0 1rem 0;
4532
- border-radius: 2px;
4533
- background-color: #fff;
4003
+ border-radius: 12px;
4004
+ background-color: var(--background-color-card);
4534
4005
  }
4535
4006
 
4536
4007
  .card {
4537
4008
  position: relative;
4538
- margin: 0.5rem 0 1rem 0;
4539
- background-color: #fff;
4009
+ background-color: var(--background-color-card);
4540
4010
  -webkit-transition: -webkit-box-shadow 0.25s;
4541
4011
  transition: -webkit-box-shadow 0.25s;
4542
4012
  transition: box-shadow 0.25s;
4543
4013
  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
4544
- border-radius: 2px;
4014
+ border-radius: 12px;
4545
4015
  }
4546
4016
  .card .card-title {
4547
4017
  font-size: 24px;
@@ -4644,7 +4114,7 @@ small {
4644
4114
  width: 100%;
4645
4115
  }
4646
4116
  .card .card-image .card-title {
4647
- color: #fff;
4117
+ color: var(--background-color-card);
4648
4118
  position: absolute;
4649
4119
  bottom: 0;
4650
4120
  left: 0;
@@ -4667,28 +4137,29 @@ small {
4667
4137
  line-height: 32px;
4668
4138
  }
4669
4139
  .card .card-action {
4670
- background-color: inherit;
4671
- border-top: 1px solid rgba(160, 160, 160, 0.2);
4140
+ border-top: 1px solid var(--separator-color);
4672
4141
  position: relative;
4673
- padding: 16px 24px;
4142
+ background-color: inherit;
4674
4143
  }
4675
4144
  .card .card-action:last-child {
4676
4145
  border-radius: 0 0 2px 2px;
4677
4146
  }
4147
+ .card .card-action a {
4148
+ padding: 16px 24px;
4149
+ display: inline-block;
4150
+ }
4678
4151
  .card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating) {
4679
- color: #ffab40;
4680
- margin-right: 24px;
4152
+ color: var(--primary-color);
4681
4153
  -webkit-transition: color 0.3s ease;
4682
4154
  transition: color 0.3s ease;
4683
- text-transform: uppercase;
4684
4155
  }
4685
4156
  .card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating):hover {
4686
- color: #ffd8a6;
4157
+ background-color: var(--primary-color-hover-opaque);
4687
4158
  }
4688
4159
  .card .card-reveal {
4689
4160
  padding: 24px;
4690
4161
  position: absolute;
4691
- background-color: #fff;
4162
+ background-color: var(--background-color-card);
4692
4163
  width: 100%;
4693
4164
  overflow-y: auto;
4694
4165
  left: 0;
@@ -4738,11 +4209,11 @@ small {
4738
4209
  height: auto;
4739
4210
  min-height: 48px;
4740
4211
  line-height: 1.5em;
4741
- background-color: #323232;
4212
+ background-color: var(--tooltip-background-color);
4742
4213
  padding: 10px 25px;
4743
- font-size: 1.1rem;
4744
- font-weight: 300;
4745
- color: #fff;
4214
+ font-size: 1rem;
4215
+ font-weight: 400;
4216
+ color: var(--tooltip-font-color);
4746
4217
  display: -webkit-box;
4747
4218
  display: -webkit-flex;
4748
4219
  display: -ms-flexbox;
@@ -4774,29 +4245,42 @@ small {
4774
4245
  }
4775
4246
 
4776
4247
  .tabs {
4248
+ padding-left: 0;
4249
+ list-style-type: none;
4777
4250
  position: relative;
4778
4251
  overflow-x: auto;
4779
4252
  overflow-y: hidden;
4780
4253
  height: 48px;
4781
4254
  width: 100%;
4782
- background-color: #fff;
4255
+ background-color: var(--surface-color);
4783
4256
  margin: 0 auto;
4784
4257
  white-space: nowrap;
4785
4258
  }
4786
4259
  .tabs.tabs-transparent {
4787
4260
  background-color: transparent;
4788
4261
  }
4789
- .tabs.tabs-transparent .tab a,
4262
+ .tabs.tabs-transparent .tab a {
4263
+ color: var(--font-on-primary-color-medium);
4264
+ }
4790
4265
  .tabs.tabs-transparent .tab.disabled a,
4791
- .tabs.tabs-transparent .tab.disabled a:hover {
4792
- color: rgba(255, 255, 255, 0.7);
4266
+ .tabs.tabs-transparent .tab.disabled a:hover,
4267
+ .tabs.tabs-transparent .tab.disabled a:focus {
4268
+ color: var(--font-on-primary-color-disabled);
4269
+ }
4270
+ .tabs.tabs-transparent .tab a:hover {
4271
+ background-color: var(--hover-color);
4272
+ }
4273
+ .tabs.tabs-transparent .tab a.active,
4274
+ .tabs.tabs-transparent .tab a:focus {
4275
+ background-color: transparent;
4793
4276
  }
4794
4277
  .tabs.tabs-transparent .tab a:hover,
4795
- .tabs.tabs-transparent .tab a.active {
4796
- color: #fff;
4278
+ .tabs.tabs-transparent .tab a.active,
4279
+ .tabs.tabs-transparent .tab a:focus {
4280
+ color: var(--font-on-primary-color-main);
4797
4281
  }
4798
4282
  .tabs.tabs-transparent .indicator {
4799
- background-color: #fff;
4283
+ background-color: var(--font-on-primary-color-main);
4800
4284
  }
4801
4285
  .tabs.tabs-fixed-width {
4802
4286
  display: -webkit-box;
@@ -4811,16 +4295,17 @@ small {
4811
4295
  flex-grow: 1;
4812
4296
  }
4813
4297
  .tabs .tab {
4298
+ padding-left: 0;
4299
+ list-style-type: none;
4814
4300
  display: inline-block;
4815
4301
  text-align: center;
4816
4302
  line-height: 48px;
4817
4303
  height: 48px;
4818
4304
  padding: 0;
4819
4305
  margin: 0;
4820
- text-transform: uppercase;
4821
4306
  }
4822
4307
  .tabs .tab a {
4823
- color: rgba(238, 110, 115, 0.7);
4308
+ color: var(--font-color-medium);
4824
4309
  display: block;
4825
4310
  width: 100%;
4826
4311
  height: 100%;
@@ -4831,23 +4316,32 @@ small {
4831
4316
  -webkit-transition: color 0.28s ease, background-color 0.28s ease;
4832
4317
  transition: color 0.28s ease, background-color 0.28s ease;
4833
4318
  }
4834
- .tabs .tab a:focus, .tabs .tab a:focus.active {
4835
- background-color: rgba(246, 178, 181, 0.2);
4836
- outline: none;
4837
- }
4838
- .tabs .tab a:hover, .tabs .tab a.active {
4319
+ .tabs .tab a.active {
4839
4320
  background-color: transparent;
4840
- color: #ee6e73;
4321
+ }
4322
+ .tabs .tab a.active, .tabs .tab a:focus, .tabs .tab a:hover {
4323
+ color: var(--primary-color);
4324
+ }
4325
+ .tabs .tab a:hover {
4326
+ background-color: var(--primary-color-hover-opaque);
4327
+ }
4328
+ .tabs .tab a:focus, .tabs .tab a.active {
4329
+ background-color: var(--primary-color-focus-opaque);
4330
+ outline: none;
4841
4331
  }
4842
4332
  .tabs .tab.disabled a, .tabs .tab.disabled a:hover {
4843
- color: rgba(238, 110, 115, 0.4);
4333
+ color: var(--font-color-disabled);
4844
4334
  cursor: default;
4335
+ background-color: transparent;
4336
+ }
4337
+ .tabs .tab.disabled a:not(:focus), .tabs .tab.disabled a:hover:not(:focus) {
4338
+ background-color: transparent;
4845
4339
  }
4846
4340
  .tabs .indicator {
4847
4341
  position: absolute;
4848
4342
  bottom: 0;
4849
4343
  height: 2px;
4850
- background-color: #f6b2b5;
4344
+ background-color: var(--primary-color);
4851
4345
  will-change: left, right;
4852
4346
  }
4853
4347
 
@@ -4872,9 +4366,8 @@ small {
4872
4366
  padding: 10px 8px;
4873
4367
  font-size: 1rem;
4874
4368
  z-index: 2000;
4875
- background-color: transparent;
4876
4369
  border-radius: 2px;
4877
- color: #fff;
4370
+ color: var(--tooltip-font-color);
4878
4371
  min-height: 36px;
4879
4372
  line-height: 120%;
4880
4373
  opacity: 0;
@@ -4886,7 +4379,7 @@ small {
4886
4379
  top: 0;
4887
4380
  pointer-events: none;
4888
4381
  visibility: hidden;
4889
- background-color: #323232;
4382
+ background-color: var(--tooltip-background-color);
4890
4383
  }
4891
4384
 
4892
4385
  .backdrop {
@@ -4895,23 +4388,27 @@ small {
4895
4388
  height: 7px;
4896
4389
  width: 14px;
4897
4390
  border-radius: 0 0 50% 50%;
4898
- background-color: #323232;
4391
+ background-color: var(--tooltip-background-color);
4899
4392
  z-index: -1;
4900
- -webkit-transform-origin: 50% 0%;
4901
- transform-origin: 50% 0%;
4393
+ -webkit-transform-origin: 50% 0;
4394
+ transform-origin: 50% 0;
4902
4395
  visibility: hidden;
4903
4396
  }
4904
4397
 
4905
4398
  .btn, .btn-small, .btn-large,
4906
4399
  .btn-flat {
4400
+ font-weight: 500;
4907
4401
  border: none;
4908
- border-radius: 2px;
4402
+ border-radius: 4px;
4909
4403
  display: inline-block;
4910
- height: 36px;
4911
- line-height: 36px;
4404
+ height: 40px;
4405
+ line-height: 40px;
4912
4406
  padding: 0 16px;
4913
- text-transform: uppercase;
4914
4407
  vertical-align: middle;
4408
+ -webkit-user-select: none;
4409
+ -moz-user-select: none;
4410
+ -ms-user-select: none;
4411
+ user-select: none;
4915
4412
  -webkit-tap-highlight-color: transparent;
4916
4413
  }
4917
4414
 
@@ -4931,10 +4428,10 @@ small {
4931
4428
  .btn-small[disabled],
4932
4429
  .btn-flat[disabled] {
4933
4430
  pointer-events: none;
4934
- background-color: #DFDFDF !important;
4431
+ background-color: var(--background-color-disabled) !important;
4935
4432
  -webkit-box-shadow: none;
4936
4433
  box-shadow: none;
4937
- color: #9F9F9F !important;
4434
+ color: var(--font-color-disabled) !important;
4938
4435
  cursor: default;
4939
4436
  }
4940
4437
  .btn.disabled:hover,
@@ -4952,8 +4449,8 @@ small {
4952
4449
  .btn-large[disabled]:hover,
4953
4450
  .btn-small[disabled]:hover,
4954
4451
  .btn-flat[disabled]:hover {
4955
- background-color: #DFDFDF !important;
4956
- color: #9F9F9F !important;
4452
+ background-color: var(--background-color-disabled) !important;
4453
+ color: var(--font-color-disabled) !important;
4957
4454
  }
4958
4455
 
4959
4456
  .btn,
@@ -4973,15 +4470,10 @@ small {
4973
4470
  line-height: inherit;
4974
4471
  }
4975
4472
 
4976
- .btn:focus, .btn-small:focus, .btn-large:focus,
4977
- .btn-floating:focus {
4978
- background-color: #1d7d74;
4979
- }
4980
-
4981
4473
  .btn, .btn-small, .btn-large {
4982
4474
  text-decoration: none;
4983
- color: #fff;
4984
- background-color: #26a69a;
4475
+ color: var(--font-on-primary-color-main);
4476
+ background-color: var(--primary-color);
4985
4477
  text-align: center;
4986
4478
  letter-spacing: 0.5px;
4987
4479
  -webkit-transition: background-color 0.2s ease-out;
@@ -4989,12 +4481,15 @@ small {
4989
4481
  cursor: pointer;
4990
4482
  }
4991
4483
  .btn:hover, .btn-small:hover, .btn-large:hover {
4992
- background-color: #2bbbad;
4484
+ background-color: var(--primary-color-raised-hover-solid);
4485
+ }
4486
+ .btn:focus, .btn-small:focus, .btn-large:focus {
4487
+ background-color: var(--primary-color-raised-focus-solid);
4993
4488
  }
4994
4489
 
4995
4490
  .btn-floating {
4996
4491
  display: inline-block;
4997
- color: #fff;
4492
+ color: var(--font-on-secondary-color-main);
4998
4493
  position: relative;
4999
4494
  overflow: hidden;
5000
4495
  z-index: 1;
@@ -5002,7 +4497,7 @@ small {
5002
4497
  height: 40px;
5003
4498
  line-height: 40px;
5004
4499
  padding: 0;
5005
- background-color: #26a69a;
4500
+ background-color: var(--secondary-color);
5006
4501
  border-radius: 50%;
5007
4502
  -webkit-transition: background-color 0.3s;
5008
4503
  transition: background-color 0.3s;
@@ -5010,7 +4505,10 @@ small {
5010
4505
  vertical-align: middle;
5011
4506
  }
5012
4507
  .btn-floating:hover {
5013
- background-color: #26a69a;
4508
+ background-color: var(--secondary-color-hover-solid);
4509
+ }
4510
+ .btn-floating:focus {
4511
+ background-color: var(--secondary-color-focus-solid);
5014
4512
  }
5015
4513
  .btn-floating:before {
5016
4514
  border-radius: 0;
@@ -5027,14 +4525,14 @@ small {
5027
4525
  line-height: 56px;
5028
4526
  }
5029
4527
  .btn-floating.btn-small {
5030
- width: 32.4px;
5031
- height: 32.4px;
4528
+ width: 30px;
4529
+ height: 30px;
5032
4530
  }
5033
4531
  .btn-floating.btn-small.halfway-fab {
5034
- bottom: -16.2px;
4532
+ bottom: -15px;
5035
4533
  }
5036
4534
  .btn-floating.btn-small i {
5037
- line-height: 32.4px;
4535
+ line-height: 30px;
5038
4536
  }
5039
4537
  .btn-floating.halfway-fab {
5040
4538
  position: absolute;
@@ -5049,7 +4547,7 @@ small {
5049
4547
  width: inherit;
5050
4548
  display: inline-block;
5051
4549
  text-align: center;
5052
- color: #fff;
4550
+ color: var(--font-on-secondary-color-main);
5053
4551
  font-size: 1.6rem;
5054
4552
  line-height: 40px;
5055
4553
  }
@@ -5068,6 +4566,8 @@ button.btn-floating {
5068
4566
  }
5069
4567
  .fixed-action-btn.active ul {
5070
4568
  visibility: visible;
4569
+ padding-left: 0;
4570
+ list-style-type: none;
5071
4571
  }
5072
4572
  .fixed-action-btn.direction-left, .fixed-action-btn.direction-right {
5073
4573
  padding: 0 0 0 15px;
@@ -5154,7 +4654,7 @@ button.btn-floating {
5154
4654
  background-color: transparent;
5155
4655
  -webkit-box-shadow: none;
5156
4656
  box-shadow: none;
5157
- color: #fff;
4657
+ color: var(--font-on-secondary-color-main);
5158
4658
  line-height: 56px;
5159
4659
  z-index: 1;
5160
4660
  }
@@ -5183,7 +4683,7 @@ button.btn-floating {
5183
4683
  z-index: -1;
5184
4684
  width: 40px;
5185
4685
  height: 40px;
5186
- background-color: #26a69a;
4686
+ background-color: var(--secondary-color);
5187
4687
  border-radius: 50%;
5188
4688
  -webkit-transform: scale(0);
5189
4689
  transform: scale(0);
@@ -5193,7 +4693,7 @@ button.btn-floating {
5193
4693
  -webkit-box-shadow: none;
5194
4694
  box-shadow: none;
5195
4695
  background-color: transparent;
5196
- color: #343434;
4696
+ color: var(--font-color-medium);
5197
4697
  cursor: pointer;
5198
4698
  -webkit-transition: background-color 0.2s;
5199
4699
  transition: background-color 0.2s;
@@ -5201,20 +4701,21 @@ button.btn-floating {
5201
4701
  .btn-flat:focus, .btn-flat:hover {
5202
4702
  -webkit-box-shadow: none;
5203
4703
  box-shadow: none;
4704
+ background-color: var(--hover-color);
5204
4705
  }
5205
4706
  .btn-flat:focus {
5206
- background-color: rgba(0, 0, 0, 0.1);
4707
+ background-color: var(--focus-color);
5207
4708
  }
5208
4709
  .btn-flat.disabled, .btn-flat.btn-flat[disabled] {
5209
4710
  background-color: transparent !important;
5210
- color: #b3b3b3 !important;
4711
+ color: var(--font-color-disabled) !important;
5211
4712
  cursor: default;
5212
4713
  }
5213
4714
 
5214
4715
  .btn-large {
5215
- height: 54px;
5216
- line-height: 54px;
5217
- font-size: 15px;
4716
+ height: 60px;
4717
+ line-height: 60px;
4718
+ font-size: 18px;
5218
4719
  padding: 0 28px;
5219
4720
  }
5220
4721
  .btn-large i {
@@ -5222,8 +4723,8 @@ button.btn-floating {
5222
4723
  }
5223
4724
 
5224
4725
  .btn-small {
5225
- height: 32.4px;
5226
- line-height: 32.4px;
4726
+ height: 30px;
4727
+ line-height: 30px;
5227
4728
  font-size: 13px;
5228
4729
  }
5229
4730
  .btn-small i {
@@ -5235,7 +4736,9 @@ button.btn-floating {
5235
4736
  }
5236
4737
 
5237
4738
  .dropdown-content {
5238
- background-color: #fff;
4739
+ padding-left: 0;
4740
+ list-style-type: none;
4741
+ background-color: var(--surface-color);
5239
4742
  margin: 0;
5240
4743
  display: none;
5241
4744
  min-width: 100px;
@@ -5253,7 +4756,7 @@ button.btn-floating {
5253
4756
  }
5254
4757
  .dropdown-content li {
5255
4758
  clear: both;
5256
- color: rgba(0, 0, 0, 0.87);
4759
+ color: var(--font-color-main);
5257
4760
  cursor: pointer;
5258
4761
  min-height: 50px;
5259
4762
  line-height: 1.5rem;
@@ -5261,7 +4764,7 @@ button.btn-floating {
5261
4764
  text-align: left;
5262
4765
  }
5263
4766
  .dropdown-content li:hover, .dropdown-content li.active {
5264
- background-color: #eee;
4767
+ background-color: var(--hover-color);
5265
4768
  }
5266
4769
  .dropdown-content li:focus {
5267
4770
  outline: none;
@@ -5272,7 +4775,7 @@ button.btn-floating {
5272
4775
  }
5273
4776
  .dropdown-content li > a, .dropdown-content li > span {
5274
4777
  font-size: 16px;
5275
- color: #26a69a;
4778
+ color: var(--primary-color);
5276
4779
  display: block;
5277
4780
  line-height: 22px;
5278
4781
  padding: 14px 16px;
@@ -5291,7 +4794,7 @@ button.btn-floating {
5291
4794
  }
5292
4795
 
5293
4796
  body.keyboard-focused .dropdown-content li:focus {
5294
- background-color: #dadada;
4797
+ background-color: var(--focus-color);
5295
4798
  }
5296
4799
 
5297
4800
  .input-field.col .dropdown-content [type=checkbox] + label {
@@ -5306,168 +4809,12 @@ body.keyboard-focused .dropdown-content li:focus {
5306
4809
  cursor: pointer;
5307
4810
  }
5308
4811
 
5309
- /*!
5310
- * Waves v0.7.6
5311
- * http://fian.my.id/Waves
5312
- *
5313
- * Copyright 2014-2018 Alfiana E. Sibuea and other contributors
5314
- * Released under the MIT license
5315
- * https://github.com/fians/Waves/blob/master/LICENSE */
5316
- .waves-effect {
5317
- position: relative;
5318
- cursor: pointer;
5319
- display: inline-block;
5320
- overflow: hidden;
5321
- -webkit-user-select: none;
5322
- -moz-user-select: none;
5323
- -ms-user-select: none;
5324
- user-select: none;
5325
- -webkit-tap-highlight-color: transparent;
5326
- }
5327
- .waves-effect .waves-ripple {
5328
- position: absolute;
5329
- border-radius: 50%;
5330
- width: 100px;
5331
- height: 100px;
5332
- margin-top: -50px;
5333
- margin-left: -50px;
5334
- opacity: 0;
5335
- background: rgba(0, 0, 0, 0.2);
5336
- background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
5337
- -webkit-transition: all 0.5s ease-out;
5338
- transition: all 0.5s ease-out;
5339
- -webkit-transition-property: -webkit-transform, opacity;
5340
- -webkit-transition-property: opacity, -webkit-transform;
5341
- transition-property: opacity, -webkit-transform;
5342
- transition-property: transform, opacity;
5343
- transition-property: transform, opacity, -webkit-transform;
5344
- -webkit-transform: scale(0) translate(0, 0);
5345
- transform: scale(0) translate(0, 0);
5346
- pointer-events: none;
5347
- }
5348
- .waves-effect.waves-light .waves-ripple {
5349
- background: rgba(255, 255, 255, 0.4);
5350
- background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
5351
- }
5352
- .waves-effect.waves-classic .waves-ripple {
5353
- background: rgba(0, 0, 0, 0.2);
5354
- }
5355
- .waves-effect.waves-classic.waves-light .waves-ripple {
5356
- background: rgba(255, 255, 255, 0.4);
5357
- }
5358
- .waves-effect.waves-light .waves-ripple {
5359
- background-color: rgba(255, 255, 255, 0.45);
5360
- }
5361
- .waves-effect.waves-red .waves-ripple {
5362
- background-color: rgba(244, 67, 54, 0.7);
5363
- }
5364
- .waves-effect.waves-yellow .waves-ripple {
5365
- background-color: rgba(255, 235, 59, 0.7);
5366
- }
5367
- .waves-effect.waves-orange .waves-ripple {
5368
- background-color: rgba(255, 152, 0, 0.7);
5369
- }
5370
- .waves-effect.waves-purple .waves-ripple {
5371
- background-color: rgba(156, 39, 176, 0.7);
5372
- }
5373
- .waves-effect.waves-green .waves-ripple {
5374
- background-color: rgba(76, 175, 80, 0.7);
5375
- }
5376
- .waves-effect.waves-teal .waves-ripple {
5377
- background-color: rgba(0, 150, 136, 0.7);
5378
- }
5379
- .waves-effect input[type=button], .waves-effect input[type=reset], .waves-effect input[type=submit] {
5380
- border: 0;
5381
- font-style: normal;
5382
- font-size: inherit;
5383
- text-transform: inherit;
5384
- background: none;
5385
- }
5386
-
5387
- .waves-notransition {
5388
- -webkit-transition: none !important;
5389
- transition: none !important;
5390
- }
5391
-
5392
- .waves-button,
5393
- .waves-circle {
5394
- -webkit-transform: translateZ(0);
5395
- transform: translateZ(0);
5396
- -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
5397
- }
5398
-
5399
- .waves-button,
5400
- .waves-button:hover,
5401
- .waves-button:visited,
5402
- .waves-button-input {
5403
- white-space: nowrap;
5404
- vertical-align: middle;
5405
- cursor: pointer;
5406
- border: none;
5407
- outline: none;
5408
- color: inherit;
5409
- background-color: rgba(0, 0, 0, 0);
5410
- font-size: 1em;
5411
- line-height: 1em;
5412
- text-align: center;
5413
- text-decoration: none;
5414
- z-index: 1;
5415
- }
5416
-
5417
- .waves-button {
5418
- padding: 0.85em 1.1em;
5419
- border-radius: 0.2em;
5420
- }
5421
-
5422
- .waves-button-input {
5423
- margin: 0;
5424
- padding: 0.85em 1.1em;
5425
- }
5426
-
5427
- .waves-input-wrapper {
5428
- border-radius: 0.2em;
5429
- vertical-align: bottom;
5430
- }
5431
- .waves-input-wrapper.waves-button {
5432
- padding: 0;
5433
- }
5434
- .waves-input-wrapper .waves-button-input {
5435
- position: relative;
5436
- top: 0;
5437
- left: 0;
5438
- z-index: 1;
5439
- }
5440
-
5441
- .waves-circle {
5442
- text-align: center;
5443
- width: 2.5em;
5444
- height: 2.5em;
5445
- line-height: 2.5em;
5446
- border-radius: 50%;
5447
- }
5448
-
5449
- .waves-float {
5450
- -webkit-mask-image: none;
5451
- -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
5452
- box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
5453
- -webkit-transition: all 300ms;
5454
- transition: all 300ms;
5455
- }
5456
- .waves-float:active {
5457
- -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
5458
- box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
5459
- }
5460
-
5461
- .waves-block {
5462
- display: block;
5463
- }
5464
-
5465
4812
  .modal {
5466
4813
  display: none;
5467
4814
  position: fixed;
5468
4815
  left: 0;
5469
4816
  right: 0;
5470
- background-color: #fafafa;
4817
+ background-color: var(--background-color-level-16dp-solid);
5471
4818
  padding: 0;
5472
4819
  max-height: 70%;
5473
4820
  width: 55%;
@@ -5496,7 +4843,7 @@ body.keyboard-focused .dropdown-content li:focus {
5496
4843
  }
5497
4844
  .modal .modal-footer {
5498
4845
  border-radius: 0 0 2px 2px;
5499
- background-color: #fafafa;
4846
+ background-color: var(--background-color-level-16dp-solid);
5500
4847
  padding: 4px 6px;
5501
4848
  height: 56px;
5502
4849
  width: 100%;
@@ -5532,7 +4879,7 @@ body.keyboard-focused .dropdown-content li:focus {
5532
4879
  overflow-y: auto;
5533
4880
  }
5534
4881
  .modal.modal-fixed-footer .modal-footer {
5535
- border-top: 1px solid rgba(0, 0, 0, 0.1);
4882
+ border-top: 1px solid var(--separator-color);
5536
4883
  position: absolute;
5537
4884
  bottom: 0;
5538
4885
  }
@@ -5548,9 +4895,11 @@ body.keyboard-focused .dropdown-content li:focus {
5548
4895
  }
5549
4896
 
5550
4897
  .collapsible {
5551
- border-top: 1px solid #ddd;
5552
- border-right: 1px solid #ddd;
5553
- border-left: 1px solid #ddd;
4898
+ padding-left: 0;
4899
+ list-style-type: none;
4900
+ border-top: 1px solid var(--separator-color);
4901
+ border-right: 1px solid var(--separator-color);
4902
+ border-left: 1px solid var(--separator-color);
5554
4903
  margin: 0.5rem 0 1rem 0;
5555
4904
  }
5556
4905
 
@@ -5563,8 +4912,8 @@ body.keyboard-focused .dropdown-content li:focus {
5563
4912
  -webkit-tap-highlight-color: transparent;
5564
4913
  line-height: 1.5;
5565
4914
  padding: 1rem;
5566
- background-color: #fff;
5567
- border-bottom: 1px solid #ddd;
4915
+ border-bottom: 1px solid var(--separator-color);
4916
+ background-color: var(--surface-color);
5568
4917
  }
5569
4918
  .collapsible-header:focus {
5570
4919
  outline: 0;
@@ -5578,15 +4927,16 @@ body.keyboard-focused .dropdown-content li:focus {
5578
4927
  }
5579
4928
 
5580
4929
  .keyboard-focused .collapsible-header:focus {
5581
- background-color: #eee;
4930
+ background-color: var(--focus-color);
5582
4931
  }
5583
4932
 
5584
4933
  .collapsible-body {
5585
4934
  display: none;
5586
- border-bottom: 1px solid #ddd;
4935
+ border-bottom: 1px solid var(--separator-color);
5587
4936
  -webkit-box-sizing: border-box;
5588
4937
  box-sizing: border-box;
5589
4938
  padding: 2rem;
4939
+ background-color: var(--surface-color);
5590
4940
  }
5591
4941
 
5592
4942
  .sidenav .collapsible,
@@ -5599,6 +4949,12 @@ body.keyboard-focused .dropdown-content li:focus {
5599
4949
  .sidenav.sidenav-fixed .collapsible li {
5600
4950
  padding: 0;
5601
4951
  }
4952
+ .sidenav > li:hover,
4953
+ .sidenav > li.active,
4954
+ .sidenav.sidenav-fixed > li:hover,
4955
+ .sidenav.sidenav-fixed > li.active {
4956
+ background-color: transparent;
4957
+ }
5602
4958
  .sidenav .collapsible-header,
5603
4959
  .sidenav.sidenav-fixed .collapsible-header {
5604
4960
  background-color: transparent;
@@ -5607,10 +4963,6 @@ body.keyboard-focused .dropdown-content li:focus {
5607
4963
  height: inherit;
5608
4964
  padding: 0 16px;
5609
4965
  }
5610
- .sidenav .collapsible-header:hover,
5611
- .sidenav.sidenav-fixed .collapsible-header:hover {
5612
- background-color: rgba(0, 0, 0, 0.05);
5613
- }
5614
4966
  .sidenav .collapsible-header i,
5615
4967
  .sidenav.sidenav-fixed .collapsible-header i {
5616
4968
  line-height: inherit;
@@ -5618,7 +4970,7 @@ body.keyboard-focused .dropdown-content li:focus {
5618
4970
  .sidenav .collapsible-body,
5619
4971
  .sidenav.sidenav-fixed .collapsible-body {
5620
4972
  border: 0;
5621
- background-color: #fff;
4973
+ background-color: var(--surface-color);
5622
4974
  }
5623
4975
  .sidenav .collapsible-body li a,
5624
4976
  .sidenav.sidenav-fixed .collapsible-body li a {
@@ -5648,18 +5000,18 @@ body.keyboard-focused .dropdown-content li:focus {
5648
5000
  height: 32px;
5649
5001
  font-size: 13px;
5650
5002
  font-weight: 500;
5651
- color: rgba(0, 0, 0, 0.6);
5003
+ color: var(--font-color-medium);
5652
5004
  line-height: 32px;
5653
5005
  padding: 0 12px;
5654
5006
  border-radius: 16px;
5655
- background-color: #e4e4e4;
5007
+ background-color: var(--background-color-level-4dp);
5656
5008
  margin-bottom: 5px;
5657
5009
  margin-right: 5px;
5658
5010
  }
5659
5011
  .chip:focus {
5660
5012
  outline: none;
5661
- background-color: #26a69a;
5662
- color: #fff;
5013
+ background-color: var(--primary-color);
5014
+ color: var(--font-on-primary-color-main);
5663
5015
  }
5664
5016
  .chip > img {
5665
5017
  float: left;
@@ -5678,7 +5030,7 @@ body.keyboard-focused .dropdown-content li:focus {
5678
5030
 
5679
5031
  .chips {
5680
5032
  border: none;
5681
- border-bottom: 1px solid #9e9e9e;
5033
+ border-bottom: 1px solid var(--font-color-medium);
5682
5034
  -webkit-box-shadow: none;
5683
5035
  box-shadow: none;
5684
5036
  margin: 0 0 8px 0;
@@ -5688,9 +5040,9 @@ body.keyboard-focused .dropdown-content li:focus {
5688
5040
  transition: all 0.3s;
5689
5041
  }
5690
5042
  .chips.focus {
5691
- border-bottom: 1px solid #26a69a;
5692
- -webkit-box-shadow: 0 1px 0 0 #26a69a;
5693
- box-shadow: 0 1px 0 0 #26a69a;
5043
+ border-bottom: 1px solid var(--primary-color);
5044
+ -webkit-box-shadow: 0 1px 0 0 var(--primary-color);
5045
+ box-shadow: 0 1px 0 0 var(--primary-color);
5694
5046
  }
5695
5047
  .chips:hover {
5696
5048
  cursor: text;
@@ -5698,7 +5050,7 @@ body.keyboard-focused .dropdown-content li:focus {
5698
5050
  .chips input:not([type]):not(.browser-default).input {
5699
5051
  background: none;
5700
5052
  border: 0;
5701
- color: rgba(0, 0, 0, 0.6);
5053
+ color: var(--font-color-main);
5702
5054
  display: inline-block;
5703
5055
  font-size: 16px;
5704
5056
  height: 3rem;
@@ -5780,33 +5132,33 @@ body.keyboard-focused .dropdown-content li:focus {
5780
5132
  }
5781
5133
 
5782
5134
  select:focus {
5783
- outline: 1px solid #c9f3ef;
5135
+ outline: 1px solid var(--primary-color-raised-focus-solid);
5784
5136
  }
5785
5137
 
5786
5138
  button:focus {
5787
5139
  outline: none;
5788
- background-color: #2ab7a9;
5140
+ background-color: var(--primary-color-raised-focus-solid);
5789
5141
  }
5790
5142
 
5791
5143
  label {
5792
5144
  font-size: 0.8rem;
5793
- color: #9e9e9e;
5145
+ color: var(--font-color-medium);
5794
5146
  }
5795
5147
 
5796
5148
  /* Text Inputs + Textarea
5797
5149
  ========================================================================== */
5798
5150
  /* Style Placeholders */
5799
5151
  ::-webkit-input-placeholder {
5800
- color: #d1d1d1;
5152
+ color: var(--font-color-medium);
5801
5153
  }
5802
5154
  ::-moz-placeholder {
5803
- color: #d1d1d1;
5155
+ color: var(--font-color-medium);
5804
5156
  }
5805
5157
  ::-ms-input-placeholder {
5806
- color: #d1d1d1;
5158
+ color: var(--font-color-medium);
5807
5159
  }
5808
5160
  ::placeholder {
5809
- color: #d1d1d1;
5161
+ color: var(--font-color-medium);
5810
5162
  }
5811
5163
 
5812
5164
  /* Text inputs */
@@ -5824,544 +5176,250 @@ input[type=tel]:not(.browser-default),
5824
5176
  input[type=number]:not(.browser-default),
5825
5177
  input[type=search]:not(.browser-default),
5826
5178
  textarea.materialize-textarea {
5827
- background-color: transparent;
5828
- border: none;
5829
- border-bottom: 1px solid #9e9e9e;
5830
- border-radius: 0;
5831
5179
  outline: none;
5832
- height: 3rem;
5180
+ color: var(--font-color-main);
5833
5181
  width: 100%;
5834
5182
  font-size: 16px;
5835
- margin: 0 0 8px 0;
5836
- padding: 0;
5837
- -webkit-box-shadow: none;
5838
- box-shadow: none;
5839
- -webkit-box-sizing: content-box;
5840
- box-sizing: content-box;
5841
- -webkit-transition: border 0.3s, -webkit-box-shadow 0.3s;
5842
- transition: border 0.3s, -webkit-box-shadow 0.3s;
5843
- transition: box-shadow 0.3s, border 0.3s;
5844
- transition: box-shadow 0.3s, border 0.3s, -webkit-box-shadow 0.3s;
5845
- }
5846
- input:not([type]):not(.browser-default):disabled, input:not([type]):not(.browser-default)[readonly=readonly],
5847
- input[type=text]:not(.browser-default):disabled,
5848
- input[type=text]:not(.browser-default)[readonly=readonly],
5849
- input[type=password]:not(.browser-default):disabled,
5850
- input[type=password]:not(.browser-default)[readonly=readonly],
5851
- input[type=email]:not(.browser-default):disabled,
5852
- input[type=email]:not(.browser-default)[readonly=readonly],
5853
- input[type=url]:not(.browser-default):disabled,
5854
- input[type=url]:not(.browser-default)[readonly=readonly],
5855
- input[type=time]:not(.browser-default):disabled,
5856
- input[type=time]:not(.browser-default)[readonly=readonly],
5857
- input[type=date]:not(.browser-default):disabled,
5858
- input[type=date]:not(.browser-default)[readonly=readonly],
5859
- input[type=datetime]:not(.browser-default):disabled,
5860
- input[type=datetime]:not(.browser-default)[readonly=readonly],
5861
- input[type=datetime-local]:not(.browser-default):disabled,
5862
- input[type=datetime-local]:not(.browser-default)[readonly=readonly],
5863
- input[type=month]:not(.browser-default):disabled,
5864
- input[type=month]:not(.browser-default)[readonly=readonly],
5865
- input[type=tel]:not(.browser-default):disabled,
5866
- input[type=tel]:not(.browser-default)[readonly=readonly],
5867
- input[type=number]:not(.browser-default):disabled,
5868
- input[type=number]:not(.browser-default)[readonly=readonly],
5869
- input[type=search]:not(.browser-default):disabled,
5870
- input[type=search]:not(.browser-default)[readonly=readonly],
5871
- textarea.materialize-textarea:disabled,
5872
- textarea.materialize-textarea[readonly=readonly] {
5873
- color: rgba(0, 0, 0, 0.42);
5874
- border-bottom: 1px dotted rgba(0, 0, 0, 0.42);
5875
- }
5876
- input:not([type]):not(.browser-default):disabled + label, input:not([type]):not(.browser-default)[readonly=readonly] + label,
5877
- input[type=text]:not(.browser-default):disabled + label,
5878
- input[type=text]:not(.browser-default)[readonly=readonly] + label,
5879
- input[type=password]:not(.browser-default):disabled + label,
5880
- input[type=password]:not(.browser-default)[readonly=readonly] + label,
5881
- input[type=email]:not(.browser-default):disabled + label,
5882
- input[type=email]:not(.browser-default)[readonly=readonly] + label,
5883
- input[type=url]:not(.browser-default):disabled + label,
5884
- input[type=url]:not(.browser-default)[readonly=readonly] + label,
5885
- input[type=time]:not(.browser-default):disabled + label,
5886
- input[type=time]:not(.browser-default)[readonly=readonly] + label,
5887
- input[type=date]:not(.browser-default):disabled + label,
5888
- input[type=date]:not(.browser-default)[readonly=readonly] + label,
5889
- input[type=datetime]:not(.browser-default):disabled + label,
5890
- input[type=datetime]:not(.browser-default)[readonly=readonly] + label,
5891
- input[type=datetime-local]:not(.browser-default):disabled + label,
5892
- input[type=datetime-local]:not(.browser-default)[readonly=readonly] + label,
5893
- input[type=month]:not(.browser-default):disabled + label,
5894
- input[type=month]:not(.browser-default)[readonly=readonly] + label,
5895
- input[type=tel]:not(.browser-default):disabled + label,
5896
- input[type=tel]:not(.browser-default)[readonly=readonly] + label,
5897
- input[type=number]:not(.browser-default):disabled + label,
5898
- input[type=number]:not(.browser-default)[readonly=readonly] + label,
5899
- input[type=search]:not(.browser-default):disabled + label,
5900
- input[type=search]:not(.browser-default)[readonly=readonly] + label,
5901
- textarea.materialize-textarea:disabled + label,
5902
- textarea.materialize-textarea[readonly=readonly] + label {
5903
- color: rgba(0, 0, 0, 0.42);
5904
- }
5905
- input:not([type]):not(.browser-default):focus:not([readonly]),
5906
- input[type=text]:not(.browser-default):focus:not([readonly]),
5907
- input[type=password]:not(.browser-default):focus:not([readonly]),
5908
- input[type=email]:not(.browser-default):focus:not([readonly]),
5909
- input[type=url]:not(.browser-default):focus:not([readonly]),
5910
- input[type=time]:not(.browser-default):focus:not([readonly]),
5911
- input[type=date]:not(.browser-default):focus:not([readonly]),
5912
- input[type=datetime]:not(.browser-default):focus:not([readonly]),
5913
- input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
5914
- input[type=month]:not(.browser-default):focus:not([readonly]),
5915
- input[type=tel]:not(.browser-default):focus:not([readonly]),
5916
- input[type=number]:not(.browser-default):focus:not([readonly]),
5917
- input[type=search]:not(.browser-default):focus:not([readonly]),
5918
- textarea.materialize-textarea:focus:not([readonly]) {
5919
- border-bottom: 1px solid #26a69a;
5920
- -webkit-box-shadow: 0 1px 0 0 #26a69a;
5921
- box-shadow: 0 1px 0 0 #26a69a;
5922
- }
5923
- input:not([type]):not(.browser-default):focus:not([readonly]) + label,
5924
- input[type=text]:not(.browser-default):focus:not([readonly]) + label,
5925
- input[type=password]:not(.browser-default):focus:not([readonly]) + label,
5926
- input[type=email]:not(.browser-default):focus:not([readonly]) + label,
5927
- input[type=url]:not(.browser-default):focus:not([readonly]) + label,
5928
- input[type=time]:not(.browser-default):focus:not([readonly]) + label,
5929
- input[type=date]:not(.browser-default):focus:not([readonly]) + label,
5930
- input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
5931
- input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
5932
- input[type=month]:not(.browser-default):focus:not([readonly]) + label,
5933
- input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
5934
- input[type=number]:not(.browser-default):focus:not([readonly]) + label,
5935
- input[type=search]:not(.browser-default):focus:not([readonly]) + label,
5936
- textarea.materialize-textarea:focus:not([readonly]) + label {
5937
- color: #26a69a;
5938
- }
5939
- input:not([type]):not(.browser-default):focus.valid ~ label,
5940
- input[type=text]:not(.browser-default):focus.valid ~ label,
5941
- input[type=password]:not(.browser-default):focus.valid ~ label,
5942
- input[type=email]:not(.browser-default):focus.valid ~ label,
5943
- input[type=url]:not(.browser-default):focus.valid ~ label,
5944
- input[type=time]:not(.browser-default):focus.valid ~ label,
5945
- input[type=date]:not(.browser-default):focus.valid ~ label,
5946
- input[type=datetime]:not(.browser-default):focus.valid ~ label,
5947
- input[type=datetime-local]:not(.browser-default):focus.valid ~ label,
5948
- input[type=month]:not(.browser-default):focus.valid ~ label,
5949
- input[type=tel]:not(.browser-default):focus.valid ~ label,
5950
- input[type=number]:not(.browser-default):focus.valid ~ label,
5951
- input[type=search]:not(.browser-default):focus.valid ~ label,
5952
- textarea.materialize-textarea:focus.valid ~ label {
5953
- color: #4CAF50;
5954
- }
5955
- input:not([type]):not(.browser-default):focus.invalid ~ label,
5956
- input[type=text]:not(.browser-default):focus.invalid ~ label,
5957
- input[type=password]:not(.browser-default):focus.invalid ~ label,
5958
- input[type=email]:not(.browser-default):focus.invalid ~ label,
5959
- input[type=url]:not(.browser-default):focus.invalid ~ label,
5960
- input[type=time]:not(.browser-default):focus.invalid ~ label,
5961
- input[type=date]:not(.browser-default):focus.invalid ~ label,
5962
- input[type=datetime]:not(.browser-default):focus.invalid ~ label,
5963
- input[type=datetime-local]:not(.browser-default):focus.invalid ~ label,
5964
- input[type=month]:not(.browser-default):focus.invalid ~ label,
5965
- input[type=tel]:not(.browser-default):focus.invalid ~ label,
5966
- input[type=number]:not(.browser-default):focus.invalid ~ label,
5967
- input[type=search]:not(.browser-default):focus.invalid ~ label,
5968
- textarea.materialize-textarea:focus.invalid ~ label {
5969
- color: #F44336;
5970
- }
5971
- input:not([type]):not(.browser-default).validate + label,
5972
- input[type=text]:not(.browser-default).validate + label,
5973
- input[type=password]:not(.browser-default).validate + label,
5974
- input[type=email]:not(.browser-default).validate + label,
5975
- input[type=url]:not(.browser-default).validate + label,
5976
- input[type=time]:not(.browser-default).validate + label,
5977
- input[type=date]:not(.browser-default).validate + label,
5978
- input[type=datetime]:not(.browser-default).validate + label,
5979
- input[type=datetime-local]:not(.browser-default).validate + label,
5980
- input[type=month]:not(.browser-default).validate + label,
5981
- input[type=tel]:not(.browser-default).validate + label,
5982
- input[type=number]:not(.browser-default).validate + label,
5983
- input[type=search]:not(.browser-default).validate + label,
5984
- textarea.materialize-textarea.validate + label {
5985
- width: 100%;
5986
- }
5987
- /* Validation Sass Placeholders */
5988
- .select-wrapper.valid > input.select-dropdown, input:not([type]):not(.browser-default).valid, input:not([type]):not(.browser-default):focus.valid,
5989
- input[type=text]:not(.browser-default).valid,
5990
- input[type=text]:not(.browser-default):focus.valid,
5991
- input[type=password]:not(.browser-default).valid,
5992
- input[type=password]:not(.browser-default):focus.valid,
5993
- input[type=email]:not(.browser-default).valid,
5994
- input[type=email]:not(.browser-default):focus.valid,
5995
- input[type=url]:not(.browser-default).valid,
5996
- input[type=url]:not(.browser-default):focus.valid,
5997
- input[type=time]:not(.browser-default).valid,
5998
- input[type=time]:not(.browser-default):focus.valid,
5999
- input[type=date]:not(.browser-default).valid,
6000
- input[type=date]:not(.browser-default):focus.valid,
6001
- input[type=datetime]:not(.browser-default).valid,
6002
- input[type=datetime]:not(.browser-default):focus.valid,
6003
- input[type=datetime-local]:not(.browser-default).valid,
6004
- input[type=datetime-local]:not(.browser-default):focus.valid,
6005
- input[type=month]:not(.browser-default).valid,
6006
- input[type=month]:not(.browser-default):focus.valid,
6007
- input[type=tel]:not(.browser-default).valid,
6008
- input[type=tel]:not(.browser-default):focus.valid,
6009
- input[type=number]:not(.browser-default).valid,
6010
- input[type=number]:not(.browser-default):focus.valid,
6011
- input[type=search]:not(.browser-default).valid,
6012
- input[type=search]:not(.browser-default):focus.valid,
6013
- textarea.materialize-textarea.valid,
6014
- textarea.materialize-textarea:focus.valid {
6015
- border-bottom: 1px solid #4CAF50;
6016
- -webkit-box-shadow: 0 1px 0 0 #4CAF50;
6017
- box-shadow: 0 1px 0 0 #4CAF50;
6018
- }
6019
-
6020
- .select-wrapper.invalid > input.select-dropdown, .select-wrapper.invalid > input.select-dropdown:focus, input:not([type]):not(.browser-default).invalid, input:not([type]):not(.browser-default):focus.invalid,
6021
- input[type=text]:not(.browser-default).invalid,
6022
- input[type=text]:not(.browser-default):focus.invalid,
6023
- input[type=password]:not(.browser-default).invalid,
6024
- input[type=password]:not(.browser-default):focus.invalid,
6025
- input[type=email]:not(.browser-default).invalid,
6026
- input[type=email]:not(.browser-default):focus.invalid,
6027
- input[type=url]:not(.browser-default).invalid,
6028
- input[type=url]:not(.browser-default):focus.invalid,
6029
- input[type=time]:not(.browser-default).invalid,
6030
- input[type=time]:not(.browser-default):focus.invalid,
6031
- input[type=date]:not(.browser-default).invalid,
6032
- input[type=date]:not(.browser-default):focus.invalid,
6033
- input[type=datetime]:not(.browser-default).invalid,
6034
- input[type=datetime]:not(.browser-default):focus.invalid,
6035
- input[type=datetime-local]:not(.browser-default).invalid,
6036
- input[type=datetime-local]:not(.browser-default):focus.invalid,
6037
- input[type=month]:not(.browser-default).invalid,
6038
- input[type=month]:not(.browser-default):focus.invalid,
6039
- input[type=tel]:not(.browser-default).invalid,
6040
- input[type=tel]:not(.browser-default):focus.invalid,
6041
- input[type=number]:not(.browser-default).invalid,
6042
- input[type=number]:not(.browser-default):focus.invalid,
6043
- input[type=search]:not(.browser-default).invalid,
6044
- input[type=search]:not(.browser-default):focus.invalid,
6045
- textarea.materialize-textarea.invalid,
6046
- textarea.materialize-textarea:focus.invalid {
6047
- border-bottom: 1px solid #F44336;
6048
- -webkit-box-shadow: 0 1px 0 0 #F44336;
6049
- box-shadow: 0 1px 0 0 #F44336;
6050
- }
6051
-
6052
- .select-wrapper.valid .helper-text[data-success], .select-wrapper.invalid ~ .helper-text[data-error], input:not([type]):not(.browser-default).valid ~ .helper-text[data-success], input:not([type]):not(.browser-default):focus.valid ~ .helper-text[data-success], input:not([type]):not(.browser-default).invalid ~ .helper-text[data-error], input:not([type]):not(.browser-default):focus.invalid ~ .helper-text[data-error],
6053
- input[type=text]:not(.browser-default).valid ~ .helper-text[data-success],
6054
- input[type=text]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6055
- input[type=text]:not(.browser-default).invalid ~ .helper-text[data-error],
6056
- input[type=text]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6057
- input[type=password]:not(.browser-default).valid ~ .helper-text[data-success],
6058
- input[type=password]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6059
- input[type=password]:not(.browser-default).invalid ~ .helper-text[data-error],
6060
- input[type=password]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6061
- input[type=email]:not(.browser-default).valid ~ .helper-text[data-success],
6062
- input[type=email]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6063
- input[type=email]:not(.browser-default).invalid ~ .helper-text[data-error],
6064
- input[type=email]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6065
- input[type=url]:not(.browser-default).valid ~ .helper-text[data-success],
6066
- input[type=url]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6067
- input[type=url]:not(.browser-default).invalid ~ .helper-text[data-error],
6068
- input[type=url]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6069
- input[type=time]:not(.browser-default).valid ~ .helper-text[data-success],
6070
- input[type=time]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6071
- input[type=time]:not(.browser-default).invalid ~ .helper-text[data-error],
6072
- input[type=time]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6073
- input[type=date]:not(.browser-default).valid ~ .helper-text[data-success],
6074
- input[type=date]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6075
- input[type=date]:not(.browser-default).invalid ~ .helper-text[data-error],
6076
- input[type=date]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6077
- input[type=datetime]:not(.browser-default).valid ~ .helper-text[data-success],
6078
- input[type=datetime]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6079
- input[type=datetime]:not(.browser-default).invalid ~ .helper-text[data-error],
6080
- input[type=datetime]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6081
- input[type=datetime-local]:not(.browser-default).valid ~ .helper-text[data-success],
6082
- input[type=datetime-local]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6083
- input[type=datetime-local]:not(.browser-default).invalid ~ .helper-text[data-error],
6084
- input[type=datetime-local]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6085
- input[type=month]:not(.browser-default).valid ~ .helper-text[data-success],
6086
- input[type=month]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6087
- input[type=month]:not(.browser-default).invalid ~ .helper-text[data-error],
6088
- input[type=month]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6089
- input[type=tel]:not(.browser-default).valid ~ .helper-text[data-success],
6090
- input[type=tel]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6091
- input[type=tel]:not(.browser-default).invalid ~ .helper-text[data-error],
6092
- input[type=tel]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6093
- input[type=number]:not(.browser-default).valid ~ .helper-text[data-success],
6094
- input[type=number]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6095
- input[type=number]:not(.browser-default).invalid ~ .helper-text[data-error],
6096
- input[type=number]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6097
- input[type=search]:not(.browser-default).valid ~ .helper-text[data-success],
6098
- input[type=search]:not(.browser-default):focus.valid ~ .helper-text[data-success],
6099
- input[type=search]:not(.browser-default).invalid ~ .helper-text[data-error],
6100
- input[type=search]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
6101
- textarea.materialize-textarea.valid ~ .helper-text[data-success],
6102
- textarea.materialize-textarea:focus.valid ~ .helper-text[data-success],
6103
- textarea.materialize-textarea.invalid ~ .helper-text[data-error],
6104
- textarea.materialize-textarea:focus.invalid ~ .helper-text[data-error] {
6105
- color: transparent;
6106
- -webkit-user-select: none;
6107
- -moz-user-select: none;
6108
- -ms-user-select: none;
6109
- user-select: none;
6110
- pointer-events: none;
6111
- }
6112
-
6113
- .select-wrapper.valid ~ .helper-text:after, input:not([type]):not(.browser-default).valid ~ .helper-text:after, input:not([type]):not(.browser-default):focus.valid ~ .helper-text:after,
6114
- input[type=text]:not(.browser-default).valid ~ .helper-text:after,
6115
- input[type=text]:not(.browser-default):focus.valid ~ .helper-text:after,
6116
- input[type=password]:not(.browser-default).valid ~ .helper-text:after,
6117
- input[type=password]:not(.browser-default):focus.valid ~ .helper-text:after,
6118
- input[type=email]:not(.browser-default).valid ~ .helper-text:after,
6119
- input[type=email]:not(.browser-default):focus.valid ~ .helper-text:after,
6120
- input[type=url]:not(.browser-default).valid ~ .helper-text:after,
6121
- input[type=url]:not(.browser-default):focus.valid ~ .helper-text:after,
6122
- input[type=time]:not(.browser-default).valid ~ .helper-text:after,
6123
- input[type=time]:not(.browser-default):focus.valid ~ .helper-text:after,
6124
- input[type=date]:not(.browser-default).valid ~ .helper-text:after,
6125
- input[type=date]:not(.browser-default):focus.valid ~ .helper-text:after,
6126
- input[type=datetime]:not(.browser-default).valid ~ .helper-text:after,
6127
- input[type=datetime]:not(.browser-default):focus.valid ~ .helper-text:after,
6128
- input[type=datetime-local]:not(.browser-default).valid ~ .helper-text:after,
6129
- input[type=datetime-local]:not(.browser-default):focus.valid ~ .helper-text:after,
6130
- input[type=month]:not(.browser-default).valid ~ .helper-text:after,
6131
- input[type=month]:not(.browser-default):focus.valid ~ .helper-text:after,
6132
- input[type=tel]:not(.browser-default).valid ~ .helper-text:after,
6133
- input[type=tel]:not(.browser-default):focus.valid ~ .helper-text:after,
6134
- input[type=number]:not(.browser-default).valid ~ .helper-text:after,
6135
- input[type=number]:not(.browser-default):focus.valid ~ .helper-text:after,
6136
- input[type=search]:not(.browser-default).valid ~ .helper-text:after,
6137
- input[type=search]:not(.browser-default):focus.valid ~ .helper-text:after,
6138
- textarea.materialize-textarea.valid ~ .helper-text:after,
6139
- textarea.materialize-textarea:focus.valid ~ .helper-text:after {
6140
- content: attr(data-success);
6141
- color: #4CAF50;
6142
- }
6143
-
6144
- .select-wrapper.invalid ~ .helper-text:after, input:not([type]):not(.browser-default).invalid ~ .helper-text:after, input:not([type]):not(.browser-default):focus.invalid ~ .helper-text:after,
6145
- input[type=text]:not(.browser-default).invalid ~ .helper-text:after,
6146
- input[type=text]:not(.browser-default):focus.invalid ~ .helper-text:after,
6147
- input[type=password]:not(.browser-default).invalid ~ .helper-text:after,
6148
- input[type=password]:not(.browser-default):focus.invalid ~ .helper-text:after,
6149
- input[type=email]:not(.browser-default).invalid ~ .helper-text:after,
6150
- input[type=email]:not(.browser-default):focus.invalid ~ .helper-text:after,
6151
- input[type=url]:not(.browser-default).invalid ~ .helper-text:after,
6152
- input[type=url]:not(.browser-default):focus.invalid ~ .helper-text:after,
6153
- input[type=time]:not(.browser-default).invalid ~ .helper-text:after,
6154
- input[type=time]:not(.browser-default):focus.invalid ~ .helper-text:after,
6155
- input[type=date]:not(.browser-default).invalid ~ .helper-text:after,
6156
- input[type=date]:not(.browser-default):focus.invalid ~ .helper-text:after,
6157
- input[type=datetime]:not(.browser-default).invalid ~ .helper-text:after,
6158
- input[type=datetime]:not(.browser-default):focus.invalid ~ .helper-text:after,
6159
- input[type=datetime-local]:not(.browser-default).invalid ~ .helper-text:after,
6160
- input[type=datetime-local]:not(.browser-default):focus.invalid ~ .helper-text:after,
6161
- input[type=month]:not(.browser-default).invalid ~ .helper-text:after,
6162
- input[type=month]:not(.browser-default):focus.invalid ~ .helper-text:after,
6163
- input[type=tel]:not(.browser-default).invalid ~ .helper-text:after,
6164
- input[type=tel]:not(.browser-default):focus.invalid ~ .helper-text:after,
6165
- input[type=number]:not(.browser-default).invalid ~ .helper-text:after,
6166
- input[type=number]:not(.browser-default):focus.invalid ~ .helper-text:after,
6167
- input[type=search]:not(.browser-default).invalid ~ .helper-text:after,
6168
- input[type=search]:not(.browser-default):focus.invalid ~ .helper-text:after,
6169
- textarea.materialize-textarea.invalid ~ .helper-text:after,
6170
- textarea.materialize-textarea:focus.invalid ~ .helper-text:after {
6171
- content: attr(data-error);
6172
- color: #F44336;
6173
- }
6174
-
6175
- .select-wrapper + label:after, input:not([type]):not(.browser-default) + label:after,
6176
- input[type=text]:not(.browser-default) + label:after,
6177
- input[type=password]:not(.browser-default) + label:after,
6178
- input[type=email]:not(.browser-default) + label:after,
6179
- input[type=url]:not(.browser-default) + label:after,
6180
- input[type=time]:not(.browser-default) + label:after,
6181
- input[type=date]:not(.browser-default) + label:after,
6182
- input[type=datetime]:not(.browser-default) + label:after,
6183
- input[type=datetime-local]:not(.browser-default) + label:after,
6184
- input[type=month]:not(.browser-default) + label:after,
6185
- input[type=tel]:not(.browser-default) + label:after,
6186
- input[type=number]:not(.browser-default) + label:after,
6187
- input[type=search]:not(.browser-default) + label:after,
6188
- textarea.materialize-textarea + label:after {
6189
- display: block;
6190
- content: "";
6191
- position: absolute;
6192
- top: 100%;
6193
- left: 0;
6194
- opacity: 0;
6195
- -webkit-transition: 0.2s opacity ease-out, 0.2s color ease-out;
6196
- transition: 0.2s opacity ease-out, 0.2s color ease-out;
5183
+ height: 56px;
6197
5184
  }
6198
5185
 
5186
+ /* Validation Sass Placeholders */
5187
+ /*
5188
+ %custom-success-message {
5189
+ content: attr(data-success);
5190
+ color: $input-success-color;
5191
+ }
5192
+ %custom-error-message {
5193
+ content: attr(data-error);
5194
+ color: $input-error-color;
5195
+ }
5196
+ */
6199
5197
  .input-field {
6200
5198
  position: relative;
6201
- margin-top: 1rem;
6202
- margin-bottom: 1rem;
5199
+ clear: both;
6203
5200
  }
6204
- .input-field.inline {
6205
- display: inline-block;
6206
- vertical-align: middle;
6207
- margin-left: 5px;
5201
+ .input-field input, .input-field textarea {
5202
+ -webkit-box-sizing: border-box;
5203
+ box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
5204
+ padding: 0 16px;
5205
+ padding-top: 20px;
5206
+ background-color: var(--surface-color);
5207
+ border: none;
5208
+ border-radius: 4px;
5209
+ border-bottom: 1px solid var(--font-color-medium);
5210
+ border-bottom-left-radius: 0;
5211
+ border-bottom-right-radius: 0;
5212
+ }
5213
+ .input-field input:focus:not([readonly]), .input-field textarea:focus:not([readonly]) {
5214
+ border-bottom: 2px solid var(--primary-color);
5215
+ padding-top: 21px;
5216
+ }
5217
+ .input-field input:disabled, .input-field input[readonly=readonly], .input-field textarea:disabled, .input-field textarea[readonly=readonly] {
5218
+ color: rgba(var(--md_sys_color_on-surface), 0.38);
5219
+ border-color: rgba(var(--md_sys_color_on-surface), 0.12);
5220
+ background-color: rgba(var(--md_sys_color_on-surface), 0.04);
5221
+ }
5222
+ .input-field input:focus:not([readonly]) + label, .input-field textarea:focus:not([readonly]) + label {
5223
+ color: var(--primary-color);
6208
5224
  }
6209
- .input-field.inline input,
6210
- .input-field.inline .select-dropdown {
6211
- margin-bottom: 1rem;
5225
+ .input-field input:focus:not([readonly]) + label, .input-field input:not(:placeholder-shown) + label, .input-field textarea:focus:not([readonly]) + label, .input-field textarea:not(:placeholder-shown) + label {
5226
+ -webkit-transform: scale(0.75);
5227
+ transform: scale(0.75);
5228
+ top: 8px;
6212
5229
  }
6213
- .input-field.col label {
6214
- left: 0.75rem;
5230
+ .input-field input:disabled + label, .input-field input[readonly=readonly] + label, .input-field textarea:disabled + label, .input-field textarea[readonly=readonly] + label {
5231
+ color: rgba(var(--md_sys_color_on-surface), 0.38);
6215
5232
  }
6216
- .input-field.col .prefix ~ label,
6217
- .input-field.col .prefix ~ .validate ~ label,
6218
- .input-field.col .suffix ~ label,
6219
- .input-field.col .suffix ~ .validate ~ label {
6220
- width: calc(100% - 3rem - 1.5rem);
5233
+ .input-field input::-webkit-input-placeholder {
5234
+ -webkit-user-select: none;
5235
+ user-select: none;
5236
+ }
5237
+ .input-field input::-moz-placeholder {
5238
+ -moz-user-select: none;
5239
+ user-select: none;
5240
+ }
5241
+ .input-field input::-ms-input-placeholder {
5242
+ -ms-user-select: none;
5243
+ user-select: none;
5244
+ }
5245
+ .input-field input::placeholder {
5246
+ -webkit-user-select: none;
5247
+ -moz-user-select: none;
5248
+ -ms-user-select: none;
5249
+ user-select: none;
6221
5250
  }
6222
5251
  .input-field > label {
6223
- color: #9e9e9e;
5252
+ color: var(--font-color-medium);
5253
+ -webkit-user-select: none;
5254
+ -moz-user-select: none;
5255
+ -ms-user-select: none;
5256
+ user-select: none;
5257
+ font-size: 16px;
6224
5258
  position: absolute;
6225
- top: 0;
6226
- left: 0;
6227
- font-size: 1rem;
5259
+ left: 16px;
5260
+ top: 16px;
6228
5261
  cursor: text;
6229
- -webkit-transition: color 0.2s ease-out, -webkit-transform 0.2s ease-out;
6230
- transition: color 0.2s ease-out, -webkit-transform 0.2s ease-out;
6231
- transition: transform 0.2s ease-out, color 0.2s ease-out;
6232
- transition: transform 0.2s ease-out, color 0.2s ease-out, -webkit-transform 0.2s ease-out;
6233
- -webkit-transform-origin: 0% 100%;
6234
- transform-origin: 0% 100%;
6235
- text-align: initial;
6236
- -webkit-transform: translateY(12px);
6237
- transform: translateY(12px);
6238
- }
6239
- .input-field > label:not(.label-icon).active {
6240
- -webkit-transform: translateY(-14px) scale(0.8);
6241
- transform: translateY(-14px) scale(0.8);
6242
- -webkit-transform-origin: 0 0;
6243
- transform-origin: 0 0;
6244
- }
6245
- .input-field > label:not(.active) + input[type=date], .input-field > label:not(.active) + input[type=datetime-local], .input-field > label:not(.active) + input[type=month], .input-field > label:not(.active) + input[type=time] {
6246
- color: transparent;
6247
- }
6248
- .input-field > input[type]:-webkit-autofill:not(.browser-default):not([type=search]) + label, .input-field > input[type=date]:not(.browser-default) + label, .input-field > input[type=time]:not(.browser-default) + label {
6249
- -webkit-transform: translateY(-14px) scale(0.8);
6250
- transform: translateY(-14px) scale(0.8);
6251
- -webkit-transform-origin: 0 0;
6252
- transform-origin: 0 0;
5262
+ -webkit-transform-origin: top left;
5263
+ transform-origin: top left;
5264
+ -webkit-transition: left 0.2s ease-out, top 0.2s ease-out, -webkit-transform 0.2s ease-out;
5265
+ transition: left 0.2s ease-out, top 0.2s ease-out, -webkit-transform 0.2s ease-out;
5266
+ transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out;
5267
+ transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
5268
+ }
5269
+ .input-field .supporting-text {
5270
+ color: var(--font-color-medium);
5271
+ font-size: 12px;
5272
+ padding: 0 16px;
5273
+ margin-top: 4px;
6253
5274
  }
6254
- .input-field .helper-text {
6255
- position: relative;
6256
- min-height: 18px;
6257
- display: block;
5275
+ .input-field .character-counter {
5276
+ color: var(--font-color-medium);
6258
5277
  font-size: 12px;
6259
- color: rgba(0, 0, 0, 0.54);
5278
+ float: right;
5279
+ padding: 0 16px;
5280
+ margin-top: 4px;
6260
5281
  }
6261
- .input-field .helper-text::after {
6262
- opacity: 1;
5282
+ .input-field .prefix {
6263
5283
  position: absolute;
6264
- top: 0;
6265
- left: 0;
5284
+ left: 12px;
5285
+ top: 16px;
5286
+ -webkit-user-select: none;
5287
+ -moz-user-select: none;
5288
+ -ms-user-select: none;
5289
+ user-select: none;
5290
+ display: -webkit-box;
5291
+ display: -webkit-flex;
5292
+ display: -ms-flexbox;
5293
+ display: flex;
5294
+ -webkit-align-self: center;
5295
+ -ms-flex-item-align: center;
5296
+ align-self: center;
6266
5297
  }
6267
- .input-field .prefix, .input-field .suffix {
5298
+ .input-field .suffix {
6268
5299
  position: absolute;
6269
- width: 3rem;
6270
- font-size: 2rem;
6271
- -webkit-transition: color 0.2s;
6272
- transition: color 0.2s;
6273
- top: 0.5rem;
6274
- }
6275
- .input-field .prefix.active, .input-field .suffix.active {
6276
- color: #26a69a;
6277
- }
6278
- .input-field .prefix ~ input,
6279
- .input-field .prefix ~ textarea,
6280
- .input-field .prefix ~ .select-wrapper,
6281
- .input-field .prefix ~ label,
6282
- .input-field .prefix ~ .validate ~ label,
6283
- .input-field .prefix ~ .helper-text,
6284
- .input-field .prefix ~ .autocomplete-content {
6285
- margin-left: 3rem;
6286
- width: 92%;
6287
- width: calc(100% - 3rem);
5300
+ right: 12px;
5301
+ top: 16px;
5302
+ -webkit-user-select: none;
5303
+ -moz-user-select: none;
5304
+ -ms-user-select: none;
5305
+ user-select: none;
5306
+ }
5307
+ .input-field .prefix ~ input, .input-field .prefix ~ textarea {
5308
+ padding-left: 52px;
5309
+ }
5310
+ .input-field .suffix ~ input, .input-field .suffix ~ textarea {
5311
+ padding-right: 52px;
6288
5312
  }
6289
5313
  .input-field .prefix ~ label {
6290
- margin-left: 3rem;
5314
+ left: 52px;
6291
5315
  }
6292
- @media only screen and (max-width : 992.99px) {
6293
- .input-field .prefix ~ input,
6294
- .input-field .suffix ~ input {
6295
- width: 86%;
6296
- width: calc(100% - 3rem);
6297
- }
5316
+ .input-field.outlined input, .input-field.outlined textarea {
5317
+ padding-top: 0;
5318
+ background-color: var(--background-color);
5319
+ border: 1px solid var(--font-color-medium);
5320
+ border-radius: 4px;
6298
5321
  }
6299
- @media only screen and (max-width : 600.99px) {
6300
- .input-field .prefix ~ input,
6301
- .input-field .suffix ~ input {
6302
- width: 80%;
6303
- width: calc(100% - 3rem);
6304
- }
5322
+ .input-field.outlined input:focus:not([readonly]), .input-field.outlined textarea:focus:not([readonly]) {
5323
+ border: 2px solid var(--primary-color);
5324
+ padding-top: 0;
5325
+ margin-left: -1px;
6305
5326
  }
6306
- .input-field .suffix {
6307
- right: 0;
5327
+ .input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined textarea:focus:not([readonly]) + label {
5328
+ color: var(--primary-color);
6308
5329
  }
6309
- .input-field .suffix ~ input,
6310
- .input-field .suffix ~ textarea,
6311
- .input-field .suffix ~ .select-wrapper,
6312
- .input-field .suffix ~ label,
6313
- .input-field .suffix ~ .validate ~ label,
6314
- .input-field .suffix ~ .helper-text,
6315
- .input-field .suffix ~ .autocomplete-content {
6316
- margin-right: 3rem;
6317
- width: 92%;
6318
- width: calc(100% - 3rem);
5330
+ .input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined input:not(:placeholder-shown) + label, .input-field.outlined textarea:focus:not([readonly]) + label, .input-field.outlined textarea:not(:placeholder-shown) + label {
5331
+ top: -8px;
5332
+ left: 16px;
5333
+ margin-left: -4px;
5334
+ padding: 0 4px;
5335
+ background-color: var(--background-color);
6319
5336
  }
6320
- .input-field .suffix ~ label {
6321
- margin-right: 3rem;
5337
+ .input-field.outlined input:disabled, .input-field.outlined input[readonly=readonly], .input-field.outlined textarea:disabled, .input-field.outlined textarea[readonly=readonly] {
5338
+ color: rgba(var(--md_sys_color_on-surface), 0.38);
5339
+ border-color: rgba(var(--md_sys_color_on-surface), 0.12);
6322
5340
  }
6323
-
6324
- /* Search Field */
6325
- .input-field input[type=search] {
6326
- display: block;
6327
- line-height: inherit;
6328
- -webkit-transition: 0.3s background-color;
6329
- transition: 0.3s background-color;
5341
+ .input-field.error input, .input-field.error textarea {
5342
+ border-color: var(--error-color);
6330
5343
  }
6331
- .nav-wrapper .input-field input[type=search] {
6332
- height: inherit;
6333
- padding-left: 4rem;
6334
- width: calc(100% - 4rem);
6335
- border: 0;
6336
- -webkit-box-shadow: none;
6337
- box-shadow: none;
5344
+ .input-field.error input:focus:not([readonly]), .input-field.error textarea:focus:not([readonly]) {
5345
+ border-color: var(--error-color);
6338
5346
  }
6339
- .input-field input[type=search]:focus:not(.browser-default) {
6340
- background-color: #fff;
6341
- border: 0;
6342
- -webkit-box-shadow: none;
6343
- box-shadow: none;
6344
- color: #444;
5347
+ .input-field.error input:focus:not([readonly]) + label, .input-field.error textarea:focus:not([readonly]) + label {
5348
+ color: var(--error-color);
6345
5349
  }
6346
- .input-field input[type=search]:focus:not(.browser-default) + label i, .input-field input[type=search]:focus:not(.browser-default) ~ .mdi-navigation-close, .input-field input[type=search]:focus:not(.browser-default) ~ .material-icons {
6347
- color: #444;
5350
+ .input-field.error label {
5351
+ color: var(--error-color);
6348
5352
  }
6349
- .input-field input[type=search] + .label-icon {
6350
- -webkit-transform: none;
6351
- transform: none;
6352
- left: 1rem;
5353
+ .input-field.error .supporting-text {
5354
+ color: var(--error-color);
6353
5355
  }
6354
- .input-field input[type=search] ~ .mdi-navigation-close, .input-field input[type=search] ~ .material-icons {
5356
+ .input-field.error .suffix {
5357
+ color: var(--error-color);
5358
+ }
5359
+
5360
+ /* Search Field */
5361
+ .searchbar .prefix {
6355
5362
  position: absolute;
5363
+ padding-left: 1rem;
6356
5364
  top: 0;
6357
- right: 1rem;
6358
- color: transparent;
6359
- cursor: pointer;
6360
- font-size: 2rem;
6361
- -webkit-transition: 0.3s color;
6362
- transition: 0.3s color;
5365
+ -webkit-user-select: none;
5366
+ -moz-user-select: none;
5367
+ -ms-user-select: none;
5368
+ user-select: none;
5369
+ display: -webkit-box;
5370
+ display: -webkit-flex;
5371
+ display: -ms-flexbox;
5372
+ display: flex;
5373
+ -webkit-align-self: center;
5374
+ -ms-flex-item-align: center;
5375
+ align-self: center;
5376
+ }
5377
+ .searchbar > input {
5378
+ border-width: 0;
5379
+ background-color: transparent;
5380
+ padding-left: 3rem;
5381
+ }
5382
+
5383
+ .searchbar.has-sidebar {
5384
+ margin-left: 0;
5385
+ }
5386
+ @media only screen and (min-width : 993px) {
5387
+ .searchbar.has-sidebar {
5388
+ margin-left: 300px;
5389
+ }
6363
5390
  }
6364
5391
 
5392
+ /*
5393
+ .input-field input[type=search] {
5394
+ display: block;
5395
+ line-height: inherit;
5396
+
5397
+ .nav-wrapper & {
5398
+ height: inherit;
5399
+ padding-left: 4rem;
5400
+ width: calc(100% - 4rem);
5401
+ border: 0;
5402
+ box-shadow: none;
5403
+ }
5404
+ &:focus:not(.browser-default) {
5405
+ border: 0;
5406
+ box-shadow: none;
5407
+ }
5408
+ & + .label-icon {
5409
+ transform: none;
5410
+ left: 1rem;
5411
+ }
5412
+ & ~ .mdi-navigation-close,
5413
+ & ~ .material-icons {
5414
+ position: absolute;
5415
+ top: 0;
5416
+ right: 1rem;
5417
+ color: transparent;
5418
+ cursor: pointer;
5419
+ font-size: $input-icon-size;
5420
+ }
5421
+ }
5422
+ */
6365
5423
  /* Textarea */
6366
5424
  textarea {
6367
5425
  width: 100%;
@@ -6389,9 +5447,9 @@ textarea.materialize-textarea {
6389
5447
  z-index: -1;
6390
5448
  }
6391
5449
 
6392
- /* Autocomplete */
5450
+ /* Autocomplete Items */
6393
5451
  .autocomplete-content li .highlight {
6394
- color: #444;
5452
+ color: var(--font-color-main);
6395
5453
  }
6396
5454
  .autocomplete-content li img {
6397
5455
  height: 40px;
@@ -6399,11 +5457,6 @@ textarea.materialize-textarea {
6399
5457
  margin: 5px 15px;
6400
5458
  }
6401
5459
 
6402
- /* Character Counter */
6403
- .character-counter {
6404
- min-height: 18px;
6405
- }
6406
-
6407
5460
  /* Radio Buttons
6408
5461
  ========================================================================== */
6409
5462
  [type=radio]:not(:checked),
@@ -6456,7 +5509,7 @@ textarea.materialize-textarea {
6456
5509
 
6457
5510
  [type=radio]:not(:checked) + span:before,
6458
5511
  [type=radio]:not(:checked) + span:after {
6459
- border: 2px solid #5a5a5a;
5512
+ border: 2px solid var(--font-color-medium);
6460
5513
  }
6461
5514
 
6462
5515
  [type=radio]:not(:checked) + span:after {
@@ -6472,12 +5525,12 @@ textarea.materialize-textarea {
6472
5525
  [type=radio]:checked + span:after,
6473
5526
  [type=radio].with-gap:checked + span:before,
6474
5527
  [type=radio].with-gap:checked + span:after {
6475
- border: 2px solid #26a69a;
5528
+ border: 2px solid var(--primary-color);
6476
5529
  }
6477
5530
 
6478
5531
  [type=radio]:checked + span:after,
6479
5532
  [type=radio].with-gap:checked + span:after {
6480
- background-color: #26a69a;
5533
+ background-color: var(--primary-color);
6481
5534
  }
6482
5535
 
6483
5536
  [type=radio]:checked + span:after {
@@ -6493,38 +5546,38 @@ textarea.materialize-textarea {
6493
5546
 
6494
5547
  /* Focused styles */
6495
5548
  [type=radio].tabbed:focus + span:before {
6496
- -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
6497
- box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
5549
+ -webkit-box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
5550
+ box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
6498
5551
  }
6499
5552
 
6500
5553
  /* Disabled Radio With gap */
6501
5554
  [type=radio].with-gap:disabled:checked + span:before {
6502
- border: 2px solid rgba(0, 0, 0, 0.42);
5555
+ border: 2px solid var(--font-color-disabled);
6503
5556
  }
6504
5557
 
6505
5558
  [type=radio].with-gap:disabled:checked + span:after {
6506
5559
  border: none;
6507
- background-color: rgba(0, 0, 0, 0.42);
5560
+ background-color: var(--font-color-disabled);
6508
5561
  }
6509
5562
 
6510
5563
  /* Disabled style */
6511
5564
  [type=radio]:disabled:not(:checked) + span:before,
6512
5565
  [type=radio]:disabled:checked + span:before {
6513
5566
  background-color: transparent;
6514
- border-color: rgba(0, 0, 0, 0.42);
5567
+ border-color: var(--font-color-disabled);
6515
5568
  }
6516
5569
 
6517
5570
  [type=radio]:disabled + span {
6518
- color: rgba(0, 0, 0, 0.42);
5571
+ color: var(--font-color-disabled);
6519
5572
  }
6520
5573
 
6521
5574
  [type=radio]:disabled:not(:checked) + span:before {
6522
- border-color: rgba(0, 0, 0, 0.42);
5575
+ border-color: var(--font-color-disabled);
6523
5576
  }
6524
5577
 
6525
5578
  [type=radio]:disabled:checked + span:after {
6526
- background-color: rgba(0, 0, 0, 0.42);
6527
- border-color: #949494;
5579
+ background-color: var(--font-color-disabled);
5580
+ border-color: var(--font-color-disabled);
6528
5581
  }
6529
5582
 
6530
5583
  /* Checkboxes
@@ -6561,7 +5614,7 @@ textarea.materialize-textarea {
6561
5614
  width: 18px;
6562
5615
  height: 18px;
6563
5616
  z-index: 0;
6564
- border: 2px solid #5a5a5a;
5617
+ border: 2px solid var(--font-color-medium);
6565
5618
  border-radius: 1px;
6566
5619
  margin-top: 3px;
6567
5620
  -webkit-transition: 0.2s;
@@ -6574,16 +5627,16 @@ textarea.materialize-textarea {
6574
5627
  }
6575
5628
  [type=checkbox]:not(:checked):disabled + span:not(.lever):before {
6576
5629
  border: none;
6577
- background-color: rgba(0, 0, 0, 0.42);
5630
+ background-color: var(--font-color-disabled);
6578
5631
  }
6579
5632
  [type=checkbox].tabbed:focus + span:not(.lever):after {
6580
5633
  -webkit-transform: scale(1);
6581
5634
  transform: scale(1);
6582
5635
  border: 0;
6583
5636
  border-radius: 50%;
6584
- -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
6585
- box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
6586
- background-color: rgba(0, 0, 0, 0.1);
5637
+ -webkit-box-shadow: 0 0 0 10px var(--focus-color);
5638
+ box-shadow: 0 0 0 10px var(--focus-color);
5639
+ background-color: var(--focus-color);
6587
5640
  }
6588
5641
 
6589
5642
  [type=checkbox]:checked + span:not(.lever):before {
@@ -6593,8 +5646,8 @@ textarea.materialize-textarea {
6593
5646
  height: 22px;
6594
5647
  border-top: 2px solid transparent;
6595
5648
  border-left: 2px solid transparent;
6596
- border-right: 2px solid #26a69a;
6597
- border-bottom: 2px solid #26a69a;
5649
+ border-right: 2px solid var(--primary-color);
5650
+ border-bottom: 2px solid var(--primary-color);
6598
5651
  -webkit-transform: rotate(40deg);
6599
5652
  transform: rotate(40deg);
6600
5653
  -webkit-backface-visibility: hidden;
@@ -6603,8 +5656,8 @@ textarea.materialize-textarea {
6603
5656
  transform-origin: 100% 100%;
6604
5657
  }
6605
5658
  [type=checkbox]:checked:disabled + span:before {
6606
- border-right: 2px solid rgba(0, 0, 0, 0.42);
6607
- border-bottom: 2px solid rgba(0, 0, 0, 0.42);
5659
+ border-right: 2px solid var(--font-color-disabled);
5660
+ border-bottom: 2px solid var(--font-color-disabled);
6608
5661
  }
6609
5662
 
6610
5663
  /* Indeterminate checkbox */
@@ -6615,7 +5668,7 @@ textarea.materialize-textarea {
6615
5668
  height: 22px;
6616
5669
  border-top: none;
6617
5670
  border-left: none;
6618
- border-right: 2px solid #26a69a;
5671
+ border-right: 2px solid var(--primary-color);
6619
5672
  border-bottom: none;
6620
5673
  -webkit-transform: rotate(90deg);
6621
5674
  transform: rotate(90deg);
@@ -6625,7 +5678,7 @@ textarea.materialize-textarea {
6625
5678
  transform-origin: 100% 100%;
6626
5679
  }
6627
5680
  [type=checkbox]:indeterminate:disabled + span:not(.lever):before {
6628
- border-right: 2px solid rgba(0, 0, 0, 0.42);
5681
+ border-right: 2px solid var(--font-color-disabled);
6629
5682
  background-color: transparent;
6630
5683
  }
6631
5684
 
@@ -6657,7 +5710,7 @@ textarea.materialize-textarea {
6657
5710
  height: 20px;
6658
5711
  width: 20px;
6659
5712
  background-color: transparent;
6660
- border: 2px solid #5a5a5a;
5713
+ border: 2px solid var(--font-color-medium);
6661
5714
  top: 0px;
6662
5715
  z-index: 0;
6663
5716
  }
@@ -6668,8 +5721,8 @@ textarea.materialize-textarea {
6668
5721
  height: 13px;
6669
5722
  border-top: 2px solid transparent;
6670
5723
  border-left: 2px solid transparent;
6671
- border-right: 2px solid #fff;
6672
- border-bottom: 2px solid #fff;
5724
+ border-right: 2px solid var(--font-on-primary-color-main);
5725
+ border-bottom: 2px solid var(--font-on-primary-color-main);
6673
5726
  -webkit-transform: rotateZ(37deg);
6674
5727
  transform: rotateZ(37deg);
6675
5728
  -webkit-transform-origin: 100% 100%;
@@ -6679,19 +5732,19 @@ textarea.materialize-textarea {
6679
5732
  top: 0;
6680
5733
  width: 20px;
6681
5734
  height: 20px;
6682
- border: 2px solid #26a69a;
6683
- background-color: #26a69a;
5735
+ border: 2px solid var(--primary-color);
5736
+ background-color: var(--primary-color);
6684
5737
  z-index: 0;
6685
5738
  }
6686
5739
  [type=checkbox].filled-in.tabbed:focus + span:not(.lever):after {
6687
5740
  border-radius: 2px;
6688
- border-color: #5a5a5a;
6689
- background-color: rgba(0, 0, 0, 0.1);
5741
+ border-color: var(--font-color-medium);
5742
+ background-color: var(--focus-color);
6690
5743
  }
6691
5744
  [type=checkbox].filled-in.tabbed:checked:focus + span:not(.lever):after {
6692
5745
  border-radius: 2px;
6693
- background-color: #26a69a;
6694
- border-color: #26a69a;
5746
+ background-color: var(--primary-color);
5747
+ border-color: var(--primary-color);
6695
5748
  }
6696
5749
  [type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):before {
6697
5750
  background-color: transparent;
@@ -6699,14 +5752,14 @@ textarea.materialize-textarea {
6699
5752
  }
6700
5753
  [type=checkbox].filled-in:disabled:not(:checked) + span:not(.lever):after {
6701
5754
  border-color: transparent;
6702
- background-color: #949494;
5755
+ background-color: var(--font-color-disabled);
6703
5756
  }
6704
5757
  [type=checkbox].filled-in:disabled:checked + span:not(.lever):before {
6705
5758
  background-color: transparent;
6706
5759
  }
6707
5760
  [type=checkbox].filled-in:disabled:checked + span:not(.lever):after {
6708
- background-color: #949494;
6709
- border-color: #949494;
5761
+ background-color: var(--font-color-disabled);
5762
+ border-color: var(--font-color-disabled);
6710
5763
  }
6711
5764
 
6712
5765
  /* Switch
@@ -6729,14 +5782,14 @@ textarea.materialize-textarea {
6729
5782
  width: 0;
6730
5783
  height: 0;
6731
5784
  }
6732
- .switch label input[type=checkbox]:checked:not([disabled]) {
6733
- background-color: #84c7c1;
5785
+ .switch label input[type=checkbox]:checked + .lever {
5786
+ background-color: rgba(var(--primary-color-numeric), 0.32);
6734
5787
  }
6735
5788
  .switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
6736
5789
  left: 18px;
6737
5790
  }
6738
5791
  .switch label input[type=checkbox]:checked + .lever:after {
6739
- background-color: #26a69a;
5792
+ background-color: var(--primary-color);
6740
5793
  }
6741
5794
 
6742
5795
  .switch label .lever {
@@ -6745,7 +5798,7 @@ textarea.materialize-textarea {
6745
5798
  position: relative;
6746
5799
  width: 36px;
6747
5800
  height: 14px;
6748
- background-color: rgba(0, 0, 0, 0.38);
5801
+ background-color: var(--slider-track-color);
6749
5802
  border-radius: 15px;
6750
5803
  margin-right: 10px;
6751
5804
  -webkit-transition: background 0.3s ease;
@@ -6767,88 +5820,125 @@ textarea.materialize-textarea {
6767
5820
  transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease;
6768
5821
  transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
6769
5822
  }
6770
- .switch label .lever:before {
6771
- background-color: rgba(38, 166, 154, 0.15);
6772
- }
6773
5823
  .switch label .lever:after {
6774
- background-color: #F1F1F1;
5824
+ background-color: var(--switch-thumb-off-color);
6775
5825
  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
6776
5826
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
6777
5827
  }
6778
5828
 
6779
- input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
6780
- input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
5829
+ input[type=checkbox]:not(:disabled) ~ .lever:active:before,
5830
+ input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before,
5831
+ input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
6781
5832
  -webkit-transform: scale(2.4);
6782
5833
  transform: scale(2.4);
6783
- background-color: rgba(38, 166, 154, 0.15);
5834
+ }
5835
+
5836
+ input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {
5837
+ background-color: var(--primary-color-hover-opaque);
5838
+ }
5839
+
5840
+ input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
5841
+ input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
5842
+ background-color: var(--primary-color-focus-opaque);
5843
+ }
5844
+
5845
+ input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
5846
+ background-color: var(--hover-color);
6784
5847
  }
6785
5848
 
6786
5849
  input[type=checkbox]:not(:disabled) ~ .lever:active:before,
6787
5850
  input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
6788
- -webkit-transform: scale(2.4);
6789
- transform: scale(2.4);
6790
- background-color: rgba(0, 0, 0, 0.08);
5851
+ background-color: var(--focus-color);
6791
5852
  }
6792
5853
 
6793
5854
  .switch input[type=checkbox][disabled] + .lever {
6794
5855
  cursor: default;
6795
- background-color: rgba(0, 0, 0, 0.12);
6796
- }
6797
-
6798
- .switch label input[type=checkbox][disabled] + .lever:after,
6799
- .switch label input[type=checkbox][disabled]:checked + .lever:after {
6800
- background-color: #949494;
5856
+ opacity: 0.5;
6801
5857
  }
6802
5858
 
6803
5859
  /* Select Field
6804
5860
  ========================================================================== */
6805
5861
  select.browser-default {
6806
5862
  opacity: 1;
5863
+ color: var(--font-color-main);
6807
5864
  }
6808
5865
 
6809
5866
  select {
6810
5867
  opacity: 0;
6811
- background-color: rgba(255, 255, 255, 0.9);
5868
+ background-color: var(--surface-color);
6812
5869
  width: 100%;
6813
5870
  padding: 5px;
6814
- border: 1px solid #f2f2f2;
5871
+ border: 1px solid var(--separator-color);
6815
5872
  border-radius: 2px;
6816
5873
  height: 3rem;
6817
5874
  }
6818
5875
 
6819
- .select-label {
6820
- position: absolute;
6821
- }
6822
-
6823
5876
  .select-wrapper {
5877
+ /*
5878
+ &.valid .helper-text[data-success],
5879
+ &.invalid ~ .helper-text[data-error] {
5880
+ @extend %hidden-text;
5881
+ }
5882
+
5883
+ &.valid {
5884
+ & > input.select-dropdown {
5885
+ @extend %valid-input-style;
5886
+ }
5887
+ & ~ .helper-text:after {
5888
+ //@extend %custom-success-message;
5889
+ }
5890
+ }
5891
+
5892
+ &.invalid {
5893
+ & > input.select-dropdown,
5894
+ & > input.select-dropdown:focus {
5895
+ @extend %invalid-input-style;
5896
+ }
5897
+ & ~ .helper-text:after {
5898
+ //@extend %custom-error-message;
5899
+ }
5900
+ }
5901
+
5902
+ &.valid + label,
5903
+ &.invalid + label {
5904
+ width: 100%;
5905
+ pointer-events: none;
5906
+ }
5907
+ & + label:after {
5908
+ //@extend %input-after-style;
5909
+ }
5910
+ */
6824
5911
  position: relative;
6825
- }
6826
- .select-wrapper.valid + label, .select-wrapper.invalid + label {
6827
- width: 100%;
6828
- pointer-events: none;
6829
- }
6830
- .select-wrapper input.select-dropdown {
6831
- position: relative;
6832
- cursor: pointer;
6833
- background-color: transparent;
6834
- border: none;
6835
- border-bottom: 1px solid #9e9e9e;
6836
- outline: none;
6837
- height: 3rem;
6838
- line-height: 3rem;
6839
- width: 100%;
6840
- font-size: 16px;
6841
- margin: 0 0 8px 0;
6842
- padding: 0;
6843
- display: block;
6844
- -webkit-user-select: none;
6845
- -moz-user-select: none;
6846
- -ms-user-select: none;
6847
- user-select: none;
6848
- z-index: 1;
6849
- }
6850
- .select-wrapper input.select-dropdown:focus {
6851
- border-bottom: 1px solid #26a69a;
5912
+ /*
5913
+ input.select-dropdown {
5914
+ &:focus {
5915
+ border-bottom: 1px solid $input-focus-color;
5916
+ }
5917
+ position: relative;
5918
+ cursor: pointer;
5919
+ background-color: transparent;
5920
+ border: none;
5921
+ border-bottom: $input-border;
5922
+ outline: none;
5923
+ height: $input-height;
5924
+ line-height: $input-height;
5925
+ width: 100%;
5926
+ font-size: $input-font-size;
5927
+ margin: $input-margin;
5928
+ padding: 0;
5929
+ display: block;
5930
+ user-select:none;
5931
+ z-index: 1;
5932
+ color: $select-input-color;
5933
+ }
5934
+ */
5935
+ /*
5936
+ & + label {
5937
+ position: absolute;
5938
+ top: -26px;
5939
+ font-size: $label-font-size;
5940
+ }
5941
+ */
6852
5942
  }
6853
5943
  .select-wrapper .caret {
6854
5944
  position: absolute;
@@ -6857,12 +5947,7 @@ select {
6857
5947
  bottom: 0;
6858
5948
  margin: auto 0;
6859
5949
  z-index: 0;
6860
- fill: rgba(0, 0, 0, 0.87);
6861
- }
6862
- .select-wrapper + label {
6863
- position: absolute;
6864
- top: -26px;
6865
- font-size: 0.8rem;
5950
+ fill: var(--font-color-main);
6866
5951
  }
6867
5952
  .select-wrapper .hide-select {
6868
5953
  width: 0;
@@ -6874,18 +5959,18 @@ select {
6874
5959
  }
6875
5960
 
6876
5961
  select:disabled {
6877
- color: rgba(0, 0, 0, 0.42);
5962
+ color: var(--font-color-disabled);
6878
5963
  }
6879
5964
 
6880
5965
  .select-wrapper.disabled + label {
6881
- color: rgba(0, 0, 0, 0.42);
5966
+ color: var(--font-color-disabled);
6882
5967
  }
6883
5968
  .select-wrapper.disabled .caret {
6884
- fill: rgba(0, 0, 0, 0.42);
5969
+ fill: var(--font-color-disabled);
6885
5970
  }
6886
5971
 
6887
5972
  .select-wrapper input.select-dropdown:disabled {
6888
- color: rgba(0, 0, 0, 0.42);
5973
+ color: var(--font-color-disabled);
6889
5974
  cursor: default;
6890
5975
  -webkit-user-select: none;
6891
5976
  -moz-user-select: none;
@@ -6894,47 +5979,43 @@ select:disabled {
6894
5979
  }
6895
5980
 
6896
5981
  .select-wrapper i {
6897
- color: rgba(0, 0, 0, 0.3);
5982
+ color: var(--font-color-disabled);
6898
5983
  }
6899
5984
 
6900
5985
  .select-dropdown li.disabled,
6901
5986
  .select-dropdown li.disabled > span,
6902
5987
  .select-dropdown li.optgroup {
6903
- color: rgba(0, 0, 0, 0.3);
5988
+ color: var(--font-color-disabled);
6904
5989
  background-color: transparent;
6905
5990
  }
6906
5991
 
6907
5992
  body.keyboard-focused .select-dropdown.dropdown-content li:focus {
6908
- background-color: rgba(0, 0, 0, 0.08);
5993
+ background-color: var(--focus-color);
6909
5994
  }
6910
5995
 
6911
- .select-dropdown.dropdown-content li:hover {
6912
- background-color: rgba(0, 0, 0, 0.08);
5996
+ .select-dropdown.dropdown-content li:hover:not(.disabled) {
5997
+ background-color: var(--hover-color);
6913
5998
  }
6914
- .select-dropdown.dropdown-content li.selected {
6915
- background-color: rgba(0, 0, 0, 0.03);
5999
+ .select-dropdown.dropdown-content li.selected:not(.disabled) {
6000
+ background-color: var(--focus-color);
6916
6001
  }
6917
6002
 
6003
+ /*
6004
+ // Prefix Icons
6918
6005
  .prefix ~ .select-wrapper {
6919
6006
  margin-left: 3rem;
6920
6007
  width: 92%;
6921
6008
  width: calc(100% - 3rem);
6922
6009
  }
6923
-
6924
- .prefix ~ label {
6925
- margin-left: 3rem;
6926
- }
6927
-
6010
+ .prefix ~ label { margin-left: 3rem; }
6011
+ // Suffix Icons
6928
6012
  .suffix ~ .select-wrapper {
6929
6013
  margin-right: 3rem;
6930
6014
  width: 92%;
6931
6015
  width: calc(100% - 3rem);
6932
6016
  }
6933
-
6934
- .suffix ~ label {
6935
- margin-right: 3rem;
6936
- }
6937
-
6017
+ .suffix ~ label { margin-right: 3rem; }
6018
+ */
6938
6019
  .select-dropdown li img {
6939
6020
  height: 40px;
6940
6021
  width: 40px;
@@ -6943,13 +6024,13 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
6943
6024
  }
6944
6025
 
6945
6026
  .select-dropdown li.optgroup {
6946
- border-top: 1px solid #eee;
6027
+ border-top: 1px solid var(--hover-color);
6947
6028
  }
6948
6029
  .select-dropdown li.optgroup.selected > span {
6949
- color: rgba(0, 0, 0, 0.7);
6030
+ color: var(--font-color-main);
6950
6031
  }
6951
6032
  .select-dropdown li.optgroup > span {
6952
- color: rgba(0, 0, 0, 0.4);
6033
+ color: var(--font-color-medium);
6953
6034
  }
6954
6035
  .select-dropdown li.optgroup ~ li.optgroup-option {
6955
6036
  padding-left: 1rem;
@@ -6958,17 +6039,18 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
6958
6039
  /* File Input
6959
6040
  ========================================================================== */
6960
6041
  .file-field {
6961
- position: relative;
6042
+ display: grid;
6043
+ grid-template-columns: -webkit-min-content auto;
6044
+ grid-template-columns: min-content auto;
6045
+ gap: 10px;
6962
6046
  }
6963
6047
  .file-field .file-path-wrapper {
6964
6048
  overflow: hidden;
6965
- padding-left: 10px;
6966
6049
  }
6967
6050
  .file-field input.file-path {
6968
6051
  width: 100%;
6969
6052
  }
6970
6053
  .file-field .btn, .file-field .btn-large, .file-field .btn-small {
6971
- float: left;
6972
6054
  height: 3rem;
6973
6055
  line-height: 3rem;
6974
6056
  }
@@ -6981,12 +6063,12 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
6981
6063
  right: 0;
6982
6064
  left: 0;
6983
6065
  bottom: 0;
6066
+ cursor: pointer;
6984
6067
  width: 100%;
6985
6068
  margin: 0;
6986
6069
  padding: 0;
6987
- font-size: 20px;
6988
- cursor: pointer;
6989
6070
  opacity: 0;
6071
+ font-size: 20px;
6990
6072
  filter: alpha(opacity=0);
6991
6073
  }
6992
6074
  .file-field input[type=file]::-webkit-file-upload-button {
@@ -7025,7 +6107,7 @@ input[type=range] + .thumb {
7025
6107
  height: 0;
7026
6108
  width: 0;
7027
6109
  border-radius: 50%;
7028
- background-color: #26a69a;
6110
+ background-color: var(--primary-color);
7029
6111
  margin-left: 7px;
7030
6112
  -webkit-transform-origin: 50% 50%;
7031
6113
  transform-origin: 50% 50%;
@@ -7036,7 +6118,7 @@ input[type=range] + .thumb .value {
7036
6118
  display: block;
7037
6119
  width: 30px;
7038
6120
  text-align: center;
7039
- color: #26a69a;
6121
+ color: var(--primary-color);
7040
6122
  font-size: 0;
7041
6123
  -webkit-transform: rotate(45deg);
7042
6124
  transform: rotate(45deg);
@@ -7045,7 +6127,7 @@ input[type=range] + .thumb.active {
7045
6127
  border-radius: 50% 50% 50% 0;
7046
6128
  }
7047
6129
  input[type=range] + .thumb.active .value {
7048
- color: #fff;
6130
+ color: var(--font-on-primary-color-main);
7049
6131
  margin-left: -1px;
7050
6132
  margin-top: 8px;
7051
6133
  font-size: 10px;
@@ -7057,7 +6139,7 @@ input[type=range] {
7057
6139
 
7058
6140
  input[type=range]::-webkit-slider-runnable-track {
7059
6141
  height: 3px;
7060
- background: #c2c0c2;
6142
+ background: var(--slider-track-color);
7061
6143
  border: none;
7062
6144
  }
7063
6145
 
@@ -7066,32 +6148,30 @@ input[type=range]::-webkit-slider-thumb {
7066
6148
  height: 14px;
7067
6149
  width: 14px;
7068
6150
  border-radius: 50%;
7069
- background: #26a69a;
6151
+ background: var(--primary-color);
7070
6152
  -webkit-transition: -webkit-box-shadow 0.3s;
7071
6153
  transition: -webkit-box-shadow 0.3s;
7072
6154
  transition: box-shadow 0.3s;
7073
6155
  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
7074
6156
  -webkit-appearance: none;
7075
- background-color: #26a69a;
6157
+ background-color: var(--primary-color);
7076
6158
  -webkit-transform-origin: 50% 50%;
7077
6159
  transform-origin: 50% 50%;
7078
6160
  margin: -5px 0 0 0;
7079
6161
  }
7080
6162
 
7081
6163
  .keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
7082
- -webkit-box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26);
7083
- box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26);
6164
+ -webkit-box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
6165
+ box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
7084
6166
  }
7085
6167
 
7086
6168
  input[type=range] {
7087
- /* fix for FF unable to apply focus style bug */
7088
- border: 1px solid white;
7089
6169
  /*required for proper track sizing in FF*/
7090
6170
  }
7091
6171
 
7092
6172
  input[type=range]::-moz-range-track {
7093
6173
  height: 3px;
7094
- background: #c2c0c2;
6174
+ background: var(--slider-track-color);
7095
6175
  border: none;
7096
6176
  }
7097
6177
 
@@ -7104,7 +6184,7 @@ input[type=range]::-moz-range-thumb {
7104
6184
  height: 14px;
7105
6185
  width: 14px;
7106
6186
  border-radius: 50%;
7107
- background: #26a69a;
6187
+ background: var(--primary-color);
7108
6188
  -webkit-transition: -webkit-box-shadow 0.3s;
7109
6189
  transition: -webkit-box-shadow 0.3s;
7110
6190
  transition: box-shadow 0.3s;
@@ -7118,7 +6198,7 @@ input[type=range]:-moz-focusring {
7118
6198
  }
7119
6199
 
7120
6200
  .keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
7121
- box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26);
6201
+ box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
7122
6202
  }
7123
6203
 
7124
6204
  input[type=range]::-ms-track {
@@ -7130,12 +6210,14 @@ input[type=range]::-ms-track {
7130
6210
  color: transparent;
7131
6211
  }
7132
6212
 
7133
- input[type=range]::-ms-fill-lower {
7134
- background: #777;
6213
+ input[type=range]::-ms-fill-lower,
6214
+ input[type=range]::-moz-range-progress {
6215
+ background: var(--primary-color);
7135
6216
  }
7136
6217
 
7137
- input[type=range]::-ms-fill-upper {
7138
- background: #ddd;
6218
+ input[type=range]::-ms-fill-upper,
6219
+ input[type=range]::-moz-range-track {
6220
+ background: var(--slider-track-color);
7139
6221
  }
7140
6222
 
7141
6223
  input[type=range]::-ms-thumb {
@@ -7143,7 +6225,7 @@ input[type=range]::-ms-thumb {
7143
6225
  height: 14px;
7144
6226
  width: 14px;
7145
6227
  border-radius: 50%;
7146
- background: #26a69a;
6228
+ background: var(--primary-color);
7147
6229
  -webkit-transition: -webkit-box-shadow 0.3s;
7148
6230
  transition: -webkit-box-shadow 0.3s;
7149
6231
  transition: box-shadow 0.3s;
@@ -7151,7 +6233,7 @@ input[type=range]::-ms-thumb {
7151
6233
  }
7152
6234
 
7153
6235
  .keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
7154
- box-shadow: 0 0 0 10px rgba(38, 166, 154, 0.26);
6236
+ box-shadow: 0 0 0 10px var(--primary-color-focus-opaque);
7155
6237
  }
7156
6238
 
7157
6239
  /***************
@@ -7161,27 +6243,26 @@ input[type=range]::-ms-thumb {
7161
6243
  position: fixed;
7162
6244
  }
7163
6245
  .table-of-contents li {
7164
- padding: 2px 0;
6246
+ padding: 0;
7165
6247
  }
7166
6248
  .table-of-contents a {
7167
6249
  display: inline-block;
7168
- font-weight: 300;
7169
- color: #757575;
6250
+ font-weight: 400;
6251
+ color: var(--font-color-medium);
7170
6252
  padding-left: 16px;
7171
- height: 1.5rem;
7172
- line-height: 1.5rem;
7173
- letter-spacing: 0.4;
7174
- display: inline-block;
6253
+ height: 2rem;
6254
+ line-height: 2rem;
6255
+ border-left: 1px solid var(--separator-color);
7175
6256
  }
7176
6257
  .table-of-contents a:hover {
7177
- color: #a8a8a8;
6258
+ color: var(--font-color-main);
7178
6259
  padding-left: 15px;
7179
- border-left: 1px solid #ee6e73;
7180
6260
  }
7181
6261
  .table-of-contents a.active {
6262
+ color: var(--primary-color);
7182
6263
  font-weight: 500;
7183
6264
  padding-left: 14px;
7184
- border-left: 2px solid #ee6e73;
6265
+ border-left: 2px solid var(--primary-color);
7185
6266
  }
7186
6267
 
7187
6268
  .sidenav {
@@ -7194,7 +6275,7 @@ input[type=range]::-ms-thumb {
7194
6275
  transform: translateX(-100%);
7195
6276
  height: 100vh;
7196
6277
  padding-bottom: 60px;
7197
- background-color: #fff;
6278
+ background-color: var(--background-color-level-16dp-solid);
7198
6279
  z-index: 999;
7199
6280
  overflow-y: auto;
7200
6281
  will-change: transform;
@@ -7218,11 +6299,13 @@ input[type=range]::-ms-thumb {
7218
6299
  float: none;
7219
6300
  line-height: 48px;
7220
6301
  }
6302
+ .sidenav li:hover {
6303
+ background-color: var(--hover-color);
6304
+ }
7221
6305
  .sidenav li.active {
7222
- background-color: rgba(0, 0, 0, 0.05);
6306
+ background-color: var(--focus-color);
7223
6307
  }
7224
6308
  .sidenav li > a {
7225
- color: rgba(0, 0, 0, 0.87);
7226
6309
  display: block;
7227
6310
  font-size: 14px;
7228
6311
  font-weight: 500;
@@ -7230,31 +6313,19 @@ input[type=range]::-ms-thumb {
7230
6313
  line-height: 48px;
7231
6314
  padding: 0 32px;
7232
6315
  }
7233
- .sidenav li > a:hover {
7234
- background-color: rgba(0, 0, 0, 0.05);
6316
+ .sidenav li > a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) {
6317
+ color: var(--font-color-main);
7235
6318
  }
7236
6319
  .sidenav li > a.btn, .sidenav li > a.btn-small, .sidenav li > a.btn-large, .sidenav li > a.btn-flat, .sidenav li > a.btn-floating {
7237
6320
  margin: 10px 15px;
7238
6321
  }
7239
- .sidenav li > a.btn, .sidenav li > a.btn-small, .sidenav li > a.btn-large, .sidenav li > a.btn-floating {
7240
- color: #fff;
7241
- }
7242
- .sidenav li > a.btn-flat {
7243
- color: #343434;
7244
- }
7245
- .sidenav li > a.btn:hover, .sidenav li > a.btn-small:hover, .sidenav li > a.btn-large:hover {
7246
- background-color: #2bbbad;
7247
- }
7248
- .sidenav li > a.btn-floating:hover {
7249
- background-color: #26a69a;
7250
- }
7251
6322
  .sidenav li > a > i, .sidenav li > a > [class^=mdi-], .sidenav li > a li > a > [class*=mdi-], .sidenav li > a > i.material-icons {
7252
6323
  float: left;
7253
6324
  height: 48px;
7254
6325
  line-height: 48px;
7255
6326
  margin: 0 32px 0 0;
7256
6327
  width: 24px;
7257
- color: rgba(0, 0, 0, 0.54);
6328
+ color: var(--font-color-medium);
7258
6329
  }
7259
6330
  .sidenav .divider {
7260
6331
  margin: 8px 0 0 0;
@@ -7262,7 +6333,7 @@ input[type=range]::-ms-thumb {
7262
6333
  .sidenav .subheader {
7263
6334
  cursor: initial;
7264
6335
  pointer-events: none;
7265
- color: rgba(0, 0, 0, 0.54);
6336
+ color: var(--font-color-medium);
7266
6337
  font-size: 14px;
7267
6338
  font-weight: 500;
7268
6339
  line-height: 48px;
@@ -7352,11 +6423,11 @@ input[type=range]::-ms-thumb {
7352
6423
  }
7353
6424
  .sidenav .collapsible-body > ul:not(.collapsible) > li.active,
7354
6425
  .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
7355
- background-color: #ee6e73;
6426
+ background-color: var(--primary-color);
7356
6427
  }
7357
- .sidenav .collapsible-body > ul:not(.collapsible) > li.active a,
7358
- .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a {
7359
- color: #fff;
6428
+ .sidenav .collapsible-body > ul:not(.collapsible) > li.active a:not(.btn):not(.btn-large):not(.btn-small),
6429
+ .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a:not(.btn):not(.btn-large):not(.btn-small) {
6430
+ color: var(--font-on-primary-color-main);
7360
6431
  }
7361
6432
 
7362
6433
  .sidenav .collapsible-body {
@@ -7436,7 +6507,7 @@ input[type=range]::-ms-thumb {
7436
6507
  width: 100%;
7437
6508
  height: 100%;
7438
6509
  opacity: 0;
7439
- border-color: #26a69a;
6510
+ border-color: var(--primary-color);
7440
6511
  }
7441
6512
 
7442
6513
  .spinner-blue,
@@ -7863,18 +6934,32 @@ input[type=range]::-ms-thumb {
7863
6934
  bottom: 0;
7864
6935
  }
7865
6936
  .slider.fullscreen ul.slides {
6937
+ padding-left: 0;
6938
+ list-style-type: none;
7866
6939
  height: 100%;
7867
6940
  }
7868
6941
  .slider.fullscreen ul.indicators {
6942
+ padding-left: 0;
6943
+ list-style-type: none;
7869
6944
  z-index: 2;
7870
6945
  bottom: 30px;
7871
6946
  }
6947
+ .slider.fullscreen ul.indicators .indicator-item {
6948
+ background-color: var(--carousel-indicator-color);
6949
+ }
6950
+ .slider.fullscreen ul.indicators .indicator-item.active {
6951
+ background-color: var(--carousel-indicator-active-color);
6952
+ }
7872
6953
  .slider .slides {
7873
- background-color: #9e9e9e;
6954
+ background-color: var(--surface-color);
7874
6955
  margin: 0;
7875
6956
  height: 400px;
6957
+ padding-left: 0;
6958
+ list-style-type: none;
7876
6959
  }
7877
6960
  .slider .slides li {
6961
+ padding-left: 0;
6962
+ list-style-type: none;
7878
6963
  opacity: 0;
7879
6964
  position: absolute;
7880
6965
  top: 0;
@@ -7899,12 +6984,14 @@ input[type=range]::-ms-thumb {
7899
6984
  opacity: 0;
7900
6985
  }
7901
6986
  .slider .slides li .caption p {
7902
- color: #e0e0e0;
6987
+ color: rgba(255, 255, 255, 0.75);
7903
6988
  }
7904
6989
  .slider .slides li.active {
7905
6990
  z-index: 2;
7906
6991
  }
7907
6992
  .slider .indicators {
6993
+ padding-left: 0;
6994
+ list-style-type: none;
7908
6995
  position: absolute;
7909
6996
  text-align: center;
7910
6997
  left: 0;
@@ -7924,7 +7011,7 @@ input[type=range]::-ms-thumb {
7924
7011
  top: 0;
7925
7012
  left: 0;
7926
7013
  cursor: pointer;
7927
- background-color: #e0e0e0;
7014
+ background-color: var(--slider-track-color);
7928
7015
  -webkit-transition: background-color 0.3s;
7929
7016
  transition: background-color 0.3s;
7930
7017
  border-radius: 50%;
@@ -7933,7 +7020,7 @@ input[type=range]::-ms-thumb {
7933
7020
  height: 100%;
7934
7021
  }
7935
7022
  .slider .indicators .indicator-item-btn.active {
7936
- background-color: #4CAF50;
7023
+ background-color: var(--primary-color);
7937
7024
  }
7938
7025
 
7939
7026
  .carousel {
@@ -7990,6 +7077,8 @@ input[type=range]::-ms-thumb {
7990
7077
  width: 100%;
7991
7078
  }
7992
7079
  .carousel .indicators {
7080
+ padding-left: 0;
7081
+ list-style-type: none;
7993
7082
  position: absolute;
7994
7083
  text-align: center;
7995
7084
  left: 0;
@@ -8004,13 +7093,13 @@ input[type=range]::-ms-thumb {
8004
7093
  height: 8px;
8005
7094
  width: 8px;
8006
7095
  margin: 24px 4px;
8007
- background-color: rgba(255, 255, 255, 0.5);
7096
+ background-color: var(--carousel-indicator-color);
8008
7097
  -webkit-transition: background-color 0.3s;
8009
7098
  transition: background-color 0.3s;
8010
7099
  border-radius: 50%;
8011
7100
  }
8012
7101
  .carousel .indicators .indicator-item.active {
8013
- background-color: #fff;
7102
+ background-color: var(--carousel-indicator-active-color);
8014
7103
  }
8015
7104
  .carousel.scrolling .carousel-item .materialboxed,
8016
7105
  .carousel .carousel-item:not(.active) .materialboxed {
@@ -8059,7 +7148,8 @@ input[type=range]::-ms-thumb {
8059
7148
  position: absolute;
8060
7149
  font-size: 1rem;
8061
7150
  border-radius: 50%;
8062
- background-color: #ee6e73;
7151
+ background-color: var(--secondary-color);
7152
+ color: var(--font-on-secondary-color-main);
8063
7153
  -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);
8064
7154
  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);
8065
7155
  width: 100%;
@@ -8090,7 +7180,7 @@ input[type=range]::-ms-thumb {
8090
7180
  width: 100%;
8091
7181
  height: 100%;
8092
7182
  border-radius: 50%;
8093
- background-color: #ffffff;
7183
+ background-color: var(--surface-color);
8094
7184
  }
8095
7185
  .tap-target-wave::before {
8096
7186
  -webkit-transform: scale(0);
@@ -8203,6 +7293,7 @@ input[type=range]::-ms-thumb {
8203
7293
  -ms-flex-direction: column;
8204
7294
  flex-direction: column;
8205
7295
  padding: 0;
7296
+ background-color: var(--surface-color);
8206
7297
  }
8207
7298
 
8208
7299
  .datepicker-controls {
@@ -8240,6 +7331,21 @@ input[type=range]::-ms-thumb {
8240
7331
  .datepicker-controls .select-month input {
8241
7332
  width: 80px;
8242
7333
  }
7334
+ .datepicker-controls .month-prev,
7335
+ .datepicker-controls .month-next {
7336
+ display: -webkit-inline-box;
7337
+ display: -webkit-inline-flex;
7338
+ display: -ms-inline-flexbox;
7339
+ display: inline-flex;
7340
+ -webkit-box-align: center;
7341
+ -webkit-align-items: center;
7342
+ -ms-flex-align: center;
7343
+ align-items: center;
7344
+ }
7345
+ .datepicker-controls .month-prev > svg,
7346
+ .datepicker-controls .month-next > svg {
7347
+ fill: var(--font-color-medium);
7348
+ }
8243
7349
 
8244
7350
  .month-prev, .month-next {
8245
7351
  margin-top: 4px;
@@ -8254,8 +7360,8 @@ input[type=range]::-ms-thumb {
8254
7360
  -webkit-flex: 1 auto;
8255
7361
  -ms-flex: 1 auto;
8256
7362
  flex: 1 auto;
8257
- background-color: #26a69a;
8258
- color: #fff;
7363
+ background-color: var(--primary-color);
7364
+ color: var(--font-on-primary-color-main);
8259
7365
  padding: 20px 22px;
8260
7366
  font-weight: 500;
8261
7367
  }
@@ -8263,7 +7369,7 @@ input[type=range]::-ms-thumb {
8263
7369
  display: block;
8264
7370
  font-size: 1.5rem;
8265
7371
  line-height: 25px;
8266
- color: rgba(255, 255, 255, 0.7);
7372
+ color: var(--font-on-primary-color-main);
8267
7373
  }
8268
7374
  .datepicker-date-display .date-text {
8269
7375
  display: block;
@@ -8297,21 +7403,22 @@ input[type=range]::-ms-thumb {
8297
7403
  }
8298
7404
  .datepicker-table abbr {
8299
7405
  text-decoration: none;
8300
- color: #999;
7406
+ color: var(--font-color-medium);
8301
7407
  }
8302
7408
  .datepicker-table td {
7409
+ color: var(--font-color-main);
8303
7410
  border-radius: 50%;
8304
7411
  padding: 0;
8305
7412
  }
8306
7413
  .datepicker-table td.is-today {
8307
- color: #26a69a;
7414
+ color: var(--primary-color);
8308
7415
  }
8309
7416
  .datepicker-table td.is-selected {
8310
- background-color: #26a69a;
8311
- color: #fff;
7417
+ background-color: var(--primary-color);
7418
+ color: var(--font-on-primary-color-main);
8312
7419
  }
8313
7420
  .datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {
8314
- color: rgba(0, 0, 0, 0.3);
7421
+ color: var(--font-color-disabled);
8315
7422
  pointer-events: none;
8316
7423
  }
8317
7424
 
@@ -8326,8 +7433,11 @@ input[type=range]::-ms-thumb {
8326
7433
  cursor: pointer;
8327
7434
  color: inherit;
8328
7435
  }
7436
+ .datepicker-day-button:hover {
7437
+ background-color: var(--primary-color-hover-opaque);
7438
+ }
8329
7439
  .datepicker-day-button:focus {
8330
- background-color: rgba(43, 161, 150, 0.25);
7440
+ background-color: var(--primary-color-focus-opaque);
8331
7441
  }
8332
7442
 
8333
7443
  /* Footer */
@@ -8349,12 +7459,12 @@ input[type=range]::-ms-thumb {
8349
7459
  .datepicker-clear,
8350
7460
  .datepicker-today,
8351
7461
  .datepicker-done {
8352
- color: #26a69a;
7462
+ color: var(--primary-color);
8353
7463
  padding: 0 1rem;
8354
7464
  }
8355
7465
 
8356
7466
  .datepicker-clear {
8357
- color: #F44336;
7467
+ color: var(--error-color);
8358
7468
  }
8359
7469
 
8360
7470
  /* Media Queries */
@@ -8404,7 +7514,7 @@ input[type=range]::-ms-thumb {
8404
7514
  }
8405
7515
 
8406
7516
  .text-primary {
8407
- color: rgb(255, 255, 255);
7517
+ color: var(--font-on-primary-color-main);
8408
7518
  }
8409
7519
 
8410
7520
  /* Clock Digital Display */
@@ -8414,7 +7524,7 @@ input[type=range]::-ms-thumb {
8414
7524
  -webkit-flex: 1 auto;
8415
7525
  -ms-flex: 1 auto;
8416
7526
  flex: 1 auto;
8417
- background-color: #26a69a;
7527
+ background-color: var(--primary-color);
8418
7528
  padding: 10px;
8419
7529
  font-weight: 300;
8420
7530
  }
@@ -8423,7 +7533,7 @@ input[type=range]::-ms-thumb {
8423
7533
  font-size: 4rem;
8424
7534
  font-weight: bold;
8425
7535
  text-align: center;
8426
- color: rgba(255, 255, 255, 0.6);
7536
+ color: var(--font-on-primary-color-medium);
8427
7537
  font-weight: 400;
8428
7538
  position: relative;
8429
7539
  -webkit-user-select: none;
@@ -8474,10 +7584,11 @@ input[type=text].text-primary {
8474
7584
  -webkit-flex: 2.5 auto;
8475
7585
  -ms-flex: 2.5 auto;
8476
7586
  flex: 2.5 auto;
7587
+ background-color: var(--surface-color);
8477
7588
  }
8478
7589
 
8479
7590
  .timepicker-plate {
8480
- background-color: #eee;
7591
+ background-color: var(--background-color-level-4dp);
8481
7592
  border-radius: 50%;
8482
7593
  width: 270px;
8483
7594
  height: 270px;
@@ -8507,7 +7618,7 @@ input[type=text].text-primary {
8507
7618
 
8508
7619
  .timepicker-tick {
8509
7620
  border-radius: 50%;
8510
- color: rgba(0, 0, 0, 0.87);
7621
+ color: var(--font-color-main);
8511
7622
  line-height: 40px;
8512
7623
  text-align: center;
8513
7624
  width: 40px;
@@ -8519,7 +7630,7 @@ input[type=text].text-primary {
8519
7630
 
8520
7631
  .timepicker-tick.active,
8521
7632
  .timepicker-tick:hover {
8522
- background-color: rgba(38, 166, 154, 0.25);
7633
+ background-color: var(--primary-color-hover-opaque);
8523
7634
  }
8524
7635
 
8525
7636
  .timepicker-dial {
@@ -8546,7 +7657,7 @@ input[type=text].text-primary {
8546
7657
  transition: opacity 175ms;
8547
7658
  }
8548
7659
  .timepicker-canvas line {
8549
- stroke: #26a69a;
7660
+ stroke: var(--primary-color);
8550
7661
  stroke-width: 4;
8551
7662
  stroke-linecap: round;
8552
7663
  }
@@ -8557,12 +7668,12 @@ input[type=text].text-primary {
8557
7668
 
8558
7669
  .timepicker-canvas-bearing {
8559
7670
  stroke: none;
8560
- fill: #26a69a;
7671
+ fill: var(--primary-color);
8561
7672
  }
8562
7673
 
8563
7674
  .timepicker-canvas-bg {
8564
7675
  stroke: none;
8565
- fill: #26a69a;
7676
+ fill: var(--primary-color);
8566
7677
  }
8567
7678
 
8568
7679
  /* Footer */
@@ -8580,11 +7691,11 @@ input[type=text].text-primary {
8580
7691
  }
8581
7692
 
8582
7693
  .timepicker-clear {
8583
- color: #F44336;
7694
+ color: var(--error-color);
8584
7695
  }
8585
7696
 
8586
7697
  .timepicker-close {
8587
- color: #26a69a;
7698
+ color: var(--primary-color);
8588
7699
  }
8589
7700
 
8590
7701
  .timepicker-clear,
@@ -8614,4 +7725,80 @@ input[type=text].text-primary {
8614
7725
  text-align: center;
8615
7726
  margin-top: 1.2rem;
8616
7727
  }
7728
+ }
7729
+ :root {
7730
+ --surface-color: #f3f6fc;
7731
+ --background-color: #ffffff;
7732
+ --font-color-main: rgba(0, 0, 0, 0.87);
7733
+ --font-color-medium: rgba(0, 0, 0, 0.56);
7734
+ --font-color-disabled: rgba(0, 0, 0, 0.38);
7735
+ --font-on-primary-color-main: rgba(255, 255, 255, 0.87);
7736
+ --font-on-primary-color-dark-main: rgba(255, 255, 255, 0.87);
7737
+ --font-on-primary-color-dark-medium: rgba(255, 255, 255, 0.60);
7738
+ --font-on-primary-color-medium: rgba(255, 255, 255, 0.60);
7739
+ --font-on-primary-color-disabled: rgba(255, 255, 255, 0.38);
7740
+ --font-on-secondary-color-main: rgba(0, 0, 0, 0.87);
7741
+ --hover-color: rgba(0, 0, 0, 0.04);
7742
+ --focus-color: rgba(0, 0, 0, 0.12);
7743
+ --focus-color-solid: #E0E0E0;
7744
+ --background-color-disabled: rgba(0, 0, 0, 0.12);
7745
+ --background-color-level-4dp: rgba(0, 0, 0, 0.09);
7746
+ --background-color-level-16dp-solid: var(--surface-color);
7747
+ --background-color-slight-emphasis: rgba(0, 0, 0, 0.025); /* stripes in table */
7748
+ --background-color-card: var(--surface-color);
7749
+ --tooltip-background-color: #313033;
7750
+ --tooltip-font-color: rgba(255, 255, 255, 0.77);
7751
+ --separator-color: #DDDDDD; /* borders between components */
7752
+ --error-color: #F44336;
7753
+ --slider-track-color: rgba(0, 0, 0, 0.26);
7754
+ --switch-thumb-off-color: #ffffff;
7755
+ --carousel-indicator-color: rgba(255, 255, 255, 0.45);
7756
+ --carousel-indicator-active-color: #FFF;
7757
+ --primary-color: #26a69a;
7758
+ --primary-color-dark: #009688;
7759
+ --primary-color-numeric: 38, 166, 154;
7760
+ --primary-color-raised-hover-solid: #30B0A4;
7761
+ --primary-color-raised-focus-solid: #44C4B8;
7762
+ --primary-color-font-medium-color: rgba(var(--primary-color-numeric), 0.7);
7763
+ --primary-color-font-disabled-color: rgba(var(--primary-color-numeric), 0.4);
7764
+ --primary-color-hover-opaque: rgba(var(--primary-color-numeric), 0.06);
7765
+ --primary-color-focus-opaque: rgba(var(--primary-color-numeric), 0.18);
7766
+ --secondary-color: #EF5350;
7767
+ --secondary-color-hover-solid: #FE625F;
7768
+ --secondary-color-focus-solid: #FF7B78;
7769
+ --md_sys_color_on-surface: 28, 27, 31;
7770
+ }
7771
+
7772
+ :root[theme=dark] {
7773
+ --background-color: #121212;
7774
+ --surface-color: #242424;
7775
+ --font-color-main: rgba(255, 255, 255, 0.87);
7776
+ --font-color-medium: rgba(255, 255, 255, 0.60);
7777
+ --font-color-disabled: rgba(255, 255, 255, 0.38);
7778
+ --font-on-primary-color-main: rgba(0, 0, 0, 0.87);
7779
+ --font-on-primary-color-dark-main: rgba(255, 255, 255, 0.87);
7780
+ --font-on-primary-color-dark-medium: rgba(255, 255, 255, 0.60);
7781
+ --font-on-primary-color-medium: rgba(0, 0, 0, 0.56);
7782
+ --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);
7783
+ --hover-color: rgba(255, 255, 255, 0.04);
7784
+ --focus-color: rgba(255, 255, 255, 0.12);
7785
+ --focus-color-solid: #424242;
7786
+ --background-color-disabled: rgba(255, 255, 255, 0.12);
7787
+ --background-color-level-4dp: rgba(255, 255, 255, 0.09);
7788
+ --background-color-level-16dp-solid: #262626;
7789
+ --background-color-card: var(--surface-color);
7790
+ --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);
7791
+ --separator-color: #424242; /* borders between components */
7792
+ --error-color: #CF6679;
7793
+ --slider-track-color: rgba(255, 255, 255, 0.26);
7794
+ --switch-thumb-off-color: #bababa;
7795
+ --primary-color: #B39DDB;
7796
+ --primary-color-dark: #9575CD;
7797
+ --primary-color-numeric: 179, 157, 219;
7798
+ --primary-color-raised-hover-solid: #C2ACEA;
7799
+ --primary-color-raised-focus-solid: #DBC5FF;
7800
+ --secondary-color: #CDDC39;
7801
+ --secondary-color-hover-solid: #DCEB48;
7802
+ --secondary-color-focus-solid: #F5FF61;
7803
+ --md_sys_color_on-surface: 230, 225, 229;
8617
7804
  }