@materializecss/materialize 2.2.1 → 2.2.2

package/sass/components/_color-variables.scss

@@ -355,10 +355,9 @@ $colors: (
 ) !default;
 
 
-// usage: color("name_of_color", "type_of_color")
+// usage: colorFunc("name_of_color", "type_of_color")
 // to avoid to repeating map-get($colors, ...)
-
-@function color($color, $type) {
+@function colorFunc($color, $type) {
   @if map-has-key($colors, $color) {
     $curr_color: map-get($colors, $color);
     @if map-has-key($curr_color, $type) {
@@ -368,3 +367,36 @@ $colors: (
   @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
   @return null;
 }
+
+
+// Color Classes
+@each $color_name, $color in $colors {
+  @each $color_type, $color_value in $color {
+    @if $color_type == "base" {
+      .#{$color_name} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text {
+        color: $color_value !important;
+      }
+    }
+    @else if $color_name != "shades" {
+      .#{$color_name}.#{$color_type} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text.text-#{$color_type} {
+        color: $color_value !important;
+      }
+    }
+  }
+}
+
+// Shade classes
+@each $color, $color_value in $shades {
+  .#{$color} {
+    background-color: $color_value !important;
+  }
+  .#{$color}-text {
+    color: $color_value !important;
+  }
+}

package/sass/components/_datepicker.scss

@@ -1,13 +1,16 @@
 /* Modal */
