@materializecss/materialize 2.0.3 → 2.1.0

package/sass/components/_cards.scss

@@ -1,19 +1,17 @@
-
-
 .card-panel {
   transition: box-shadow .25s;
-  padding: $card-padding;
+  padding: 24px;
   margin: $element-top-margin 0 $element-bottom-margin 0;
   border-radius: 12px;
   @extend .z-depth-1;
-  background-color: $card-bg-color;
+  background-color: var(--md-sys-color-surface);
 }
 
 .card {
   overflow: hidden;
   position: relative;
   //margin: $element-top-margin 0 $element-bottom-margin 0;
-  background-color: $card-bg-color;
+  background-color: var(--md-sys-color-surface);
   transition: box-shadow .25s;
   border-radius: 12px;
   @extend .z-depth-1;
@@ -129,17 +127,17 @@
     }
 
     .card-title {
-      color: $card-bg-color;
+      color: var(--md-sys-color-surface);
       position: absolute;
       bottom: 0;
       left: 0;
       max-width: 100%;
-      padding: $card-padding;
+      padding: 24px;
     }
   }
 
   .card-content {
-    padding: $card-padding;
+    padding: 24px;
     border-radius: 0 0 2px 2px;
 
     p {
@@ -161,29 +159,29 @@
       border-radius: 0 0 2px 2px;
     }
 
-    border-top: 1px solid $divider-color;
+    border-top: 1px solid var(--md-sys-color-outline-variant);
     position: relative;
     background-color: inherit;
 
     a {
-      padding: 16px $card-padding;
+      padding: 16px 24px;
       display: inline-block;
     }
 
     a:not(.btn):not(.btn-large):not(.btn-floating) {
-      color: $card-link-color;
+      color: var(--md-sys-color-primary);
       transition: color .3s ease;
 
       &:hover {
-        background-color: $primary-color-hover-opaque;
+        background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
       }
     }
   }
 
   .card-reveal {
-    padding: $card-padding;
+    padding: 24px;
     position: absolute;
-    background-color: $card-bg-color;
+    background-color: var(--md-sys-color-surface);
     width: 100%;
     overflow-y: auto;
     left: 0;

package/sass/components/_carousel.scss

@@ -1,4 +1,6 @@
 .carousel {
+  --carousel-height: 400px;
+
   &.carousel-slider {
     top: 0;
     left: 0;
@@ -18,7 +20,7 @@
     .carousel-item {
       width: 100%;
       height: 100%;
-      min-height: $carousel-height;
+      min-height: var(--carousel-height);
       position: absolute;
       top: 0;
       left: 0;
@@ -38,15 +40,15 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  height: $carousel-height;
+  height: var(--carousel-height);
   perspective: 500px;
   transform-style: preserve-3d;
   transform-origin: 0% 50%;
 
   .carousel-item {
     visibility: hidden;
-    width: $carousel-item-width;
-    height: $carousel-item-height;
+    width: calc(var(--carousel-height) * 0.5);
+    height: calc(var(--carousel-height) * 0.5);
     position: absolute;
     top: 0;
     left: 0;
@@ -69,7 +71,7 @@
 
     .indicator-item {
       &.active {
-        background-color: $carousel-indicator-color-active;
+        background-color: var(--md-ref-palette-primary100);
       }
 
       display: inline-block;
@@ -78,7 +80,7 @@
       height: 8px;
       width: 8px;
       margin: 24px 4px;
-      background-color: $carousel-indicator-color;
+      background-color: rgba(255, 255, 255, 0.45);
 
       transition: background-color .3s;
       border-radius: 50%;

package/sass/components/_chips.scss

@@ -3,7 +3,8 @@
   --font-size-icon: 18px;
   --padding: 8px;
 
-  background-color: $chip-bg-color;
+  color: var(--md-sys-color-on-surface-variant);
+  background-color: rgba(0, 0, 0, 0.09);
 
   display: inline-flex;
   white-space: nowrap;
@@ -17,7 +18,6 @@
   
   font-size: var(--font-size);
   font-weight: 500;  
-  color: $chip-font-color;
   
   border-radius: 8px;
 
@@ -27,8 +27,8 @@
 
   &:focus {
     outline: none;
-    background-color: $chip-selected-color;
-    color: $chip-selected-font-color;
+    background-color: var(--md-sys-color-primary);
+    color:  var(--md-sys-color-on-primary);
   }
 }
 
@@ -75,9 +75,9 @@
   flex-wrap: wrap;
 
   border: none;
-  border-bottom: 1px solid $chip-border-color;
+  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
   box-shadow: none;
-  margin: $input-margin;
+  margin: 0 0 8px 0;
 
   padding: 4px;
   // min-height: 45px;
@@ -86,8 +86,8 @@
   transition: all .3s;
 
   &.focus {
-    border-bottom: 1px solid $chip-selected-color;
-    box-shadow: 0 1px 0 0 $chip-selected-color;
+    border-bottom: 1px solid var(--md-sys-color-primary);
+    box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
   }
 
   &:hover {
@@ -97,12 +97,11 @@
   input:not([type]):not(.browser-default).input {
     background: none;
     border: 0;
-    color: $input-color;
+    color: var(--md-sys-color-on-background);
     display: inline-block;
-    font-size: $input-font-size;
+    font-size: 16px;
 
     // height: 32px;
-    // height: $input-height;
     // line-height: 32px;
     height: 32px;
 

package/sass/components/_collapsible.scss

@@ -2,9 +2,9 @@
   padding-left: 0;
   list-style-type: none;
 
-  border-top: 1px solid $collapsible-border-color;
-  border-right: 1px solid $collapsible-border-color;
-  border-left: 1px solid $collapsible-border-color;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+  border-right: 1px solid var(--md-sys-color-outline-variant);
+  border-left: 1px solid var(--md-sys-color-outline-variant);
   margin: $element-top-margin 0 $element-bottom-margin 0;
   @extend .z-depth-1;
 }
@@ -19,8 +19,7 @@
   -webkit-tap-highlight-color: transparent;
   line-height: 1.5;
   padding: 1rem;
-  border-bottom: 1px solid $collapsible-border-color;
-  background-color: $collapsible-bg-color;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
 
   i {
     width: 2rem;
@@ -43,16 +42,15 @@
 
 
 .keyboard-focused .collapsible-header:focus {
-  background-color: $surface-focus-color-opaque;
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
 .collapsible-body {
   max-height: 0;
-  border-bottom: 1px solid $collapsible-border-color;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
   box-sizing: border-box;
   padding: 0 2rem;
   overflow: hidden;
-  background-color: $collapsible-bg-color;
 }
 
 // Popout Collapsible

package/sass/components/_collection.scss

@@ -3,17 +3,17 @@
   padding-left: 0;
   list-style-type: none;
   margin: $element-top-margin 0 $element-bottom-margin 0;
-  border: 1px solid $collection-border-color;
-  border-radius: $collection-border-radius;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 2px;
   overflow: hidden;
   position: relative;
 
   .collection-item {
-    background-color: $collection-bg-color;
-    line-height: $collection-line-height;
+    background-color: transparent;
+    line-height: 1.5rem;
     padding: 10px 20px;
     margin: 0;
-    border-bottom: 1px solid $collection-border-color;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
 
     // Avatar Collection
     &.avatar {
@@ -36,8 +36,8 @@
       i.circle {
         font-size: 18px;
         line-height: 42px;
-        color: $collection-avatar-circle-icon-color;
-        background-color: $collection-avatar-circle-bg-color;
+        color: #fff;
+        background-color: var(--md-sys-color-shadow-light);
         text-align: center;
       }
 
@@ -64,11 +64,11 @@
     }
 
     &.active {
-      background-color: $collection-active-bg-color;
-      color: $collection-active-color;
+      background-color: var(--md-sys-color-primary);
+      color:  var(--md-sys-color-on-primary);
 
       .secondary-content {
-        color: $font-on-primary-color-main;
+        color:  var(--md-sys-color-on-primary);
       }
     }
   }
@@ -76,19 +76,19 @@
   a.collection-item {
     display: block;
     transition: .25s;
-    color: $collection-link-color;
+    color: var(--md-sys-color-primary);
 
     &:not(.active) {
       &:hover {
-        background-color: $collection-hover-bg-color;
+        background-color: rgba(0, 0, 0, 0.04);
       }
     }
   }
 
   &.with-header {
     .collection-header {
-      background-color: $collection-bg-color;
-      border-bottom: 1px solid $collection-border-color;
+      background-color: transparent;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
       padding: 10px 20px;
     }
 
@@ -106,7 +106,7 @@
 // Made less specific to allow easier overriding
 .secondary-content {
   float: right;
-  color: $primary-color;
+  color: var(--md-sys-color-primary);
 }
 
 .collapsible .collection {

package/sass/components/_datepicker.scss

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   padding: 0;
-  background-color: $surface-color;
+  background-color: var(--md-sys-color-surface);
 }
 
 .datepicker-controls {
@@ -54,7 +54,7 @@
 
   .month-prev > svg,
   .month-next > svg {
-    fill: $button-flat-color;
+    fill: var(--md-sys-color-on-surface-variant);
   }
 }
 
@@ -69,8 +69,8 @@
 /* Date Display */
 .datepicker-date-display {
   flex: 1 auto;
-  background-color: $primary-color;
-  color: $font-on-primary-color-main;
+  background-color: var(--md-sys-color-primary);
+  color:  var(--md-sys-color-on-primary);
   padding: 20px 22px;
   font-weight: 500;
 
@@ -78,7 +78,7 @@
     display: block;
     font-size: 1.5rem;
     line-height: 25px;
-    color: $datepicker-year;
+    color:  var(--md-sys-color-on-primary);
   }
 
   .date-text {
@@ -115,24 +115,24 @@
 
   abbr {
     text-decoration: none;
-    color: $datepicker-calendar-header-color;
+    color: var(--md-sys-color-on-surface-variant);
   }
 
   td {
-    color: $datepicker-day-font-color;
+    color: var(--md-sys-color-on-background);
 
     &.is-today {
-      color: $primary-color;
+      color: var(--md-sys-color-primary);
     }
 
     &.is-selected {
-      background-color: $primary-color;
-      color: $font-on-primary-color-main;
+      background-color: var(--md-sys-color-primary);
+      color:  var(--md-sys-color-on-primary);
     }
 
     &.is-outside-current-month,
     &.is-disabled {
-      color: $datepicker-day-font-color-disabled;
+      color: var(--md-sys-color-on-surface);
       pointer-events: none;
     }
 
@@ -153,11 +153,11 @@
   color: inherit;
 
   &:hover {
-    background-color: $datepicker-day-hover;
+    background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
   }
 
   &:focus {
-    background-color: $datepicker-day-focus;
+    background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
   }
 }
 
@@ -175,12 +175,12 @@
 .datepicker-clear,
 .datepicker-today,
 .datepicker-done {
-  color: $primary-color;
+  color: var(--md-sys-color-primary);
   padding: 0 1rem;
 }
 
 .datepicker-clear {
-  color: $error-color;
+  color: var(--md-sys-color-error);
 }
 
 

package/sass/components/_dropdown.scss

@@ -1,13 +1,8 @@
 .dropdown-content {
   padding-left: 0;
   list-style-type: none;
-
-  &:focus {
-    outline: 0;
-  }
-
   @extend .z-depth-1;
-  background-color: $dropdown-bg-color;
+  background-color: var(--md-sys-color-surface);
   margin: 0;
   display: none;
   min-width: 100px;
@@ -19,16 +14,10 @@
   z-index: 9999; // TODO: Check if this doesn't break other things
   transform-origin: 0 0;
 
-
   li {
     &:hover, &.active {
-      background-color: $dropdown-hover-bg-color;
+      background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
     }
-
-    &:focus {
-      outline: none;
-    }
-
     &.divider {
       min-height: 0;
       height: 1px;
@@ -36,7 +25,7 @@
 
     & > a, & > span {
       font-size: 16px;
-      color: $dropdown-color;
+      color: var(--md-sys-color-primary);
       display: block;
       line-height: 22px;
       padding: (($dropdown-item-height - 22) * 0.5) 16px;
@@ -57,9 +46,8 @@
       width: 24px;
     }
 
-
     clear: both;
-    color: $text-color;
+    color: var(--md-sys-color-on-background);
     cursor: pointer;
     min-height: $dropdown-item-height;
     line-height: 1.5rem;
@@ -70,7 +58,7 @@
 
 body.keyboard-focused {
   .dropdown-content li:focus {
-    background-color: $dropdown-focus-bg-color;
+    background-color: rgba(0, 0, 0, 0.12);
   }
 }