@materializecss/materialize 2.0.3 → 2.1.0

package/sass/components/_preloader.scss

@@ -4,24 +4,23 @@
   height: 4px;
   display: block;
   width: 100%;
-
   @extend .surface-variant;
-
-  border-radius: 2px;
+  border-radius: 4px;
   margin: $element-top-margin 0 $element-bottom-margin 0;
   overflow: hidden;
+  background-color: var(--md-sys-color-secondary-container);
 
   .determinate {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
-    background-color: $progress-bar-color;
+    background-color: var(--md-sys-color-primary);
     transition: width .3s linear;
   }
 
   .indeterminate {
-    background-color: $progress-bar-color;
+    background-color: var(--md-sys-color-primary);
 
     &:before {
       content: '';
@@ -148,7 +147,7 @@
   width: 100%;
   height: 100%;
   opacity: 0;
-  border-color: $spinner-default-color;
+  border-color: var(--md-sys-color-primary);
 }
 
 .spinner-blue,

package/sass/components/_sidenav.scss

@@ -1,21 +1,28 @@
 /* This should be an UL-Element*/
 .sidenav {
+  --sidenav-width: 300px;
+  --sidenav-font-size: 14px;
+  --sidenav-padding: 16px;
+  --sidenav-item-height: 48px;
+  --sidenav-line-height: var(--sidenav-item-height);
+
   position: fixed;
-  width: $sidenav-width;
+  width: var(--sidenav-width);
   left: 0;
   top: 0;
   margin: 0;
   transform: translateX(-100%);
   height: 100vh;
   padding: 0;
-  background-color: $sidenav-bg-color;
   z-index: 999;
   overflow-y: auto;
   will-change: transform;
   backface-visibility: hidden;
   transform: translateX(-105%); 
   user-select: none;
-
+  
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-surface);
   @extend .z-depth-1;
 
   // Right Align
@@ -31,16 +38,19 @@
   }
 
   /* Hover only on top row */
-  a:hover {
-    background-color: $button-flat-hover-background-color;
-  }
+  /*a:hover {
+    //color: red;
+    //background-color: var(--md-sys-color-on-secondary-container);
+    //md.sys.color.on-secondary-container
+  }*/
   a:focus {
-    background-color: $button-flat-focus-background-color;
+    background-color: rgba(0, 0, 0, 0.12);
   }
 
   li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating)  {
-    color: $font-on-secondary-container-color;
-    background-color: $secondary-container-color;
+    //color: var(--md-sys-color-on-secondary-container); //var(--md-sys-color-on-secondary-container);
+    //background-color: var(--md-sys-color-secondary-container);
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent);
   }
 
   .collapsible-body > ul { padding-left: 10px; }