-.datepicker-modal {
+// @removed since v2.2.1
+/*.datepicker-modal {
   max-width: 325px;
+  // @removed since v2.2.1-dev regarding Material M3 standards
   min-width: 300px;
   max-height: none;
-}
+}*/
 
-.datepicker-container.modal-content {
+.datepicker-container {
   display: flex;
   flex-direction: column;
+  max-width: 325px;
   padding: 0;
   background-color: var(--md-sys-color-surface);
 }
@@ -24,13 +27,20 @@
 
   .select-wrapper {
     input {
+      height: 49px;
+      margin: 4px 0 0 0;
+      border-bottom: none;
+      border-radius: 4px;
+      text-align: center;
+
       &:focus {
         border-bottom: none;
+        background-color: var(--md-sys-color-primary-container);
       }
 
-      border-bottom: none;
-      text-align: center;
-      margin: 0;
+      &::selection {
+        background-color: transparent;
+      }
     }
 
     .caret {
@@ -43,6 +53,11 @@
     vertical-align: middle;
   }
 
+  .select-year input,
+  .select-month input {
+    background-color: transparent;
+  }
+
   .select-year input {
     width: 50px;
   }
@@ -75,9 +90,11 @@
 /* Date Display */
 .datepicker-date-display {
   flex: 1 auto;
-  background-color: var(--md-sys-color-primary);
-  color:  var(--md-sys-color-on-primary);
+  // @removed since v2.2.1-dev regarding Material M3 standards
+  // background-color: var(--md-sys-color-primary);
+  // color:  var(--md-sys-color-on-primary);
   padding: 20px 22px;
+  border-bottom: 1px solid var(--md-sys-color-surface-variant-light);
   font-weight: 500;
 
   .year-text {
@@ -93,6 +110,12 @@
     line-height: 47px;
     font-weight: 500;
   }
+
+  .daterange & {
+    .date-text {
+      font-size: 1.8rem;
+    }
+  }
 }
 
 
@@ -124,49 +147,98 @@
     color: var(--md-sys-color-on-surface-variant);
   }
 
-  td {
+  .datepicker-day {
+    padding: 0;
     color: var(--md-sys-color-on-background);
+    // border-radius: 50%;
 
     &.is-today {
       color: var(--md-sys-color-primary);
     }
 
-    &.is-selected {
+    /*&.is-selected button {
       background-color: var(--md-sys-color-primary);
       color:  var(--md-sys-color-on-primary);
-    }
-
-    &.is-outside-current-month,
-    &.is-disabled {
-      color: var(--md-sys-color-on-surface);
-      pointer-events: none;
-    }
+    }*/
+  }
+}
 
-    border-radius: 50%;
-    padding: 0;
+// @todo
+.datepicker-day.has-event {}
+// @todo
+.datepicker-day.is-inrange {}
+// @todo
+.datepicker-day.is-startrange {}
+// @todo
+.datepicker-day.is-endrange {}
+
+.datepicker-day.is-daterange-start,
+.datepicker-day.is-daterange-end,
+.datepicker-day.is-daterange {
+  position: relative;
+
+  &:before {
+    position: absolute;
+    top: 5px;
+    width: 100%;
+    height: 34px;
+    content: '';
+    background-color: var(--md-sys-color-primary-container);
+    z-index: 0;
   }
 }
 
+.datepicker-day.is-daterange-start:before,
+.datepicker-day.is-daterange-end:before {
+  width: 50%;
+}
+
+.datepicker-day.is-daterange-start:before {
+  left: 50%;
+}
+
+.datepicker-day.is-daterange .datepicker-day-button:before {
+  background-color: var(--md-sys-color-primary-container);
+}
+
 .datepicker-day-button {
   background-color: transparent;
   border: none;
-  line-height: 38px;
+  line-height: 34px;
   display: block;
-  width: 100%;
+  width: 34px;
   border-radius: 50%;
+  margin: 5px;
   padding: 0 5px;
   cursor: pointer;
   color: inherit;
+  position: relative;
+  z-index: 1;
 
   &:hover {
     background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
   }
 
   &:focus {
-    background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
+    border-color: var(--md-sys-color-primary);
   }
-}
 
+  .is-selected & {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+
+    &:focus {
+      background-color: var(--md-sys-color-surface-variant);
+      color: var(--md-sys-color-primary);
+    }
+  }
+
+  &.is-outside-current-month button,
+  &.is-disabled button {
+    color: var(--md-sys-color-on-surface);
+    pointer-events: none;
+  }
+}
 
 /* Footer */
 .datepicker-footer {
@@ -189,28 +261,3 @@
   color: var(--md-sys-color-error);
 }
 
-
-/* Media Queries */
-@media #{$medium-and-up} {
-  .datepicker-modal {
-    max-width: 625px;
-  }
-
-  .datepicker-container.modal-content {
-    flex-direction: row;
-  }
-
-  .datepicker-date-display {
-    flex: 0 1 270px;
-  }
-
-  .datepicker-controls,
-  .datepicker-table,
-  .datepicker-footer {
-    width: 320px;
-  }
-
-  .datepicker-day-button {
-    line-height: 44px;
-  }
-}

package/sass/components/_dropdown.scss

@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './global' as *;
+
 [popover] {
   outline: none;
   padding: 0;
@@ -22,6 +25,14 @@
   user-select: none;
   
   li {
+    clear: both;
+    color: var(--md-sys-color-on-background);
+    cursor: pointer;
+    min-height: $dropdown-item-height;
+    line-height: 1.5rem;
+    width: 100%;
+    text-align: left;
+
     &.divider {
       min-height: 0;
       height: 1px;
@@ -46,13 +57,6 @@
       margin: 0 24px 0 0;
       width: 24px;
     }
-    clear: both;
-    color: var(--md-sys-color-on-background);
-    cursor: pointer;
-    min-height: $dropdown-item-height;
-    line-height: 1.5rem;
-    width: 100%;
-    text-align: left;
   }
   li:not(.disabled):hover, li.active {
     background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);

package/sass/components/_global.scss

@@ -1,3 +1,5 @@
+@use './_variables' as *;
+
 html {
   box-sizing: border-box;
 }
@@ -19,8 +21,10 @@ textarea {
   font-family: $font-stack;
 }
 
-a { color: $link-color; text-decoration: none; 
-   -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+a {
+  color: $link-color;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
 }
 
 // Positioning
@@ -117,7 +121,7 @@ i {
 
 // Modal
 html.noscroll {
-  position: fixed; 
+  position: fixed;
   overflow-y: scroll;
   width: 100%;
 }
@@ -129,109 +133,6 @@ video.responsive-video {
   height: auto;
 }
 
-// Pagination
-.pagination {
-
-  li {
-    display: inline-block;
-    border-radius: 2px;
-    text-align: center;
-    vertical-align: top;
-    height: 30px;
-
-    a {
-      color: var(--md-sys-color-on-surface-variant);
-      display: inline-block;
-      font-size: 1.2rem;
-      padding: 0 10px;
-      line-height: 30px;
-    }
-
-    &:hover:not(.disabled) {
-      background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-    }
-
-    &.active a {
-      color:  var(--md-sys-color-on-primary);
-    }
-
-    &.active,
-    &.active:hover {
-      background-color: var(--md-sys-color-primary);
-    }
-
-    &.disabled a {
-      cursor: default;
-      color: var(--md-sys-color-on-surface);
-    }
-
-    i {
-      font-size: 2rem;
-    }
-  }
-
-
-  li.pages ul li {
-    display: inline-block;
-    float: none;
-  }
-}
-
-@media #{$medium-and-down} {
-  .pagination {
-    width: 100%;
-
-    li.prev,
-    li.next {
-      width: 10%;
-    }
-
-    li.pages {
-      width: 80%;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-}
-
-// Breadcrumbs
-.breadcrumb {
-  display: inline-block;
-  font-size: 18px;
-  color: var(--font-on-primary-color-medium);
-
-  i,
-  [class^="mdi-"], [class*="mdi-"],
-  i.material-icons, i.material-symbols-outlined,
-  i.material-symbols-rounded, i.material-symbols-sharp {
-    display: block;
-    float: left;
-    font-size: 24px;
-  }
-
-  &:before {
-    content: '\E5CC';
-    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';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 25px;
-    margin: 0 10px 0 8px;
-    -webkit-font-smoothing: antialiased;
-    float: left;
-  }
-
-  &:first-child:before {
-    display: none;
-  }
-
-  &:last-child {
-    color:  var(--md-sys-color-on-primary);
-  }
-}
-
 // Parallax
 .parallax-container {
   position: relative;
@@ -357,6 +258,7 @@ ul.staggered-list li { opacity: 0; }
     padding: 10px 0px;
   }
 }
+
 .page-footer ul {
   padding-left: 0;
   list-style-type: none;
@@ -526,7 +428,7 @@ $spacing-shortcuts: ("margin": "m", "padding": "p") !default;
 $spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
 $spacing-horizontal: "x" !default;
 $spacing-vertical: "y" !default;
-$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default; 
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default;
 
 @each $property, $shortcut in $spacing-shortcuts{
   @each $name, $value in $spacing-values{
@@ -537,7 +439,7 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
     // (t, b, r, l) spacing
     @each $direction, $suffix in $spacing-directions{
       .#{$shortcut}#{$suffix}-#{$name}{
-        #{$property}-#{$direction}: $value !important 
+        #{$property}-#{$direction}: $value !important
       }
     }
     // x spacing
@@ -552,7 +454,16 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
       .#{$shortcut}#{$spacing-vertical}-#{$name}{
         #{$property}-top: $value !important;
         #{$property}-bottom: $value !important;
-      }        
-    }      
+      }
+    }
   }
-} 
+}
+
+// Docked display
+.display-docked {
+  position: absolute;
+  opacity: 0;
+  z-index: 9999;
+  visibility: hidden;
+}
+

