material_components_web-sass 0.15.0 → 0.16.0

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

@@ -78,7 +78,7 @@ $mdc-list-side-padding: 16px;
 
   &__end-detail {
     @include mdc-list-detail-size_(24px);
-    @include mdc-rtl-reflexive-property(margin, auto, $mdc-list-side-padding, ".mdc-list-item");
+    @include mdc-rtl-reflexive-property(margin, auto, 0, ".mdc-list-item");
   }
 
   &__text {
@@ -144,12 +144,12 @@ $mdc-list-side-padding: 16px;
 // postcss-bem-linter: end //
 
 // Override anchor tag styles for the use-case of a list being used for navigation
-// stylelint-disable selector-no-type,selector-no-qualifying-type
+// stylelint-disable selector-max-type,selector-no-qualifying-type
 a.mdc-list-item {
   color: inherit;
   text-decoration: none;
 }
-// stylelint-enable selector-no-type,selector-no-qualifying-type
+// stylelint-enable selector-max-type,selector-no-qualifying-type
 
 .mdc-list-item.mdc-ripple-upgraded {
   @include mdc-ripple-base;

data/vendor/assets/stylesheets/@material/menu/simple/mdc-simple-menu.scss

@@ -60,7 +60,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
 
   &--animating {
     display: inline-block;
-    transition: opacity $mdc-simple-menu-fade-duration $mdc-animation-linear-out-slow-in-timing-function;
+    transition: opacity $mdc-simple-menu-fade-duration $mdc-animation-deceleration-curve-timing-function;
   }
 
   &__items {
@@ -84,7 +84,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
       > * {
         transition-duration: $mdc-simple-menu-item-fade-duration;
         transition-property: opacity;
-        transition-timing-function: $mdc-animation-linear-out-slow-in-timing-function;
+        transition-timing-function: $mdc-animation-deceleration-curve-timing-function;
       }
     }
 
@@ -171,7 +171,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
     left: 0;
     width: 100%;
     height: 100%;
-    transition: opacity 120ms $mdc-animation-linear-out-slow-in-timing-function;
+    transition: opacity 120ms $mdc-animation-deceleration-curve-timing-function;
     border-radius: inherit;
     background: currentColor;
     content: "";

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

@@ -28,7 +28,7 @@ $mdc-radio-transition-duration: 120ms;
 }
 
 @function mdc-radio-exit($name) {
-  @return mdc-animation-exit($name, $mdc-radio-transition-duration);
+  @return mdc-animation-exit-temporary($name, $mdc-radio-transition-duration);
 }
 
 // postcss-bem-linter: define radio

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

@@ -25,7 +25,7 @@
     // that custom properties are supported within the browser before adding this class, we can
     // safely use them without a fallback.
     transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
-    animation-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
+    animation-timing-function: $mdc-animation-standard-curve-timing-function;
   }
 
   to {

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

@@ -59,6 +59,8 @@
   // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($theme-style) {
     $theme-value: map-get($mdc-theme-property-values, $theme-style);
+
+    /* @alternate */
     $css-var: $theme-value;
     $css-var: var(--mdc-theme-#{$theme-style}, $theme-value);
 
@@ -115,6 +117,8 @@
     left: calc(50% - #{$radius});
     width: $radius * 2;
     height: $radius * 2;
+
+    /* @alternate */
     transform: scale(0);
     transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
@@ -129,14 +133,23 @@
   }
 
   &.mdc-ripple-upgraded--unbounded#{$pseudo} {
+    /* @alternate */
     top: calc(50% - #{$radius / 2});
     top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));
+
+    /* @alternate */
     left: calc(50% - #{$radius / 2});
     left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
+
+    /* @alternate */
     width: $radius;
     width: var(--mdc-ripple-fg-size, $radius);
+
+    /* @alternate */
     height: $radius;
     height: var(--mdc-ripple-fg-size, $radius);
+
+    /* @alternate */
     transform: scale(0);
     transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
@@ -179,8 +192,12 @@
     &#{$pseudo} {
       top: 0;
       left: 0;
+
+      /* @alternate */
       width: $radius;
       width: var(--mdc-ripple-fg-size, $radius);
+
+      /* @alternate */
       height: $radius;
       height: var(--mdc-ripple-fg-size, $radius);
       transform: scale(0);
@@ -194,12 +211,19 @@
   }
 
   &.mdc-ripple-upgraded--unbounded#{$pseudo} {
+    /* @alternate */
     top: 0;
     top: var(--mdc-ripple-top, 0);
+
+    /* @alternate */
     left: 0;
     left: var(--mdc-ripple-left, 0);
+
+    /* @alternate */
     width: $radius;
     width: var(--mdc-ripple-fg-size, $radius);
+
+    /* @alternate */
     height: $radius;
     height: var(--mdc-ripple-fg-size, $radius);
     transform: scale(0);

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

@@ -125,7 +125,7 @@
  * ```
  *
  * You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`,
- * e.g. `@include mdc-rtl-reflexive-box-property(margin, left, 8px, ".mdc-component")`.
+ * e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, ".mdc-component")`.
  *
  * Note that this function will always zero out the original value in an RTL context. If you're
  * trying to flip the values, use mdc-rtl-reflexive-property().
@@ -206,15 +206,15 @@
  * ```
  * An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
  */