@@ -52,11 +62,11 @@
   }
   li > a {
     /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */
-    //padding-left: calc(100% + $sidenav-padding);
+    //padding-left: calc(100% + var(--sidenav-padding));
     //margin-left: -100%;
     margin: 0 12px;
-    padding: 0 $sidenav-padding;
-    //padding-left: $sidenav-padding;
+    padding: 0 var(--sidenav-padding);
+    //padding-left: var(--sidenav-padding);
 
     // Truncate too long text
     /*
@@ -67,15 +77,21 @@
     */
 
     display: flex;
-    height: $sidenav-item-height;
-    font-size: $sidenav-font-size;
+    height: var(--sidenav-item-height);
+    font-size: var(--sidenav-font-size);
     font-weight: 500;
     align-items: center;
     overflow: hidden;
     border-radius: 100px;
 
     &:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) {
-      color: $sidenav-font-color;
+      color: var(--md-sys-color-on-secondary-container);
+      //color: $sidenav-font-color;
+      &:hover {
+        //color: var(--md-sys-color-on-secondary-container);
+        //md.sys.color.on-secondary-container
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+      }
     }
 
     &.btn, &.btn-large, &.btn-flat, &.btn-floating {
@@ -87,29 +103,29 @@
     & > .material-symbols-rounded, & > .material-symbols-sharp {
       display: inline-flex;
       vertical-align: middle;
-      color: $sidenav-icon-color;
+      //color: $sidenav-icon-color;
       margin-right: 12px;
     }
   }
 
   .divider {
-    margin: ($sidenav-padding * 0.5) 0 0 0;
+    margin: calc(var(--sidenav-padding) * 0.5) 0 0 0;
   }
 
   .subheader {
     cursor: initial;
     pointer-events: none;
-    color: $sidenav-subheader-color;
-    font-size: $sidenav-font-size;
+    color: red; //$sidenav-subheader-color;
+    font-size: var(--sidenav-font-size);
     font-weight: 500;
-    line-height: $sidenav-line-height;
+    line-height: var(--sidenav-line-height);
   }
 
   // Remove this? is very custom
   .user-view {
     position: relative;
-    padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
-    margin-bottom: $sidenav-padding * 0.5;
+    padding: calc(var(--sidenav-padding) * 2) calc(var(--sidenav-padding) * 2) 0;
+    margin-bottom: calc(var(--sidenav-padding) * 0.5);
 
     & > a {
       &:hover {
@@ -141,8 +157,8 @@
 
     .name,
     .email {
-      font-size: $sidenav-font-size;
-      line-height: $sidenav-line-height * 0.5;
+      font-size: var(--sidenav-font-size);
+      line-height: calc(var(--sidenav-line-height) * 0.5);
     }
 
     .name {
@@ -193,10 +209,10 @@
       }
     }
     > a {
-      padding: 0 $sidenav-padding;
+      padding: 0 var(--sidenav-padding);
     }
     .user-view {
-      padding: $sidenav-padding $sidenav-padding 0;
+      padding: var(--sidenav-padding) var(--sidenav-padding) 0;
     }
   }
 }

package/sass/components/_slider.scss

@@ -26,10 +26,10 @@
       bottom: 30px;
 
       .indicator-item {
-        background-color: $slider-fullscreen-indicator-color;
+        background-color: rgba(255, 255, 255, 0.45);
 
         &.active {
-          background-color: $slider-fullscreen-indicator-color-active;
+          background-color: var(--md-ref-palette-primary100);
         }
       }
 
@@ -37,7 +37,7 @@
   }
 
   .slides {
-    background-color: $slider-bg-color;
+    background-color: var(--md-sys-color-surface);
     margin: 0;
     height: 400px;
     padding-left: 0;
@@ -104,14 +104,14 @@
       top: 0;
       left: 0;
       cursor: pointer;
-      background-color: $slider-indicator-color;
+      background-color: var(--md-sys-color-shadow-light);
 
       transition: background-color .3s;
       border-radius: 50%;
       border-width: 0;
       
       &.active {
-        background-color: $slider-indicator-color-active;
+        background-color: var(--md-sys-color-primary);
       }
 
       width: 100%;

package/sass/components/_table_of_contents.scss

@@ -1,7 +1,6 @@
-/***************
-    Nav List
-***************/
 .table-of-contents {
+  list-style: none;
+
   &.fixed {
     position: fixed;
   }
@@ -13,21 +12,21 @@
   a {
     display: inline-block;
     font-weight: 400;
-    color: $font-color-medium;
+    color: var(--md-sys-color-secondary);
     padding-left: 16px;
     height: 2rem;
     line-height: 2rem;
-    border-left: 1px solid $divider-color;
+    border-left: 1px solid var(--md-sys-color-outline-variant);
     
     &:hover {
-      color: $font-color-main;
+      color: var(--md-sys-color-on-background);
       padding-left: 15px;
     }
     &.active {
-      color: $primary-color;
+      color: var(--md-sys-color-primary);
       font-weight: 500;
       padding-left: 14px;
-      border-left: 2px solid $primary-color;
+      border-left: 2px solid var(--md-sys-color-primary);
     }
   }
 }

package/sass/components/_tabs.scss

@@ -6,17 +6,17 @@
     background-color: transparent;
 
     .tab a {
-      color: $font-on-primary-color-medium;
+      color: var(--font-on-primary-color-medium);
     }
 
     .tab.disabled a,
     .tab.disabled a:hover,
     .tab.disabled a:focus {
-      color: $font-on-primary-color-disabled;
+      color: rgba(255, 255, 255, 0.38);
     }
 
     .tab a:hover {
-      background-color: $surface-hover-color-opaque;
+      background-color: rgba(0, 0, 0, 0.04);
     }
 
     .tab a.active,
@@ -27,11 +27,11 @@
     .tab a:hover,
     .tab a.active,
     .tab a:focus {
-      color: $font-on-primary-color-main;
+      color:  var(--md-sys-color-on-primary);
     }
 
     .indicator {
-      background-color: $font-on-primary-color-main;
+      background-color:  var(--md-sys-color-on-primary);
     }
   }
 
