@materializecss/materialize 2.0.4 → 2.1.0

package/sass/components/_global.scss

@@ -6,6 +6,11 @@ html {
   box-sizing: inherit;
 }
 
+body {
+  background-color: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
+}
+
 button,
 input,
 optgroup,
@@ -14,23 +19,14 @@ textarea {
   font-family: $font-stack;
 }
 
-a {
-  color: $link-color;
-  text-decoration: none;
-  // Gets rid of tap active state
-  -webkit-tap-highlight-color: transparent;
+a { color: $link-color; text-decoration: none; 
+   -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
 }
 
 // Positioning
-.valign-wrapper {
-  display: flex;
-  align-items: center;
-}
+.valign-wrapper { display: flex; align-items: center; }
 
-// classic clearfix
-.clearfix {
-  clear: both;
-}
+.clearfix { clear: both; }
 
 // Z-levels
 .z-depth-0 {
@@ -87,15 +83,11 @@ a {
 .divider {
   height: 1px;
   overflow: hidden;
-  background-color: $divider-color;
+  background-color: var(--md-sys-color-outline-variant);
 }
 
 //  Blockquote
-blockquote {
-  margin: 20px 0;
-  padding-left: 1.5rem;
-  border-left: 5px solid $primary-color;
-}
+blockquote { margin: 20px 0; padding-left: 1.5rem; border-left: 5px solid var(--md-sys-color-primary); }
 
 // Icon Styles
 i {
@@ -123,6 +115,13 @@ i {
   }
 }
 
+// Modal
+html.noscroll {
+  position: fixed; 
+  overflow-y: scroll;
+  width: 100%;
+}
+
 // Images
 img.responsive-img,
 video.responsive-video {
@@ -141,7 +140,7 @@ video.responsive-video {
     height: 30px;
 
     a {
-      color: $font-color-medium;
+      color: var(--md-sys-color-on-surface-variant);
       display: inline-block;
       font-size: 1.2rem;
       padding: 0 10px;
@@ -149,21 +148,21 @@ video.responsive-video {
     }
 
     &:hover:not(.disabled) {
-      background-color: $primary-color-hover-opaque;
+      background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
     }
 
     &.active a {
-      color: $font-on-primary-color-main;
+      color:  var(--md-sys-color-on-primary);
     }
 
     &.active,
     &.active:hover {
-      background-color: $primary-color;
+      background-color: var(--md-sys-color-primary);
     }
 
     &.disabled a {
       cursor: default;
-      color: $font-color-disabled;
+      color: var(--md-sys-color-on-surface);
     }
 
     i {
@@ -199,7 +198,7 @@ video.responsive-video {
 .breadcrumb {
   display: inline-block;
   font-size: 18px;
-  color: $font-on-primary-color-medium;
+  color: var(--font-on-primary-color-medium);
 
   i,
   [class^="mdi-"], [class*="mdi-"],
@@ -212,7 +211,7 @@ video.responsive-video {
 
   &:before {
     content: '\E5CC';
-    color: $font-on-primary-color-medium;
+    color: var(--font-on-primary-color-medium);
     vertical-align: top;
     display: inline-block;
     font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
@@ -229,7 +228,7 @@ video.responsive-video {
   }
 
   &:last-child {
-    color: $font-on-primary-color-main;
+    color:  var(--md-sys-color-on-primary);
   }
 }
 
@@ -273,35 +272,22 @@ video.responsive-video {
   Transition Classes
 **********************/
 
-ul.staggered-list li {
-  opacity: 0;
-}
-
-.fade-in {
-  opacity: 0;
-  transform-origin: 0 50%;
-}
-
+ul.staggered-list li { opacity: 0; }
+.fade-in { opacity: 0; transform-origin: 0 50%; }
 
 /*********************
   Media Query Classes
 **********************/
 .hide-on-small-only, .hide-on-small-and-down {
-  @media #{$small-and-down} {
-    display: none !important;
-  }
+  @media #{$small-and-down} { display: none !important; }
 }
 
 .hide-on-med-and-down {
-  @media #{$medium-and-down} {
-    display: none !important;
-  }
+  @media #{$medium-and-down} { display: none !important; }
 }
 
 .hide-on-med-and-up {
-  @media #{$medium-and-up} {
-    display: none !important;
-  }
+  @media #{$medium-and-up} { display: none !important; }
 }
 
 .hide-on-med-only {
@@ -311,27 +297,19 @@ ul.staggered-list li {
 }
 
 .hide-on-large-only {
-  @media #{$large-and-up} {
-    display: none !important;
-  }
+  @media #{$large-and-up} { display: none !important; }
 }
 
 .hide-on-extra-large-only {
-  @media #{$extra-large-and-up} {
-    display: none !important;
-  }
+  @media #{$extra-large-and-up} { display: none !important; }
 }
 
 .show-on-extra-large {
-  @media #{$extra-large-and-up} {
-    display: block !important;
-  }
+  @media #{$extra-large-and-up} { display: block !important; }
 }
 
 .show-on-large {
-  @media #{$large-and-up} {
-    display: block !important;
-  }
+  @media #{$large-and-up} { display: block !important; }
 }
 
 .show-on-medium {
@@ -341,41 +319,34 @@ ul.staggered-list li {
 }
 
 .show-on-small {
-  @media #{$small-and-down} {
-    display: block !important;
-  }
+  @media #{$small-and-down} { display: block !important; }
 }
 
 .show-on-medium-and-up {
-  @media #{$medium-and-up} {
-    display: block !important;
-  }
+  @media #{$medium-and-up} { display: block !important; }
 }
 
 .show-on-medium-and-down {
-  @media #{$medium-and-down} {
-    display: block !important;
-  }
+  @media #{$medium-and-down} { display: block !important; }
 }
 
 
 // Center text on mobile
 .center-on-small-only {
-  @media #{$small-and-down} {
-    text-align: center;
-  }
+  @media #{$small-and-down} { text-align: center; }
 }
 
 // Footer
 .page-footer {
-  padding-top: 20px;
-  color: $footer-font-color;
-  background-color: $footer-bg-color;
-
+  margin-top: 5rem;
+  padding-top: 3rem;
+  border-top: 1px dashed var(--md-sys-color-outline-variant);
+  p {
+    color: var(--md-sys-color-outline-light);
+  }
   a {
-    color: $footer-font-color;
+    color: var(--md-sys-color-primary);
   }
-
   .footer-copyright,
   .footer-copyright a {
     overflow: hidden;
@@ -384,11 +355,8 @@ ul.staggered-list li {
     align-items: center;
     justify-content: space-between;
     padding: 10px 0px;
-    color: $footer-copyright-font-color;
-    background-color: $footer-copyright-bg-color;
   }
 }
-
 .page-footer ul {
   padding-left: 0;
   list-style-type: none;
@@ -410,7 +378,7 @@ table {
       border-bottom: none;
     }
     tbody > tr:nth-child(odd) {
-      background-color: $table-striped-color;
+      background-color: rgba(0, 0, 0, 0.08);
     }
   }
 
@@ -418,12 +386,12 @@ table {
     transition: background-color .25s ease;
 
     &:hover {
-      background-color: $surface-hover-color-opaque;
+      background-color: rgba(0, 0, 0, 0.04);
     }
   }
 
   thead {
-    color: $font-color-medium;
+    color: var(--md-sys-color-on-surface-variant);
   }
 
   &.centered {
@@ -434,7 +402,7 @@ table {
 }
 
 tr {
-  border-bottom: 1px solid $table-border-color;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
 }
 
 td, th {
@@ -458,17 +426,14 @@ td, th {
     td:empty:before {
       content: '\00a0';
     }
-
     th,
     td {
       margin: 0;
       vertical-align: top;
     }
-
     th {
       text-align: left;
     }
-
     thead {
       display: block;
       float: left;
@@ -482,7 +447,6 @@ td, th {
         }
       }
     }
-
     tbody {
       display: block;
       width: auto;
@@ -495,27 +459,23 @@ td, th {
         vertical-align: top;
       }
     }
-
     th {
       display: block;
       text-align: right;
     }
-
     td {
       display: block;
       min-height: 1.25em;
       text-align: left;
     }
-
     tr {
       border-bottom: none;
       padding: 0 10px;
     }
-
     /* sort out borders */
     thead {
       border: 0;
-      border-right: 1px solid $table-border-color;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
     }
   }
 }
@@ -540,49 +500,23 @@ td, th {
   Utility Classes
 *******************/
 
-.hide {
-  display: none !important;
-}
+.hide { display: none !important; }
+
 // Text Align
-.left-align {
-  text-align: left;
-}
-.right-align {
-  text-align: right
-}
-.center, .center-align {
-  text-align: center;
-}
+.left-align { text-align: left; }
+.right-align { text-align: right }
+.center, .center-align { text-align: center; }
 
 // TODO: Remove this
-.left {
-  float: left !important;
-}
-.right {
-  float: right !important;
-}
+.left { float: left !important; }
+.right { float: right !important; }
 
 // No Text Select
-.no-select {
-  user-select: none;
-}
-.circle {
-  border-radius: 50%;
-}
-.center-block {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-.truncate {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.no-padding {
-  padding: 0 !important;
-}
+.no-select { user-select: none; }
+.circle { border-radius: 50%; }
+.center-block { display: block; margin-left: auto; margin-right: auto; }
+.truncate { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.no-padding { padding: 0 !important; }
 
 /**************************
   Utility Spacing Classes
@@ -597,18 +531,15 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
 @each $property, $shortcut in $spacing-shortcuts{
   @each $name, $value in $spacing-values{
     // All direction spacing
-
     .#{$shortcut}-#{$name}{
       #{$property}: $value !important;
     }
-
     // (t, b, r, l) spacing
     @each $direction, $suffix in $spacing-directions{
       .#{$shortcut}#{$suffix}-#{$name}{
         #{$property}-#{$direction}: $value !important 
       }
     }
-
     // x spacing
     @if $spacing-horizontal != null{
        .#{$shortcut}#{$spacing-horizontal}-#{$name}{
@@ -616,15 +547,12 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
          #{$property}-right: $value !important;
        }
     }
-
     // y spacing
     @if $spacing-vertical != null{
       .#{$shortcut}#{$spacing-vertical}-#{$name}{
         #{$property}-top: $value !important;
         #{$property}-bottom: $value !important;
-      }
-        
-    }
-      
+      }        
+    }      
   }
 } 

package/sass/components/_grid.scss

@@ -41,13 +41,21 @@
 }
 
 .row {
-  //--grid-gap: 1rem;
+  --gap-size: 1.5rem; // default
+
   display: grid;
-  grid-template-columns: repeat(12, 1fr); //repeat(12, calc(8.33% - var(--grid-gap) + (var(--grid-gap) / 12)));
-  //gap: var(--grid-gap);
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--gap-size);
 
-  //--- S
+  //--- Gap
+  .g-0 { gap: 0; }
+  .g-1 { gap: calc(0.25 * var(--gap-size)); }
+  .g-2 { gap: calc(0.5 * var(--gap-size));  }
+  .g-3 { gap: calc(1 * var(--gap-size));  }
+  .g-4 { gap: calc(1.5 * var(--gap-size)); }
+  .g-5 { gap: calc(3 * var(--gap-size)); }
 
+  //--- S
   .s1  { grid-column: auto / span 1; }
   .s2  { grid-column: auto / span 2; }
   .s3  { grid-column: auto / span 3; }

package/sass/components/_materialbox.scss

@@ -30,7 +30,7 @@
 .materialbox-caption {
   position: fixed;
   display: none;
-  color: var(--font-color-main);
+  color: var(--md-sys-color-on-background);
   line-height: 50px;
   bottom: 0;
   left: 0;

package/sass/components/_modal.scss

@@ -1,4 +1,9 @@
 .modal {
+  --modal-footer-height: 56px;
+  --modal-footer-divider-height: 1px;
+  --modal-border-radius: 28px;
+  --modal-padding: 24px;
+
   &:focus {
     outline: none;
   }
@@ -9,14 +14,14 @@
   position: fixed;
   left: 0;
   right: 0;
-  background-color: $modal-background-color;
+  background-color: var(--md-sys-color-surface);
   padding: 0;
   max-height: 70%;
   width: 55%;
   margin: auto;
   overflow-y: auto;
 
-  border-radius: 2px;
+  border-radius: var(--modal-border-radius);
   will-change: top, opacity;
 
   @media #{$medium-and-down} {
@@ -28,7 +33,7 @@
   }
 
   .modal-content {
-    padding: 24px;
+    padding: var(--modal-padding);
     overflow-y: hidden;
   }
 
@@ -37,10 +42,10 @@
   }
 
   .modal-footer {
-    border-radius: 0 0 2px 2px;
-    background-color: $modal-background-color;
+    border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
+    background-color: var(--md-sys-color-surface);
     padding: 4px 6px;
-    height: 56px;
+    height: var(--modal-footer-height);
     width: 100%;
     text-align: right;
 
@@ -71,16 +76,16 @@
 
   .modal-content {
     position: absolute;
-    height: calc(100% - 56px);
+    height: calc(100% - var(--modal-footer-height));
     max-height: 100%;
     width: 100%;
     overflow-y: auto;
   }
 
   .modal-footer {
-    border-top: 1px solid $divider-color;
+    border-top: var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant);
     position: absolute;
-    bottom: 0;
+    bottom: var(--modal-footer-divider-height);
   }
 }
 

package/sass/components/_navbar.scss

@@ -1,9 +1,15 @@
+// TODO: Make better wrapper class like .navbar
+:root {
+  --navbar-height: 64px;
+  --navbar-height-mobile: 56px;
+}
+
 nav {
   &.nav-extended {
     height: auto;
 
     .nav-wrapper {
-      min-height: $navbar-height-mobile;
+      min-height: var(--navbar-height-mobile);
       height: auto;
     }
 
@@ -13,16 +19,16 @@ nav {
     }
   }
 
-  color: $navbar-font-color;
+  color:  var(--md-sys-color-on-primary);
   @extend .z-depth-1;
-  background-color: $secondary-container-color;
+  background-color: var(--md-sys-color-secondary-container);
 
   width: 100%;
-  height: $navbar-height-mobile;
-  line-height: $navbar-line-height-mobile;
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
 
   a {
-    color: $navbar-font-color;
+    color:  var(--md-sys-color-on-primary);
   }
 
   i,
@@ -31,8 +37,8 @@ nav {
   i.material-symbols-rounded, i.material-symbols-sharp {
     display: block;
     font-size: 24px;
-    height: $navbar-height-mobile;
-    line-height: $navbar-line-height-mobile;
+    height: var(--navbar-height-mobile);
+    line-height: var(--navbar-height-mobile);
   }
 
   .nav-wrapper {
@@ -51,21 +57,21 @@ nav {
     float: left;
     position: relative;
     z-index: 1;
-    height: $navbar-height-mobile;
+    height: var(--navbar-height-mobile);
     margin: 0 18px;
 
     i {
-      height: $navbar-height-mobile;
-      line-height: $navbar-line-height-mobile;
+      height: var(--navbar-height-mobile);
+      line-height: var(--navbar-height-mobile);
     }
   }
 
   // Logo
   .brand-logo {
     position: absolute;
-    color: $navbar-font-color;
+    color:  var(--md-sys-color-on-primary);
     display: inline-block;
-    font-size: $navbar-brand-font-size;
+    font-size: 2.1rem;
     padding: 0;
 
     &.center {
@@ -126,18 +132,18 @@ nav {
 
       & > a {
         transition: background-color .3s;
-        font-size: $navbar-font-size;
-        color: $navbar-font-color;
+        font-size: 1rem;
+        color:  var(--md-sys-color-on-primary);
         display: block;
         padding: 0 15px;
         cursor: pointer;
 
         &.active {
-          background-color: $navbar-bg-color-focus;
+          background-color: var(--md-ref-palette-primary80);
         }
 
         &:hover:not(.active) {
-          background-color: $navbar-bg-color-hover;
+          background-color: var(--md-ref-palette-primary70);
         }
 
         &.btn, &.btn-large, &.btn-flat, &.btn-floating {
@@ -174,7 +180,7 @@ nav {
       font-size: 1.2rem;
       border: none;
       padding-left: 2rem;
-      color: #888; //$navbar-font-color;
+      color:  var(--md-sys-color-on-primary);
 
       &:focus, &[type=text]:valid, &[type=password]:valid,
       &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
@@ -188,12 +194,12 @@ nav {
       left: 0;
 
       i {
-        color: $font-on-primary-color-medium;
+        color: var(--font-on-primary-color-medium);
         transition: color .3s;
       }
 
       &.active i {
-        color: $navbar-font-color;
+        color:  var(--md-sys-color-on-primary)
       }
     }
   }
@@ -202,7 +208,7 @@ nav {
 // Fixed Navbar
 .navbar-fixed {
   position: relative;
-  height: $navbar-height-mobile;
+  height: var(--navbar-height-mobile);
   z-index: 997;
 
   nav {
@@ -213,13 +219,13 @@ nav {
 
 @media #{$medium-and-up} {
   nav.nav-extended .nav-wrapper {
-    min-height: $navbar-height;
+    min-height: var(--navbar-height-mobile);
   }
   nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
-    height: $navbar-height;
-    line-height: $navbar-line-height;
+    height: var(--navbar-height);
+    line-height: var(--navbar-height)
   }
   .navbar-fixed {
-    height: $navbar-height;
+    height: var(--navbar-height);
   }
 }