@materializecss/materialize 2.2.1 → 2.2.2

package/sass/components/_preloader.scss

@@ -1,4 +1,6 @@
-// Progress Bar
+@use './variables' as *;
+@use './colors.module.scss' as *;
+
 .progress {
   position: relative;
   height: 4px;

package/sass/components/_pulse.scss

@@ -1,4 +1,7 @@
 .pulse {
+  overflow: visible;
+  position: relative;
+
   &::before {
     content: '';
     display: block;
@@ -14,9 +17,6 @@
     animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
     z-index: -1;
   }
-
-  overflow: visible;
-  position: relative;
 }
 
 @keyframes pulse-animation {

package/sass/components/_sidenav.scss

@@ -1,4 +1,6 @@
-/* This should be an UL-Element*/
+@use './variables' as *;
+@use './global' as *;
+
 .sidenav {
   --sidenav-width: 300px;
   --sidenav-font-size: 14px;
@@ -67,7 +69,6 @@
     margin: 0 12px;
     padding: 0 var(--sidenav-padding);
     //padding-left: var(--sidenav-padding);
-
     // Truncate too long text
     /*
     min-width: 0;
@@ -75,7 +76,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     */
-
     display: flex;
     height: var(--sidenav-item-height);
     font-size: var(--sidenav-font-size);
@@ -86,7 +86,6 @@
 
     &:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) {
       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
@@ -103,7 +102,6 @@
     & > .material-symbols-rounded, & > .material-symbols-sharp {
       display: inline-flex;
       vertical-align: middle;
-      //color: $sidenav-icon-color;
       margin-right: 12px;
     }
   }
@@ -115,7 +113,7 @@
   .subheader {
     cursor: initial;
     pointer-events: none;
-    color: red; //$sidenav-subheader-color;
+    color: red;
     font-size: var(--sidenav-font-size);
     font-weight: 500;
     line-height: var(--sidenav-line-height);
@@ -128,12 +126,12 @@
     margin-bottom: calc(var(--sidenav-padding) * 0.5);
 
     & > a {
+      height: auto;
+      padding: 0;
+
       &:hover {
         background-color: transparent;
       }
-
-      height: auto;
-      padding: 0;
     }
 
     .background {
@@ -175,27 +173,27 @@
 
 // Touch interaction
 .drag-target {
-  // Right Align
-  &.right-aligned {
-    right: 0;
-  }
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 998;
+
+  &.right-aligned {
+    right: 0;
+  }
 }
 
 // Fixed Sidenav shown
 .sidenav.sidenav-fixed {
-  // Right Align
+  left: 0;
+  transform: translateX(0);
+  position: fixed;
+
   &.right-aligned {
     right: 0;
     left: auto;
   }
-  left: 0;
-  transform: translateX(0);
-  position: fixed;
 }
 
 // Fixed Sidenav hide on smaller

package/sass/components/_slider.scss

@@ -103,9 +103,10 @@
       position: absolute;
       top: 0;
       left: 0;
+      width: 100%;
+      height: 100%;
       cursor: pointer;
       background-color: var(--md-sys-color-shadow-light);
-
       transition: background-color .3s;
       border-radius: 50%;
       border-width: 0;
@@ -113,9 +114,6 @@
       &.active {
         background-color: var(--md-sys-color-primary);
       }
-
-      width: 100%;
-      height: 100%;
     }
   }
 }

package/sass/components/_tabs.scss

@@ -1,6 +1,15 @@
+@use './variables' as *;
+
 .tabs {
   padding-left: 0;
   list-style-type: none;
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  width: 100%;
+  background-color: var(--md-sys-color-surface);
+  margin: 0 auto;
+  white-space: nowrap;
 
   &.tabs-transparent {
     background-color: transparent;
@@ -37,32 +46,25 @@
 
   &.tabs-fixed-width {
     display: flex;
+
     .tab {
       flex-grow: 1;
     }
   }
 
-  position: relative;
-  overflow-x: auto;
-  overflow-y: hidden;  
-  width: 100%;
-  background-color: var(--md-sys-color-surface);
-  margin: 0 auto;
-  white-space: nowrap;
-
   .tab {
     padding-left: 0;
     list-style-type: none;
     display: inline-block;
     text-align: center;
-    line-height: 48px;    
+    line-height: 48px;
     padding: 0;
     margin: 0;
 
     i.material-icons {
       position: relative;
-      top: 8px;      
-      vertical-align: middle;        
+      top: 8px;
+      vertical-align: middle;
     }
 
     span {
@@ -71,6 +73,18 @@
     }
 
     a {
+      color: var(--md-sys-color-on-surface-variant);
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      min-height: 48px;  //needed for only-icons tabs
+      padding: 0 24px;
+      font-size: 14px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      transition: color .28s ease, background-color .28s ease;
+
       &.active {
         background-color: transparent;
       }
@@ -85,33 +99,29 @@
         background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
       }
 
-      &:focus,
+      &:focus {
+        background-color: var(--md-sys-color-primary-container);
+      }
+
       &.active {
         background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
-        outline: none;
       }
 
-      color: var(--md-sys-color-on-surface-variant);
-      display: flex;
-      flex-direction: column;  
-      width: 100%;
-      height: 100%;
-      min-height: 48px;  //needed for only-icons tabs
-      padding: 0 24px;
-      font-size: 14px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      transition: color .28s ease, background-color .28s ease;
+      &:focus,
+      &.active {
+        outline: none;
+      }
     }
 
     &.disabled a,
     &.disabled a:hover {
-      &:not(:focus) {
-        background-color: transparent;
-      }
       color: var(--md-sys-color-on-surface);
       cursor: default;
       background-color: transparent;
+
+      &:not(:focus) {
+        background-color: transparent;
+      }
     }
   }
 
@@ -123,19 +133,19 @@
     will-change: left, right;
     border-radius: 3px 3px 0 0;
   }
-  
-  &.tabs-horizontal .tab { 
+
+  &.tabs-horizontal .tab {
     height: 48px;
 
     a {
       display: block;
     }
-   
+
     i.material-icons {
       padding: 0 4px;
-      position: relative;      
-      top: -2px;            
-      vertical-align: middle;    
+      position: relative;
+      top: -2px;
+      vertical-align: middle;
     }
   }
 }
@@ -145,8 +155,10 @@
 @media #{$medium-and-down} {
   .tabs {
     display: flex;
+
     .tab {
       flex-grow: 1;
+
       a {
         padding: 0 12px;
       }

package/sass/components/_tapTarget.scss

@@ -53,6 +53,10 @@
 }
 
 .tap-target-wave {
+  position: absolute;
+  border-radius: 50%;
+  z-index: 10001;
+
   &::before,
   &::after {
     content: '';
@@ -75,24 +79,19 @@
       visibility 0s;
     z-index: -1;
   }
-
-  position: absolute;
-  border-radius: 50%;
-  z-index: 10001;
 }
 
 .tap-target-origin {
-  &:not(.btn),
-  &:not(.btn):hover {
-    background: none;
-  }
-
   top: 50%;
   left: 50%;
-  transform: translate(-50%,-50%);
-
   z-index: 10002;
   position: absolute !important;
+  transform: translate(-50%,-50%);
+
+  &:not(.btn),
+  &:not(.btn):hover {
+    background: none;
+  }
 }
 
 @media only screen and (max-width: 600px) {

package/sass/components/_timepicker.scss

@@ -1,37 +1,35 @@
-/* Timepicker Containers */
-.timepicker-modal {
-  max-width: 325px;
-  max-height: none;
-}
+@use './variables' as *;
 
-.timepicker-container.modal-content {
+.timepicker-container {
   display: flex;
   flex-direction: column;
+  max-width: 325px;
   padding: 0;
+  background-color: var(--md-sys-color-inverse-on-surface);
 }
 
 .text-primary {
   color:  var(--md-sys-color-on-primary);
 }
 
-
 /* Clock Digital Display */
 .timepicker-digital-display {
   width: auto;
   flex: 1 auto;
-  background-color: var(--md-sys-color-primary);;
+  // background-color: var(--md-sys-color-surface);
   padding: 2rem .67rem .67rem .67rem;
   font-weight: 300;
 }
 
 .timepicker-text-container {
+  display: flex;
   font-size: 4rem;
   text-align: left;
   color: var(--font-on-primary-color-medium);
   font-weight: 400;
-  position: relative;
+  /*position: relative;*/
   user-select: none;
-  padding: 1rem 1rem 1.5rem 1rem;
+  padding: 1rem 1rem 1.3rem 1rem;
 
   input[type=text]{
     height: 4rem;
@@ -46,10 +44,15 @@
   display: inline-flex;
 }
 
+.timepicker-display-digital-clock {
+  flex-grow: 1;
+  display: inline-flex;
+}
+
 .timepicker-input-hours-wrapper,
 .timepicker-input-minutes-wrapper {
   width: 6.9rem;
-  height: 5.2rem;
+  height: 5.75rem;
 }
 
 .timepicker-input-hours,
@@ -61,9 +64,15 @@
 input[type=text].timepicker-input-hours,
 input[type=text].timepicker-input-minutes {
   height: 100%;
-  padding: .8rem;
+  padding: 1.33rem .8rem;
   border: 0;
   text-align: center;
+  color: var(--md-sys-color-on-background);
+  background-color: var(--md-sys-color-surface-variant);
+
+  &:focus {
+    background-color: var(--md-sys-color-primary-container);
+  }
 }
 
 .timepicker-input-divider-wrapper {
@@ -71,42 +80,42 @@ input[type=text].timepicker-input-minutes {
   text-align: center;
 }
 
-input[type=text].text-primary {
+/*input[type=text].text-primary {
   color: var(--md-sys-color-on-background);
-}
+}*/
 
 .timepicker-display-am-pm {
   font-size: 1.3rem;
-  position: absolute;
+  /*position: absolute;
   top: 1rem;
-  right: 1rem;
+  right: 1rem;*/
   font-weight: 400;
 }
 
 .timepicker-span-am-pm {
-  height: 5.2rem;
+  height: 5.75rem;
   max-width: 3.5rem;
 }
 
-.timepicker-modal .am-btn,
-.timepicker-modal .pm-btn {
+.timepicker-container .am-btn,
+.timepicker-container .pm-btn {
   width: 3.6rem;
   height: 50%;
-  padding-left: calc(var(--btn-padding) / 1.6);
-  padding-right: calc(var(--btn-padding) / 1.6);
+  padding-left: calc(var(--btn-padding) / 1.8);
+  padding-right: calc(var(--btn-padding) / 1.8);
   line-height: 2rem;
   vertical-align: middle;
   text-align: center;
-  background-color: transparent;
+  // background-color: transparent;
   border: 1px solid var(--md-sys-color-outline);
 }
 
-.timepicker-modal .am-btn {
+.timepicker-container .am-btn {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.timepicker-modal .pm-btn {
+.timepicker-container .pm-btn {
   border-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -116,17 +125,17 @@ input[type=text].text-primary {
 .timepicker-analog-display {
   flex: 2.5 auto;
   padding: .67rem;
-  background-color: var(--md-sys-color-surface);
+  // background-color: var(--md-sys-color-surface);
 }
 
 .timepicker-plate {
-  background-color: rgba(0, 0, 0, 0.09);
+  background-color: var(--md-sys-color-surface-variant);
   border-radius: 50%;
   width: 260px;
   height: 260px;
   overflow: visible;
   position: relative;
-  margin: 2rem 1.6rem 1.6rem 1.6rem;
+  margin: 0 1.6rem 1.6rem 1.6rem;
   user-select: none;
 }
 
@@ -165,6 +174,8 @@ input[type=text].text-primary {
 }
 
 .timepicker-dial-out {
+  opacity: 0;
+
   &.timepicker-hours {
     transform: scale(1.1, 1.1);
   }
@@ -172,8 +183,6 @@ input[type=text].text-primary {
   &.timepicker-minutes {
     transform: scale(.8, .8);
   }
-
-  opacity: 0;
 }
 
 .timepicker-canvas {
@@ -224,12 +233,12 @@ input[type=text].text-primary {
 
 /* Media Queries */
 @media #{$large-and-up} {
-  .timepicker-modal {
+  .timepicker-container {
     width: auto;
     max-width: 620px;
   }
 
-  .timepicker-container.modal-content {
+  .timepicker-container {
     flex-direction: row;
   }
 
@@ -238,42 +247,48 @@ input[type=text].text-primary {
   }
 
   .timepicker-text-container {
-    top: 31%;
+    /*top: 31%;*/
+    flex-direction: column;
+    margin-top: 4.8rem;
     text-align: center;
   }
 
+  .timepicker-display-column {
+    padding: 0 3%;
+  }
+
   .timepicker-display-am-pm {
-    position: relative;
-    top: auto;
-    right: auto;
-    text-align: center;
-    margin-top: 1.2rem;
+    margin-top: 1.1rem;
   }
 
   .timepicker-span-am-pm {
+    display: flex;
+    flex-grow: 1;
     max-width: unset;
   }
 
-  .timepicker-modal .am-btn,
-  .timepicker-modal .pm-btn {
-    width: auto;
-    padding-left: var(--btn-padding);
-    padding-right: var(--btn-padding);
+  .timepicker-container .am-btn,
+  .timepicker-container .pm-btn {
+    flex-grow: 1;
+    /*width: auto;*/
+    padding-left: calc(var(--btn-padding) / .565);
+    padding-right: calc(var(--btn-padding) / .565);
     border-radius: var(--btn-border-radius);
     border: 1px solid var(--md-sys-color-outline);
-    line-height: inherit;
-    vertical-align: top;
-    text-align: inherit;
   }
 
-  .timepicker-modal .am-btn {
+  .timepicker-container .am-btn {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .timepicker-modal .pm-btn {
+  .timepicker-container .pm-btn {
     border-left: 0;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
+
+  .timepicker-plate {
+    margin-top: 1.6rem;
+  }
 }

package/sass/components/_toast.scss

@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './global' as *;
+
 #toast-container {
   display:block;
   position: fixed;

package/sass/components/_tooltip.scss

@@ -1,36 +1,28 @@
 .material-tooltip {
   padding: 0 8px;  
   border-radius: 4px;
-  
   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);
   font-weight: var(--md-sys-typescale-body-small-font-weight);
-
   min-height: 24px;
   opacity: 0;
-
   padding-top: 6px;
   padding-bottom: 6px;
-
   font-size: 12px;
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.4px;
-  
   position: absolute;
   max-width: 300px;
   overflow: hidden;
   left: 0;
   top: 0;
   pointer-events: none;
-
   display: flex;
   align-items: center;
-  
   visibility: hidden;
   z-index: 2000;
 }

package/sass/components/_transitions.scss

@@ -1,5 +1,6 @@
-// Scale transition
 .scale-transition {
+  transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+
   &.scale-out {
     transform: scale(0);
     transition: transform .2s !important;
@@ -8,6 +9,4 @@
   &.scale-in {
     transform: scale(1);
   }
-
-  transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
 }

package/sass/components/_typography.scss

@@ -1,5 +1,6 @@
 
 @use "sass:math";
+@use './variables' as *;
 
 a {
   text-decoration: none;
@@ -7,6 +8,9 @@ a {
 
 html{
   // line-height: 1.5;
+  font-family: $font-stack;
+  font-weight: normal;
+  color: $text-color;
 
   @media only screen and (min-width: 0) {
     font-size: 14px;
@@ -19,10 +23,6 @@ html{
   @media only screen and (min-width: $large-screen-up) {
     font-size: 15px;
   }
-
-  font-family: $font-stack;
-  font-weight: normal;
-  color: $text-color;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -49,7 +49,7 @@ small { font-size: 75%; }
 .flow-text{
   $i: 0;
   @while $i <= $intervals {
-    @media only screen and (min-width : 360 + ($i * $interval-size)) {
+    @media only screen and (min-width : (360 + ($i * $interval-size))) {
       font-size: 1.2rem * (1 + (.02 * $i));
     }
     $i: $i + 1;

package/sass/components/_variables.scss

@@ -2,10 +2,11 @@
 $md_sys_typescale_body-large_size: 16px;
 
 @use "sass:math";
+@use "./_color-variables";
 
 // Colors
-$success-color: color("green", "base") !default;
-$link-color: color("light-blue", "darken-1") !default;
+$success-color: colorFunc("green", "base") !default;
+$link-color: colorFunc("light-blue", "darken-1") !default;
 
 // Floating buttons
 $button-floating-background: var(--md-sys-color-secondary) !default;