@@ -47,7 +47,7 @@
   overflow-y: hidden;
   height: 48px;
   width: 100%;
-  background-color: $tabs-bg-color;
+  background-color: var(--md-sys-color-surface);
   margin: 0 auto;
   white-space: nowrap;
 
@@ -69,20 +69,20 @@
       &.active,
       &:focus,
       &:hover {
-        color: $tabs-text-active-color;
+        color: var(--md-sys-color-primary);
       }
 
       &:hover {
-        background-color: $primary-color-hover-opaque;
+        background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
       }
 
       &:focus,
       &.active {
-        background-color: $primary-color-focus-opaque;
+        background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
         outline: none;
       }
 
-      color: $tabs-text-inactive-color;
+      color: var(--md-sys-color-on-surface-variant);
       display: block;
       width: 100%;
       height: 100%;
@@ -98,8 +98,7 @@
       &:not(:focus) {
         background-color: transparent;
       }
-
-      color: $tabs-text-disabled-color;
+      color: var(--md-sys-color-on-surface);
       cursor: default;
       background-color: transparent;
     }
@@ -108,20 +107,20 @@
   .indicator {
     position: absolute;
     bottom: 0;
-    height: 2px;
-    background-color: $tabs-underline-color;
+    height: 3px;
+    background-color: var(--md-sys-color-primary);
     will-change: left, right;
+    border-radius: 3px 3px 0 0;
   }
 }
 
-// Fixed Sidenav hide on smaller
+/* Fixed Sidenav hide on smaller */
+
 @media #{$medium-and-down} {
   .tabs {
     display: flex;
-
     .tab {
       flex-grow: 1;
-
       a {
         padding: 0 12px;
       }

package/sass/components/_tapTarget.scss

@@ -36,8 +36,8 @@
   position: absolute;
   font-size: 1rem;
   border-radius: 50%;
-  background-color: $secondary-color;
-  color: $font-on-secondary-color-main;
+  background-color: var(--md-sys-color-surface);//var(--md-sys-color-secondary);
+  color: var(--md-sys-color-on-secondary);
   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);
   width: 100%;
   height: 100%;
@@ -61,7 +61,7 @@
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    background-color: $surface-color
+    background-color: var(--md-sys-color-surface)
   }
   &::before {
     transform: scale(0);

package/sass/components/_timepicker.scss

@@ -11,7 +11,7 @@
 }
 
 .text-primary {
-  color: $font-on-primary-color-main;
+  color:  var(--md-sys-color-on-primary);
 }
 
 
@@ -19,7 +19,7 @@
 .timepicker-digital-display {
   width: 200px;
   flex: 1 auto;
-  background-color: $primary-color;
+  background-color: var(--md-sys-color-primary);;
   padding: 10px;
   font-weight: 300;
 }
@@ -28,7 +28,7 @@
   font-size: 4rem;
   font-weight: bold;
   text-align: center;
-  color: $font-on-primary-color-medium;
+  color: var(--font-on-primary-color-medium);
   font-weight: 400;
   position: relative;
   user-select: none;