-@mixin mdc-rtl-reflexive-position($pos, $value, $root-selector: null) {
-  @if (index((right, left), $pos) == null) {
-    @error "Invalid position #{pos}. Please specifiy either right or left";
+@mixin mdc-rtl-reflexive-position($position-property, $value, $root-selector: null) {
+  @if (index((right, left), $position-property) == null) {
+    @error "Invalid position #{position-property}. Please specifiy either right or left";
   }
 
   $left-value: $value;
   $right-value: initial;
 
-  @if ($pos == right) {
+  @if ($position-property == right) {
     $right-value: $value;
     $left-value: initial;
   }

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

@@ -44,8 +44,8 @@
   max-width: calc(100% - #{$dd-arrow-padding});
   height: 32px;
   transition:
-    mdc-animation-exit(border-bottom-color, 150ms),
-    mdc-animation-exit(background-color, 150ms);
+    mdc-animation-exit-temporary(border-bottom-color, 150ms),
+    mdc-animation-exit-temporary(background-color, 150ms);
   border: none;
   border-bottom: 1px solid rgba(black, .12);
   border-radius: 0;
@@ -95,8 +95,8 @@
 
   &__selected-text {
     transition:
-      mdc-animation-exit(opacity, 125ms),
-      mdc-animation-exit(transform, 125ms);
+      mdc-animation-exit-temporary(opacity, 125ms),
+      mdc-animation-exit-temporary(transform, 125ms);
     white-space: nowrap;
     overflow: hidden;
   }

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

@@ -131,6 +131,7 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
     // is considered "clicking on the thumb".
     height: 100%;
     will-change: transform;
+    user-select: none;
   }
 
   &__thumb {

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

@@ -31,7 +31,7 @@
   padding-right: 24px;
   padding-left: 24px;
   transform: translate(-50%, 100%);
-  transition: mdc-animation-exit(transform, .25s);
+  transition: mdc-animation-exit-permanent(transform, .25s);
   background-color: $mdc-snackbar-background-color;
 
   @include mdc-theme-dark(".mdc-snackbar") {
@@ -111,7 +111,7 @@
     display: flex;
     align-items: center;
     height: 48px;
-    transition: mdc-animation-exit(opacity, .3s);
+    transition: mdc-animation-exit-permanent(opacity, .3s);
     color: $mdc-snackbar-foreground-color;
 
     @include mdc-theme-dark(".mdc-snackbar") {
@@ -142,7 +142,7 @@
 
     min-width: auto;
     height: inherit;
-    transition: mdc-animation-exit(opacity, .3s);
+    transition: mdc-animation-exit-permanent(opacity, .3s);
     opacity: 0;
     visibility: hidden;
 
@@ -157,7 +157,7 @@
 
   &--active &__text,
   &--active &__action-button:not([aria-hidden]) {
-    transition: mdc-animation-exit(opacity, .3s);
+    transition: mdc-animation-exit-permanent(opacity, .3s);
     opacity: 1;
   }
 }

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

@@ -30,7 +30,7 @@ $mdc-textfield-disabled-border-on-light: rgba(#231f20, .26);
 $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 
 @function mdc-textfield-transition($property) {
-  @return #{$property} 180ms $mdc-animation-fast-out-slow-in-timing-function;
+  @return #{$property} 180ms $mdc-animation-standard-curve-timing-function;
 }
 
 // postcss-bem-linter: define textfield
@@ -169,7 +169,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     &::before {
       transition:
         opacity $opacity-duration linear 17ms,
-        transform 250ms $mdc-animation-linear-out-slow-in-timing-function 17ms;
+        transform 250ms $mdc-animation-deceleration-curve-timing-function 17ms;
       opacity: 1;
     }
   }
@@ -253,7 +253,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     transform: scaleY(1);
     transform-origin: center bottom;
     transition:
-      background-color 33ms $mdc-animation-fast-out-slow-in-timing-function,
+      background-color 33ms $mdc-animation-standard-curve-timing-function,
       mdc-textfield-transition(transform);
     background-color: rgba(black, .42);
     pointer-events: none;
@@ -715,8 +715,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 }
 
 // mdc-form-field tweaks to align text field label correctly
-// stylelint-disable selector-no-type
+// stylelint-disable selector-max-type
 .mdc-form-field > .mdc-textfield + label {
   align-self: flex-start;
 }
-// stylelint-enable selector-no-type
+// stylelint-enable selector-max-type

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

@@ -27,11 +27,13 @@
   }
 
   @if $important {
+    /* @alternate */
     #{$property}: map-get($mdc-theme-property-values, $style) !important;
     #{$property}: var(--mdc-theme-#{$style}, map-get($mdc-theme-property-values, $style)) !important;
   }
 
   @else {
+    /* @alternate */
     #{$property}: map-get($mdc-theme-property-values, $style);
     #{$property}: var(--mdc-theme-#{$style}, map-get($mdc-theme-property-values, $style));
   }

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

@@ -76,21 +76,21 @@
 
   &__title {
     @include mdc-typography(title);
+    @include mdc-typography-overflow-ellipsis;
 
     align-self: center;
     margin: 0;
     margin-left: 24px;
     padding: $mdc-toobar-element-vertical-padding 0;
     line-height: 1.5rem;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
     z-index: 1;
   }
 
   &__icon {
     @include mdc-shared-icon-style;
     @include mdc-theme-prop(color, text-primary-on-primary);
+
+    cursor: pointer;
   }
 
   &__icon:last-child {
@@ -102,6 +102,7 @@
     @include mdc-theme-prop(color, text-primary-on-primary);
 
     padding: 16px 24px;
+    cursor: pointer;
   }
 }
 

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

@@ -40,3 +40,10 @@
 @mixin mdc-typography-adjust-margin($style) {
   margin: map-get(map-get($mdc-typography-styles, $style), margin);
 }
+
+// Element must be `display: block` or `display: inline-block` for this to work.
+@mixin mdc-typography-overflow-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.15.0
+  version: 0.16.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-07-10 00:00:00.000000000 Z
+date: 2017-07-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails