material_components_web-sass 0.15.0 → 0.16.0

data/vendor/assets/stylesheets/@material/animation/_functions.scss

@@ -17,9 +17,13 @@
 @import "./variables";
 
 @function mdc-animation-enter($name, $duration, $delay: 0ms) {
-  @return $name $duration $delay $mdc-animation-linear-out-slow-in-timing-function;
+  @return $name $duration $delay $mdc-animation-deceleration-curve-timing-function;
 }
 
-@function mdc-animation-exit($name, $duration, $delay: 0ms) {
-  @return $name $duration $delay $mdc-animation-fast-out-linear-in-timing-function;
+@function mdc-animation-exit-permanent($name, $duration, $delay: 0ms) {
+  @return $name $duration $delay $mdc-animation-acceleration-curve-timing-function;
+}
+
+@function mdc-animation-exit-temporary($name, $duration, $delay: 0ms) {
+  @return $name $duration $delay $mdc-animation-sharp-curve-timing-function;
 }

data/vendor/assets/stylesheets/@material/animation/_mixins.scss

@@ -16,14 +16,18 @@
 
 @import "./variables";
 
-@mixin mdc-animation-linear-out-slow-in {
-  animation-timing-function: $mdc-animation-linear-out-slow-in-timing-function;
+@mixin mdc-animation-deceleration-curve {
+  animation-timing-function: $mdc-animation-deceleration-curve-timing-function;
 }
 
-@mixin mdc-animation-fast-out-slow-in {
-  animation-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
+@mixin mdc-animation-standard-curve {
+  animation-timing-function: $mdc-animation-standard-curve-timing-function;
 }
 
-@mixin mdc-animation-fast-out-linear-in {
-  animation-timing-function: $mdc-animation-fast-out-linear-in-timing-function;
+@mixin mdc-animation-acceleration-curve {
+  animation-timing-function: $mdc-animation-acceleration-curve-timing-function;
+}
+
+@mixin mdc-animation-sharp-curve {
+  animation-timing-function: $mdc-animation-sharp-curve-timing-function;
 }

data/vendor/assets/stylesheets/@material/animation/_variables.scss

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
-$mdc-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, .2, 1) !default;
-$mdc-animation-fast-out-slow-in-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
-$mdc-animation-fast-out-linear-in-timing-function: cubic-bezier(.4, 0, 1, 1) !default;
+$mdc-animation-deceleration-curve-timing-function: cubic-bezier(0, 0, .2, 1) !default;
+$mdc-animation-standard-curve-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
+$mdc-animation-acceleration-curve-timing-function: cubic-bezier(.4, 0, 1, 1) !default;
+$mdc-animation-sharp-curve-timing-function: cubic-bezier(.4, 0, .6, 1) !default;

data/vendor/assets/stylesheets/@material/animation/mdc-animation.scss

@@ -17,15 +17,19 @@
 @import "./mixins";
 
 .mdc-animation {
-  &-linear-out-slow-in {
-    @include mdc-animation-linear-out-slow-in;
+  &-deceleration-curve {
+    @include mdc-animation-deceleration-curve;
   }
 
-  &-fast-out-slow-in {
-    @include mdc-animation-fast-out-slow-in;
+  &-standard-curve {
+    @include mdc-animation-standard-curve;
   }
 
-  &-fast-out-linear-in {
-    @include mdc-animation-fast-out-linear-in;
+  &-acceleration-curve {
+    @include mdc-animation-acceleration-curve;
+  }
+
+  &-sharp-curve {
+    @include mdc-animation-sharp-curve;
   }
 }

data/vendor/assets/stylesheets/@material/button/mdc-button.scss

@@ -19,6 +19,7 @@
 @import "@material/elevation/mixins";
 @import "@material/ripple/mixins";
 @import "@material/theme/mixins";
+@import "@material/typography/mixins";
 
 // postcss-bem-linter: define button
 
@@ -27,6 +28,7 @@
   @include mdc-ripple-bg((pseudo: "::before"));
   @include mdc-ripple-fg((pseudo: "::after"));
   @include mdc-theme-prop(color, text-primary-on-light);
+  @include mdc-typography-base;
 
   display: inline-block;
   position: relative;

data/vendor/assets/stylesheets/@material/card/mdc-card.scss

@@ -50,7 +50,7 @@
     box-sizing: border-box;
 
     @include mdc-typography(body1);
-    @include mdc-theme-prop(color, text-primary-on-background);
+    @include mdc-theme-prop(color, text-primary-on-light);
 
     @include mdc-theme-dark(".mdc-card") {
       @include mdc-theme-prop(color, text-primary-on-dark);
@@ -132,7 +132,7 @@
 
   &__title {
     @include mdc-typography(body2);
-    @include mdc-theme-prop(color, text-primary-on-background);
+    @include mdc-theme-prop(color, text-primary-on-light);
 
     // Adjust text color for dark theme.
     @include mdc-theme-dark(".mdc-card") {
@@ -150,7 +150,7 @@
 
   &__subtitle {
     @include mdc-typography(body1);
-    @include mdc-theme-prop(color, text-primary-on-background);
+    @include mdc-theme-prop(color, text-primary-on-light);
 
     // Adjust text color for dark theme.
     @include mdc-theme-dark(".mdc-card") {

data/vendor/assets/stylesheets/@material/checkbox/_keyframes.scss

@@ -74,7 +74,7 @@
   }
 
   50% {
-    @include mdc-animation-linear-out-slow-in;
+    @include mdc-animation-deceleration-curve;
   }
 
   100% {
@@ -99,7 +99,7 @@
 
 @keyframes mdc-checkbox-checked-unchecked-checkmark-path {
   from {
-    @include mdc-animation-fast-out-linear-in;
+    @include mdc-animation-acceleration-curve;
 
     opacity: 1;
     stroke-dashoffset: 0;
@@ -116,7 +116,7 @@
     transform: rotate(0deg);
     opacity: 1;
 
-    @include mdc-animation-linear-out-slow-in;
+    @include mdc-animation-deceleration-curve;
   }
 
   to {
@@ -143,7 +143,7 @@
     transform: rotate(-45deg);
     opacity: 0;
 
-    @include mdc-animation-linear-out-slow-in;
+    @include mdc-animation-deceleration-curve;
   }
 
   to {

data/vendor/assets/stylesheets/@material/checkbox/mdc-checkbox.scss

@@ -30,7 +30,7 @@
 }
 
 @function mdc-checkbox-transition-exit($property, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
-  @return mdc-animation-exit($property, $duration, $delay);
+  @return mdc-animation-exit-temporary($property, $duration, $delay);
 }
 
 @mixin mdc-checkbox-cover-element {

data/vendor/assets/stylesheets/@material/drawer/_mixins.scss

@@ -44,6 +44,8 @@
 
 @mixin mdc-drawer-header_() {
   /* Use aspect ratio trick to maintain 16:9 aspect ratio on the header */
+  // styline things header is a type
+  // stylelint-disable selector-max-type
   &__header {
     position: relative;
   }
@@ -65,6 +67,7 @@
     padding: 16px;
     box-sizing: border-box;
   }
+  // stylelint-enable selector-max-type
 }
 
 @mixin mdc-drawer-list_() {
@@ -112,7 +115,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    transition: mdc-animation-exit(opacity, 120ms);
+    transition: mdc-animation-exit-temporary(opacity, 120ms);
     border-radius: inherit;
     background: currentColor;
     content: "";
@@ -135,7 +138,7 @@
   }
 
   .mdc-list-item:active:focus::before {
-    transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
+    transition-timing-function: $mdc-animation-standard-curve-timing-function;
   }
 }
 

data/vendor/assets/stylesheets/@material/drawer/persistent/mdc-persistent-drawer.scss

@@ -61,7 +61,7 @@ $mdc-persistent-drawer-dark-theme-bg-color: #212121 !default;
 
   &--animating {
     .mdc-persistent-drawer__drawer {
-      transition: $mdc-slidable-drawer-transition;
+      transition: $mdc-slidable-drawer-transition-close;
     }
 
     &.mdc-persistent-drawer--open .mdc-persistent-drawer__drawer {

data/vendor/assets/stylesheets/@material/drawer/slidable/_variables.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-$mdc-slidable-drawer-transition-time: .13s;
-$mdc-slidable-drawer-transition-open-time: .33s;
-$mdc-slidable-drawer-transition: mdc-animation-enter(transform, $mdc-slidable-drawer-transition-time);
+$mdc-slidable-drawer-transition-close-time: .195s;
+$mdc-slidable-drawer-transition-open-time: .225s;
+$mdc-slidable-drawer-transition-close: mdc-animation-exit-temporary(transform, $mdc-slidable-drawer-transition-close-time);
 $mdc-slidable-drawer-transition-open: mdc-animation-enter(transform, $mdc-slidable-drawer-transition-open-time);

data/vendor/assets/stylesheets/@material/drawer/temporary/mdc-temporary-drawer.scss

@@ -34,7 +34,7 @@
   pointer-events: none;
   box-sizing: border-box;
   contain: strict;
-  z-index: 3;
+  z-index: 5;
 
   /* Shaded background */
   &::before {
@@ -111,7 +111,7 @@
     }
 
     .mdc-temporary-drawer__drawer {
-      transition: $mdc-slidable-drawer-transition;
+      transition: $mdc-slidable-drawer-transition-close;
     }
   }
 

data/vendor/assets/stylesheets/@material/elevation/_mixins.scss

@@ -30,8 +30,9 @@
   }
 
   #{$mdc-elevation-property}:
-    #{map-get($mdc-elevation-umbra-map, $z-value)} $mdc-elevation-umbra-color,
-    #{map-get($mdc-elevation-penumbra-map, $z-value)} $mdc-elevation-penumbra-color;
+    #{"#{map-get($mdc-elevation-umbra-map, $z-value)} #{$mdc-elevation-umbra-color}"},
+    #{"#{map-get($mdc-elevation-penumbra-map, $z-value)} #{$mdc-elevation-penumbra-color}"},
+    #{map-get($mdc-elevation-ambient-map, $z-value)} $mdc-elevation-ambient-color;
 }
 
 /**

data/vendor/assets/stylesheets/@material/elevation/_variables.scss

@@ -119,4 +119,4 @@ $mdc-elevation-transition-duration: 280ms !default;
 /**
  * The default easing value for elevation transitions.
  */
-$mdc-elevation-transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function !default;
+$mdc-elevation-transition-timing-function: $mdc-animation-standard-curve-timing-function !default;

data/vendor/assets/stylesheets/@material/fab/mdc-fab.scss

@@ -30,7 +30,7 @@
   width: 56px;
   height: 56px;
   padding: 0;
-  transition: box-shadow 280ms $mdc-animation-fast-out-slow-in-timing-function;
+  transition: box-shadow 280ms $mdc-animation-standard-curve-timing-function;
   border: none;
   border-radius: 50%;
   cursor: pointer;
@@ -83,12 +83,12 @@
   // This allows for using SVGs within them to align properly in all browsers.
   // Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.
 
-  // stylelint-disable selector-no-type
+  // stylelint-disable selector-max-type
   // postcss-bem-linter: ignore
   > svg {
     width: 100%;
   }
-  // stylelint-enable selector-no-type
+  // stylelint-enable selector-max-type
 
   fieldset:disabled &,
   &:disabled {

data/vendor/assets/stylesheets/@material/form-field/mdc-form-field.scss

@@ -20,7 +20,7 @@
 
 $mdc-form-field-item-spacing: 4px;
 
-/* stylelint-disable selector-no-type */
+/* stylelint-disable selector-max-type */
 .mdc-form-field {
   @include mdc-typography(body1);
   @include mdc-theme-prop(color, text-primary-on-light);
@@ -61,4 +61,4 @@ $mdc-form-field-item-spacing: 4px;
     }
   }
 }
-/* stylelint-enable selector-no-type */
+/* stylelint-enable selector-max-type */

data/vendor/assets/stylesheets/@material/grid-list/mdc-grid-list.scss

@@ -54,8 +54,7 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
 
   &__tiles {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     margin: 0;
     padding: 0;
   }
@@ -171,13 +170,13 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
     font-size: 1rem;
     font-weight: #{map-get($mdc-typography-font-weight-values, medium)};
     line-height: 1rem;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+
+    @include mdc-typography-overflow-ellipsis;
   }
 
   &__support-text {
     @include mdc-typography(body1);
+    @include mdc-typography-overflow-ellipsis;
 
     display: block;
     margin: 0;

data/vendor/assets/stylesheets/@material/layout-grid/_mixins.scss

@@ -12,32 +12,62 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+// returns the lower grid boundary or null if the smallest grid is selected
+@function mdc-layout-grid-breakpoint-min($size) {
+  @if not map-has-key($mdc-layout-grid-columns, $size) {
+    @error "Invalid style specified! Choose one of #{map-keys($mdc-layout-grid-columns)}";
+  }
+  $min: map-get($mdc-layout-grid-breakpoints, $size);
+
+  @return if($min != 0, $min, null);
+}
+
+// returns the upper grid boundary or null if the largest grid is selected
+@function mdc-layout-grid-breakpoint-max($size) {
+  @if not map-has-key($mdc-layout-grid-columns, $size) {
+    @error "Invalid style specified! Choose one of #{map-keys($mdc-layout-grid-columns)}";
+  }
+  $names: map-keys($mdc-layout-grid-columns);
+  $n: index($names, $size);
+  $prev: if($n > 1, nth($names, $n - 1), null);
+
+  @return if($prev, (mdc-layout-grid-breakpoint-min($prev) - 1px), null);
+}
+
 // Private mixins, meant for internal use.
 @mixin mdc-layout-grid-media-query_($size) {
   @if not map-has-key($mdc-layout-grid-columns, $size) {
     @error "Invalid style specified! Choose one of #{map-keys($mdc-layout-grid-columns)}";
   }
 
-  @if $size == phone {
+  $min: mdc-layout-grid-breakpoint-min($size);
+  $max: mdc-layout-grid-breakpoint-max($size);
+
+  @if $min == null and $max != null {
     // Phone
-    @media (max-width: map-get($mdc-layout-grid-breakpoints, tablet) - 1px) {
+    @media (max-width: $max) {
       @content;
     }
   }
 
-  @if $size == tablet {
+  @else if $min != null and $max != null {
     // Tablet
-    @media (min-width: map-get($mdc-layout-grid-breakpoints, tablet)) and (max-width: map-get($mdc-layout-grid-breakpoints, desktop) - 1px) {
+    @media (min-width: $min) and (max-width: $max) {
       @content;
     }
   }
 
-  @if $size == desktop {
+  @else if $min != null and $max == null {
     // Desktop
-    @media (min-width: map-get($mdc-layout-grid-breakpoints, desktop)) {
+    @media (min-width: $min) {
       @content;
     }
   }
+
+  @else {
+    // Fallback - no breakpoints defined
+    @content;
+  }
 }
 
 @mixin mdc-layout-grid-cell-span_($size, $span, $gutter) {

data/vendor/assets/stylesheets/@material/layout-grid/mdc-layout-grid.scss

@@ -46,13 +46,16 @@
 }
 
 .mdc-layout-grid__cell {
+  // select the upper breakpoint
+  $upper-breakpoint: nth(map-keys($mdc-layout-grid-columns), 1);
+
   @each $size in map-keys($mdc-layout-grid-columns) {
     @include mdc-layout-grid-media-query_($size) {
       $gutter: map-get($mdc-layout-grid-default-gutter, $size);
 
       @include mdc-layout-grid-cell($size, $mdc-layout-grid-default-column-span, $gutter);
 
-      @for $span from 1 through map-get($mdc-layout-grid-columns, desktop) {
+      @for $span from 1 through map-get($mdc-layout-grid-columns, $upper-breakpoint) {
         // Span classes.
         // stylelint-disable max-nesting-depth
         @at-root .mdc-layout-grid__cell--span-#{$span},
@@ -65,7 +68,7 @@
   }
 
   // Order override classes.
-  @for $i from 1 through map-get($mdc-layout-grid-columns, desktop) {
+  @for $i from 1 through map-get($mdc-layout-grid-columns, $upper-breakpoint) {
     &--order-#{$i} {
       @include mdc-layout-grid-cell-order($i);
     }

data/vendor/assets/stylesheets/@material/linear-progress/mdc-linear-progress.scss

@@ -21,7 +21,7 @@
   width: 100%;
   height: 4px;
   transform: translateZ(0);
-  transition: mdc-animation-exit(opacity, 250ms);
+  transition: mdc-animation-exit-temporary(opacity, 250ms);
   overflow: hidden;
 
   &__bar {
@@ -30,7 +30,7 @@
     width: 100%;
     height: 100%;
     transform-origin: top left;
-    transition: mdc-animation-exit(transform, 250ms);
+    transition: mdc-animation-exit-temporary(transform, 250ms);
   }
 
   &__bar-inner {
@@ -64,7 +64,7 @@
     width: 100%;
     height: 100%;
     transform-origin: top left;
-    transition: mdc-animation-exit(transform, 250ms);
+    transition: mdc-animation-exit-temporary(transform, 250ms);
     background-color: #e6e6e6;
   }