@@ -75,11 +75,11 @@ input[type=text].text-primary {
 /* Analog Clock Display */
 .timepicker-analog-display {
   flex: 2.5 auto;
-  background-color: $timepicker-clock-bg;
+  background-color: var(--md-sys-color-surface);
 }
 
 .timepicker-plate {
-  background-color: $timepicker-clock-plate-bg;
+  background-color: rgba(0, 0, 0, 0.09);
   border-radius: 50%;
   width: 270px;
   height: 270px;
@@ -106,7 +106,7 @@ input[type=text].text-primary {
 
 .timepicker-tick {
   border-radius: 50%;
-  color: $timepicker-clock-color;
+  color: var(--md-sys-color-on-background);
   line-height: 40px;
   text-align: center;
   width: 40px;
@@ -118,7 +118,7 @@ input[type=text].text-primary {
 
 .timepicker-tick.active,
 .timepicker-tick:hover {
-  background-color: $primary-color-hover-opaque;
+  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
 }
 
 .timepicker-dial {
@@ -141,7 +141,7 @@ input[type=text].text-primary {
   transition: opacity 175ms;
 
   line {
-    stroke: $primary-color;
+    stroke: var(--md-sys-color-primary);
     stroke-width: 4;
     stroke-linecap: round;
   }
@@ -153,12 +153,12 @@ input[type=text].text-primary {
 
 .timepicker-canvas-bearing {
   stroke: none;
-  fill: $primary-color;
+  fill: var(--md-sys-color-primary);
 }
 
 .timepicker-canvas-bg {
   stroke: none;
-  fill: $primary-color;
+  fill: var(--md-sys-color-primary);
 }
 
 
@@ -171,11 +171,11 @@ input[type=text].text-primary {
 }
 
 .timepicker-clear {
-  color: $error-color;
+  color: var(--md-sys-color-error);
 }
 
 .timepicker-close {
-  color: $primary-color;
+  color: var(--md-sys-color-primary);
 }
 
 .timepicker-clear,

package/sass/components/_toast.scss

@@ -20,28 +20,35 @@
 }
 
 .toast {
-  @extend .z-depth-1;
-  border-radius: 2px;
+  @extend .z-depth-3;
+  border-radius: 4px;
   top: 35px;
   width: auto;
   margin-top: 10px;
   position: relative;
   max-width: 100%;
   height: auto;
-  min-height: $toast-height;
-  line-height: 1.5em;
-  background-color: $toast-color;
-  padding: 10px 25px;
-  font-size: 1rem;
-  font-weight: 400;
-  color: $toast-text-color;
+  min-height: 48px;
+  
+  //line-height: 1.5em;
+  //padding: 10px 25px;
+  padding-left: 16px;
+  padding-right: 12px;
+
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+
+  color: var(--md-sys-color-inverse-on-surface);
+  background-color: var(--md-sys-color-inverse-surface);
+
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: default;
 
   .toast-action {
-    color: $toast-action-color;
+    color: var(--md-sys-color-inverse-primary);
     font-weight: 500;
     margin-right: -25px;
     margin-left: 3rem;

package/sass/components/_tooltip.scss

@@ -2,9 +2,9 @@
   padding: 0 8px;  
   border-radius: 4px;
   
-  background-color: $tooltip-bg-color;
-  color: $tooltip-font-color;
-  
+  color: var(--md-sys-color-inverse-on-surface);
+  background-color: var(--md-sys-color-inverse-surface);
+
   font-family: var(--md-sys-typescale-body-small-font-family-name);
   font-size: var(--md-sys-typescale-body-small-font-size);
   line-height: var(--md-sys-typescale-body-small-line-height);
@@ -12,10 +12,17 @@
 
   min-height: 24px;
   opacity: 0;
-  text-align: center;
+
+  padding-top: 6px;
+  padding-bottom: 6px;
+
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.4px;
   
   position: absolute;
-  max-width: calc(100% - 4px);
+  max-width: 300px;
   overflow: hidden;
   left: 0;
   top: 0;
@@ -34,7 +41,7 @@
   height: 7px;
   width: 14px;
   border-radius: 0 0 50% 50%;
-  background-color: $tooltip-bg-color;
+  background-color: var(--md-sys-color-inverse-surface);
   z-index: -1;
   transform-origin: 50% 0;
   visibility: hidden;