package/sass/components/_grid.scss

@@ -1,16 +1,18 @@
 @use "sass:math";
+@use './variables' as *;
 
-// Container
 .container {
   margin: 0 auto;
   max-width: 1280px;
   width: 90%;
 }
+
 @media #{$medium-and-up} {
   .container {
     width: 85%;
   }
 }
+
 @media #{$large-and-up} {
   .container {
     width: 70%;

package/sass/components/_materialbox.scss

@@ -1,16 +1,15 @@
 .materialboxed {
-  &:hover {
-    &:not(.active) {
-      opacity: .8;
-    }
-  }
-
   display: block;
   cursor: zoom-in;
   position: relative;
   transition: opacity .4s;
   -webkit-backface-visibility: hidden;
 
+  &:hover {
+    &:not(.active) {
+      opacity: .8;
+    }
+  }
   &.active {
     cursor: zoom-out;
   }

package/sass/components/_modal.scss

@@ -1,9 +1,13 @@
+@use './variables' as *;
+@use './global' as *;
+
 // use with dialog html element
 .modal {
   --modal-footer-divider-height: 1px;
   --modal-border-radius: 28px;
   --modal-padding: 24px;
   --modal-padding-bottom: 16px;
+  --modal-background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
 
   @extend .z-depth-5;
   border: none;
@@ -13,6 +17,7 @@
   width: 55%;
   border-radius: var(--modal-border-radius);
   will-change: top, opacity;
+  background-color: var(--modal-background-color);
 
   // Dialog open
   &[open] {
@@ -20,9 +25,6 @@
     flex-direction: column;
   }
 
-  // Background
-  background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
-
   @media #{$medium-and-down} {
     width: 80%;
   }
@@ -36,16 +38,21 @@
     padding: var(--modal-padding);
     padding-bottom: var(--modal-padding-bottom);
     flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    background-color: var(--modal-background-color);
   }
   .modal-content {
     padding: 0 var(--modal-padding);
-    overflow-y: auto;
   }
   .modal-footer {
     border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
     padding: var(--modal-padding);
     text-align: right;
     flex-shrink: 0;
+    position: sticky;
+    bottom: 0;
+    background-color: var(--modal-background-color);
   }
 
   .modal-close {

package/sass/components/_navbar.scss

@@ -1,10 +1,19 @@
-// TODO: Make better wrapper class like .navbar
+@use './variables' as *;
+@use './global' as *;
+
 :root {
   --navbar-height: 64px;
   --navbar-height-mobile: 56px;
 }
 
-nav {
+.navbar {
+  color:  var(--md-sys-color-on-primary);
+  @extend .z-depth-1;
+  background-color: var(--md-sys-color-secondary-container);
+  width: 100%;
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
+
   &.nav-extended {
     height: auto;
 
@@ -12,21 +21,13 @@ nav {
       min-height: var(--navbar-height-mobile);
       height: auto;
     }
-
+    
     .nav-content {
       position: relative;
       line-height: normal;
     }
   }
 
-  color:  var(--md-sys-color-on-primary);
-  @extend .z-depth-1;
-  background-color: var(--md-sys-color-secondary-container);
-
-  width: 100%;
-  height: var(--navbar-height-mobile);
-  line-height: var(--navbar-height-mobile);
-
   a {
     color:  var(--md-sys-color-on-primary);
   }
@@ -139,11 +140,11 @@ nav {
         cursor: pointer;
 
         &.active {
-          background-color: var(--md-ref-palette-primary80);
+          background-color: var(--md-sys-color-primary-container-dark);
         }
 
         &:hover:not(.active) {
-          background-color: var(--md-ref-palette-primary70);
+          background-color: var(--md-sys-color-on-primary-dark);
         }
 
         &.btn, &.btn-large, &.btn-flat, &.btn-floating {
@@ -211,17 +212,17 @@ nav {
   height: var(--navbar-height-mobile);
   z-index: 997;
 
-  nav {
+  .navbar {
     position: fixed;
     right: 0;
   }
 }
 
 @media #{$medium-and-up} {
-  nav.nav-extended .nav-wrapper {
+  .nav.nav-extended .nav-wrapper {
     min-height: var(--navbar-height-mobile);
   }
-  nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
+  .nav, .navbar .nav-wrapper i, nav a.sidenav-trigger, .navbar a.sidenav-trigger i {
     height: var(--navbar-height);
     line-height: var(--navbar-height)
   }

package/sass/components/_pagination.scss

@@ -0,0 +1,47 @@
+@use './variables' as *;
+@use './mixins.module.scss' as *;
+
+.pagination {
+  li {
+    display: inline-block;
+    vertical-align: top;
+
+    a {
+      @include btn($height: 2rem, $padding-left: .66rem, $padding-right: .66rem, $font-size: 1.2rem);
+    }
+
+    &.active a {
+      @include btn-filled;
+    }
+
+    &.disabled a {
+      @include btn-disabled;
+    }
+
+    i {
+      font-size: 2rem;
+    }
+  }
+
+  li.pages ul li {
+    display: inline-block;
+    float: none;
+  }
+}
+
+@media #{$medium-and-down} {
+  .pagination {
+    width: 100%;
+
+    li.prev,
+    li.next {
+      width: 10%;
+    }
+
+    li.pages {
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}