material_components_web-sass 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 79061058930e26f2c210e2375f51b119f089cdeb
-  data.tar.gz: 0fa83684a9a3f04ebf42cc34e38a2ceec8a79a41
+  metadata.gz: d4511af5460a1142942fada8f0ad54237ad47809
+  data.tar.gz: f3a44599a76ab55c581d9cec61f384d8447ad3f0
 SHA512:
-  metadata.gz: c10a922113ba438ebbed85d62cfb9d7792f2c4d5c82185724d89e9505314897a4769f56bc85c293ab6b299fe60d2a99bfbf2569e210c7fb76a7da81ec6947a4c
-  data.tar.gz: 470bcadf8dcb3bcbc7e919c57e68a5a214098ebc5d172e0d971e4504c128a05bb6c2e2368891b0f9129c7f8f805c12f8acb8acabb7cb9d46f498355e3cb7146e
+  metadata.gz: a372357430cb922e09f3a9453a00b3b04d75cef53581e5b695db3161b35fbff37f8ceee6826c46eb957bdc54484aa14266d2193bf290fa964a7fc48e5c045db6
+  data.tar.gz: 922affc5910a85bcdb2e58d214eccd05a251426f7e5708c34ec31d0ec04beaf90ebc444b5e69475ac2e159881b004c1c5d31ecc8504bb1d3e2dd8ec541e5a032

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.6.0 (2017-03-06)
+
+- Update assets to match upstream version
+
+Library version: 
+
+- Material Components for the web v0.6.0
+- Material Icons v3.0.0
+
 ## 0.5.0 (2017-02-21)
 
 - Update assets to match upstream version

data/lib/material_components_web/sass/version.rb

@@ -1,5 +1,5 @@
 module MaterialComponentsWeb
   module Sass
-    VERSION = '0.5.0'.freeze
+    VERSION = '0.6.0'.freeze
   end
 end

data/vendor/assets/javascripts/material-components-web.js

@@ -1611,6 +1611,9 @@ var MDCSelect = function (_MDCComponent) {
         getTextForOptionAtIndex: function getTextForOptionAtIndex(index) {
           return _this2.options[index].textContent;
         },
+        getValueForOptionAtIndex: function getValueForOptionAtIndex(index) {
+          return _this2.options[index].id || _this2.options[index].textContent;
+        },
         setAttrForOptionAtIndex: function setAttrForOptionAtIndex(index, attr, value) {
           return _this2.options[index].setAttribute(attr, value);
         },
@@ -1647,6 +1650,11 @@ var MDCSelect = function (_MDCComponent) {
         this.disabled = true;
       }
     }
+  }, {
+    key: 'value',
+    get: function get() {
+      return this.foundation_.getValue();
+    }
   }, {
     key: 'options',
     get: function get() {
@@ -3643,7 +3651,11 @@ var MDCSimpleMenuFoundation = function (_MDCFoundation) {
           );
         },
         setTransformOrigin: function setTransformOrigin() /* origin: string */{},
-        setPosition: function setPosition() /* position: { top: string, right: string, bottom: string, left: string } */{}
+        setPosition: function setPosition() /* position: { top: string, right: string, bottom: string, left: string } */{},
+        getAccurateTime: function getAccurateTime() {
+          return (/* number */0
+          );
+        }
       };
     }
   }]);
@@ -3763,7 +3775,7 @@ var MDCSimpleMenuFoundation = function (_MDCFoundation) {
     value: function animationLoop_() {
       var _this2 = this;
 
-      var time = window.performance.now();
+      var time = this.adapter_.getAccurateTime();
       var _MDCSimpleMenuFoundat3 = MDCSimpleMenuFoundation.numbers,
           TRANSITION_DURATION_MS = _MDCSimpleMenuFoundat3.TRANSITION_DURATION_MS,
           TRANSITION_X1 = _MDCSimpleMenuFoundat3.TRANSITION_X1,
@@ -3825,7 +3837,7 @@ var MDCSimpleMenuFoundation = function (_MDCFoundation) {
     value: function animateMenu_() {
       var _this3 = this;
 
-      this.startTime_ = window.performance.now();
+      this.startTime_ = this.adapter_.getAccurateTime();
       this.startScaleX_ = this.scaleX_;
       this.startScaleY_ = this.scaleY_;
 
@@ -4229,6 +4241,9 @@ var MDCSimpleMenu = function (_MDCComponent) {
           _this2.root_.style.right = 'right' in position ? position.right : null;
           _this2.root_.style.top = 'top' in position ? position.top : null;
           _this2.root_.style.bottom = 'bottom' in position ? position.bottom : null;
+        },
+        getAccurateTime: function getAccurateTime() {
+          return window.performance.now();
         }
       });
     }
@@ -4790,6 +4805,7 @@ var MDCRippleFoundation = function (_MDCFoundation) {
           VAR_FG_UNBOUNDED_TRANSFORM_DURATION = _MDCRippleFoundation$4.VAR_FG_UNBOUNDED_TRANSFORM_DURATION,
           VAR_FG_APPROX_XF = _MDCRippleFoundation$4.VAR_FG_APPROX_XF;
 
+
       this.adapter_.updateCssVariable(VAR_FG_APPROX_XF, 'scale(' + approxCurScale + ')');
       this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_OPACITY_DURATION, opacityDuration + 'ms');
       this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_TRANSFORM_DURATION, transformDuration + 'ms');
@@ -5071,6 +5087,10 @@ var MDCSelectFoundation = function (_MDCFoundation) {
           return (/* index: number */ /* string */''
           );
         },
+        getValueForOptionAtIndex: function getValueForOptionAtIndex() {
+          return (/* index: number */ /* string */''
+          );
+        },
         setAttrForOptionAtIndex: function setAttrForOptionAtIndex() /* index: number, attr: string, value: string */{},
         rmAttrForOptionAtIndex: function rmAttrForOptionAtIndex() /* index: number, attr: string */{},
         getOffsetTopForOptionAtIndex: function getOffsetTopForOptionAtIndex() {
@@ -5143,6 +5163,11 @@ var MDCSelectFoundation = function (_MDCFoundation) {
       this.adapter_.deregisterMenuInteractionHandler('MDCSimpleMenu:selected', this.selectionHandler_);
       this.adapter_.deregisterMenuInteractionHandler('MDCSimpleMenu:cancel', this.cancelHandler_);
     }
+  }, {
+    key: 'getValue',
+    value: function getValue() {
+      return this.selectedIndex_ >= 0 ? this.adapter_.getValueForOptionAtIndex(this.selectedIndex_) : '';
+    }
   }, {
     key: 'getSelectedIndex',
     value: function getSelectedIndex() {
@@ -5339,17 +5364,9 @@ var cssClasses = {
 };
 
 var strings = {
-  get TEXT_SELECTOR() {
-    return '.' + cssClasses.TEXT;
-  },
-
-  get ACTION_WRAPPER_SELECTOR() {
-    return '.' + cssClasses.ACTION_WRAPPER;
-  },
-
-  get ACTION_BUTTON_SELECTOR() {
-    return '.' + cssClasses.ACTION_BUTTON;
-  }
+  TEXT_SELECTOR: '.' + cssClasses.TEXT,
+  ACTION_WRAPPER_SELECTOR: '.' + cssClasses.ACTION_WRAPPER,
+  ACTION_BUTTON_SELECTOR: '.' + cssClasses.ACTION_BUTTON
 };
 
 var numbers = {
@@ -5598,8 +5615,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 
 
-var ROOT = 'mdc-textfield';
-
 var MDCTextfieldFoundation = function (_MDCFoundation) {
   _inherits(MDCTextfieldFoundation, _MDCFoundation);
 
@@ -5607,14 +5622,14 @@ var MDCTextfieldFoundation = function (_MDCFoundation) {
     key: 'cssClasses',
     get: function get() {
       return {
-        ROOT: ROOT,
-        UPGRADED: ROOT + '--upgraded',
-        DISABLED: ROOT + '--disabled',
-        FOCUSED: ROOT + '--focused',
-        INVALID: ROOT + '--invalid',
-        HELPTEXT_PERSISTENT: ROOT + '-helptext--persistent',
-        HELPTEXT_VALIDATION_MSG: ROOT + '-helptext--validation-msg',
-        LABEL_FLOAT_ABOVE: ROOT + '__label--float-above'
+        ROOT: 'mdc-textfield',
+        UPGRADED: 'mdc-textfield--upgraded',
+        DISABLED: 'mdc-textfield--disabled',
+        FOCUSED: 'mdc-textfield--focused',
+        INVALID: 'mdc-textfield--invalid',
+        HELPTEXT_PERSISTENT: 'mdc-textfield-helptext--persistent',
+        HELPTEXT_VALIDATION_MSG: 'mdc-textfield-helptext--validation-msg',
+        LABEL_FLOAT_ABOVE: 'mdc-textfield__label--float-above'
       };
     }
   }, {
@@ -5688,6 +5703,11 @@ var MDCTextfieldFoundation = function (_MDCFoundation) {
       this.adapter_.registerInputBlurHandler(this.inputBlurHandler_);
       this.adapter_.registerInputInputHandler(this.inputInputHandler_);
       this.adapter_.registerInputKeydownHandler(this.inputKeydownHandler_);
+
+      // Ensure label does not collide with any pre-filled value.
+      if (this.getNativeInput_().value) {
+        this.adapter_.addClassToLabel(MDCTextfieldFoundation.cssClasses.LABEL_FLOAT_ABOVE);
+      }
     }
   }, {
     key: 'destroy',

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

@@ -22,7 +22,11 @@
 @import "@material/typography/mixins";
 
 // postcss-bem-linter: define button
+
 .mdc-button {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before"));
+  @include mdc-ripple-fg((pseudo: "::after"));
   @include mdc-typography(body2);
   @include mdc-theme-prop(color, text-primary-on-light);
 
@@ -41,6 +45,7 @@
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
+  overflow: hidden;
   vertical-align: middle;
   user-select: none;
   box-sizing: border-box;
@@ -48,43 +53,23 @@
   -webkit-tap-highlight-color: rgba(black, .18);
 
   @include mdc-theme-dark {
+    @include mdc-ripple-base;
+    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
+    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
     @include mdc-theme-prop(color, text-primary-on-dark);
 
     -webkit-tap-highlight-color: rgba(white, .18);
   }
 
-  // postcss-bem-linter: ignore
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transition: mdc-animation-exit(opacity, 120ms);
-    border-radius: inherit;
-    background: currentColor;
-    content: "";
-    opacity: 0;
-  }
-
-  &:focus::before {
-    transition: mdc-animation-enter(opacity, 120ms);
-    opacity: .12;
-  }
-
-  &:active::before {
-    transition: mdc-animation-enter(opacity, 120ms);
-
-    // Slightly darker value for visual distinction.
-    // This allows a full base that has distinct modes.
-    // Progressive enhancement with ripples will provide complete button spec alignment.
-    opacity: .18;
-  }
-
-  &:focus:active::before {
-    transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
+  @each $theme-style in (primary, accent) {
+    &.mdc-button--#{$theme-style} {
+      @include mdc-ripple-base;
+      @include mdc-ripple-bg((pseudo: "::before", theme-style: $theme-style, opacity: .12));
+      @include mdc-ripple-fg((pseudo: "::after", theme-style: $theme-style, opacity: .12));
+    }
   }
 
+  // postcss-bem-linter: ignore
   &:active {
     outline: none;
   }
@@ -104,6 +89,7 @@
     line-height: 32px;
   }
 
+  // TODO(cristobalchao): Disable ink wash on hover and alter elevation instead for raised surfaces.
   &--raised {
     @include mdc-elevation(2);
     @include mdc-elevation-transition;
@@ -114,6 +100,14 @@
       @include mdc-elevation(8);
     }
 
+    @each $theme-style in (primary, accent) {
+      &.mdc-button--#{$theme-style} {
+        @include mdc-ripple-base;
+        @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
+        @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
+      }
+    }
+
     @include mdc-theme-dark(".mdc-button") {
       @include mdc-theme-prop(background-color, primary);
 
@@ -196,31 +190,3 @@
 
 // postcss-bem-linter: end
 
-.mdc-button.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before"));
-  @include mdc-ripple-fg((pseudo: "::after"));
-
-  overflow: hidden;
-
-  @include mdc-theme-dark(".mdc-button", true) {
-    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
-  }
-
-  @each $theme-style in (primary, accent) {
-    &.mdc-button--#{$theme-style} {
-      @include mdc-ripple-bg((pseudo: "::before", theme-style: $theme-style, opacity: .12));
-      @include mdc-ripple-fg((pseudo: "::after", theme-style: $theme-style, opacity: .12));
-    }
-  }
-}
-
-.mdc-button--raised.mdc-ripple-upgraded {
-  @each $theme-style in (primary, accent) {
-    &.mdc-button--#{$theme-style} {
-      @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
-      @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
-    }
-  }
-}

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

@@ -15,8 +15,9 @@
 //
 
 @import "@material/animation/functions";
-@import "@material/ripple/mixins";
 @import "@material/animation/mixins";
+@import "@material/ripple/mixins";
+@import "@material/rtl/mixins";
 @import "./variables";
 @import "./keyframes";
 
@@ -40,18 +41,12 @@
   left: 0;
 }
 
-@mixin mdc-checkbox-outer-box {
-  @include mdc-checkbox-cover-element;
-
-  top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
-  left: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
-  border-radius: 2px;
-  box-sizing: border-box;
-  pointer-events: none;
-}
-
 // postcss-bem-linter: define checkbox
 .mdc-checkbox {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+
   display: inline-block;
   position: relative;
   box-sizing: content-box;
@@ -63,19 +58,40 @@
   cursor: pointer;
   vertical-align: bottom;
 
+  &::before,
+  &::after {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  // stylelint-disable plugin/selector-bem-pattern
+  &.mdc-ripple-upgraded--unbounded {
+    .mdc-checkbox__background::before {
+      content: none;
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+
   &__background {
-    @include mdc-checkbox-outer-box;
+    @include mdc-checkbox-cover-element;
+    @include mdc-rtl-reflexive-position(
+      left, ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2, ".mdc-checkbox");
 
     display: inline-flex;
+    top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
+    pointer-events: none;
     width: $mdc-checkbox-ui-pct;
     height: $mdc-checkbox-ui-pct;
-    box-sizing: border-box;
     transition:
       mdc-checkbox-transition-exit(background-color),
       mdc-checkbox-transition-exit(border-color);
     border: $mdc-checkbox-border-width solid $mdc-checkbox-border-color;
+    border-radius: 2px;
     background-color: transparent;
     will-change: background-color, border-color;
 
@@ -329,13 +345,3 @@ fieldset:disabled .mdc-checkbox__native-control,
   }
 }
 // postcss-bem-linter: end
-
-.mdc-checkbox.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
-
-  .mdc-checkbox__background::before {
-    content: none;
-  }
-}

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

@@ -20,6 +20,10 @@
 
 // postcss-bem-linter: define fab
 .mdc-fab {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
+  @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
+
   display: inline-flex;
   position: relative;
   justify-content: center;
@@ -36,6 +40,7 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, .18);
+  overflow: hidden;
 
   @include mdc-theme-prop(background-color, accent);
   @include mdc-theme-prop(color, text-primary-on-accent);
@@ -50,6 +55,8 @@
     background-color: white;
 
     @include mdc-theme-prop(color, text-primary-on-light);
+    @include mdc-ripple-bg((pseudo: "::before"));
+    @include mdc-ripple-fg((pseudo: "::after"));
   }
 
   &::before {
@@ -60,7 +67,7 @@
     height: 100%;
     transition: mdc-animation-exit(opacity, 120ms);
     border-radius: inherit;
-    background: black;
+    background: rgba(0, 0, 0, .2);
     content: "";
     opacity: 0;
   }
@@ -124,16 +131,3 @@
 }
 
 // postcss-bem-linter: end
-
-.mdc-fab.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
-  @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
-
-  overflow: hidden;
-}
-
-.mdc-fab--plain.mdc-ripple-upgraded {
-  @include mdc-ripple-bg((pseudo: "::before"));
-  @include mdc-ripple-fg((pseudo: "::after"));
-}

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

@@ -36,13 +36,13 @@ $mdc-form-field-item-spacing: 4px;
   > label {
     order: 0;
     margin-right: auto;
-    margin-left: $mdc-form-field-item-spacing;
+    padding-left: $mdc-form-field-item-spacing;
   }
 
   @include mdc-rtl {
     > label {
-      margin-right: $mdc-form-field-item-spacing;
       margin-left: auto;
+      padding-right: $mdc-form-field-item-spacing;
     }
   }
 }
@@ -50,14 +50,14 @@ $mdc-form-field-item-spacing: 4px;
 .mdc-form-field--align-end {
   > label {
     order: -1;
-    margin-right: $mdc-form-field-item-spacing;
     margin-left: auto;
+    padding-right: $mdc-form-field-item-spacing;
   }
 
   @include mdc-rtl {
     > label {
       margin-right: auto;
-      margin-left: $mdc-form-field-item-spacing;
+      padding-left: $mdc-form-field-item-spacing;
     }
   }
 }

data/vendor/assets/stylesheets/@material/icon-toggle/mdc-icon-toggle.scss

@@ -22,7 +22,32 @@
 
 .mdc-icon-toggle {
   @include mdc-theme-prop(color, text-secondary-on-light);
+  @include mdc-ripple-base;
+  // NOTE: The spec denotes specific opacity values to use for different styles of icon buttons,
+  // either "light", "dark", or "color". Because ripples are made up of two distinct elements,
+  // we need to use an opacity value such that when two elements of the same color and opacity are
+  // layered on top of one another, they create the opacity specified in the spec.
+  // This is done by using the painter's compositing algorithm:
+  //
+  // alpha[desired] = alpha[a] + alpha[b](1 - alpha[a]).
+  //
+  // Because both alpha values are the same this reduces to:
+  //
+  // alpha[desired] = alpha[a] + alpha[a](1 - alpha[a]).
+  //
+  // We simply solve this quadratic equation for the nonnegative root between [0, 1].
+  // E.g. for black 12% opacity:
+  // https://www.wolframalpha.com/input/?i=x+%2B+x(1+-+x)+%3D+.12,+x+%3C%3D+1,+x+%3E%3D+0
+  @include mdc-ripple-bg((pseudo: "::before", opacity: .062));
+  @include mdc-ripple-fg((pseudo: "::after", opacity: .062));
 
+  @include mdc-theme-dark(".mdc-icon-toggle", true) {
+    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
+    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
+  }
+
+  // For some reason, GPU layer promotion makes ripples look terrible on Chrome
+  will-change: initial;
   display: flex;
   position: relative;
   box-sizing: border-box;
@@ -38,47 +63,27 @@
 
   &::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: scale(0, 0);
-    transition: mdc-animation-exit(opacity, 80ms), mdc-animation-exit(transform, 80ms);
     border-radius: 50%;
-    background-color: currentColor;
     content: "";
     opacity: 0;
     pointer-events: none;
   }
 
-  &:focus::after {
-    transform: scale(1.3, 1.3);
-    transition: mdc-animation-enter(opacity, 80ms), mdc-animation-enter(transform, 80ms);
-    opacity: .12;
-  }
-
   @include mdc-theme-dark {
     @include mdc-theme-prop(color, text-primary-on-dark);
-
-    &:focus::after {
-      opacity: .3;
-    }
   }
 }
 
 .mdc-icon-toggle--primary {
   @include mdc-theme-prop(color, primary);
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
 }
 
 .mdc-icon-toggle--accent {
   @include mdc-theme-prop(color, accent);
-}
-
-.mdc-icon-toggle--primary,
-.mdc-icon-toggle--accent {
-  &:focus::after {
-    opacity: .26;
-  }
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .14));
 }
 
 .mdc-icon-toggle--disabled {
@@ -92,42 +97,3 @@
 }
 
 /** postcss-bem-linter: end */
-
-.mdc-icon-toggle.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  // NOTE: The spec denotes specific opacity values to use for different styles of icon buttons,
-  // either "light", "dark", or "color". Because ripples are made up of two distinct elements,
-  // we need to use an opacity value such that when two elements of the same color and opacity are
-  // layered on top of one another, they create the opacity specified in the spec.
-  // This is done by using the painter's compositing algorithm:
-  //
-  // alpha[desired] = alpha[a] + alpha[b](1 - alpha[a]).
-  //
-  // Because both alpha values are the same this reduces to:
-  //
-  // alpha[desired] = alpha[a] + alpha[a](1 - alpha[a]).
-  //
-  // We simply solve this quadratic equation for the nonnegative root between [0, 1].
-  // E.g. for black 12% opacity:
-  // https://www.wolframalpha.com/input/?i=x+%2B+x(1+-+x)+%3D+.12,+x+%3C%3D+1,+x+%3E%3D+0
-  @include mdc-ripple-bg((pseudo: "::before", opacity: .062));
-  @include mdc-ripple-fg((pseudo: "::after", opacity: .062));
-
-  @include mdc-theme-dark(".mdc-icon-toggle", true) {
-    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
-  }
-
-  // For some reason, GPU layer promotion makes ripples look terrible on Chrome
-  will-change: initial;
-}
-
-.mdc-icon-toggle--primary.mdc-ripple-upgraded {
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
-}
-
-.mdc-icon-toggle--accent.mdc-ripple-upgraded {
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .14));
-}

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

@@ -1,18 +1,18 @@
-// 
+//
 // Copyright 2016 Google Inc. All Rights Reserved.
-// 
+//
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
-// 
+//
 //      http://www.apache.org/licenses/LICENSE-2.0
-// 
+//
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-// 
+//
 
 @import "@material/animation/functions";
 @import "@material/ripple/mixins";
@@ -33,6 +33,10 @@ $mdc-radio-transition-duration: 120ms;
 
 // postcss-bem-linter: define radio
 .mdc-radio {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+
   display: inline-block;
   position: relative;
   box-sizing: border-box;
@@ -42,6 +46,22 @@ $mdc-radio-transition-duration: 120ms;
   cursor: pointer;
   will-change: opacity, transform, border-color, background-color, color;
 
+  &::before,
+  &::after {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  // stylelint-disable plugin/selector-bem-pattern
+  &.mdc-ripple-upgraded {
+    .mdc-radio__background::before {
+      content: none;
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+
   // Container for radio circles and ripple.
   &__background {
     display: inline-block;
@@ -179,20 +199,10 @@ fieldset:disabled .mdc-radio__native-control,
 
 .mdc-radio__native-control:focus {
   + .mdc-radio__background::before {
-    transform: scale(2.8, 2.8);
+    transform: scale(2, 2);
     transition: mdc-radio-enter(opacity), mdc-radio-enter(transform);
     opacity: .26;
   }
 }
 
 // postcss-bem-linter: end
-
-.mdc-radio.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
-
-  .mdc-radio__background::before {
-    content: none;
-  }
-}

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

@@ -20,12 +20,14 @@
 
 @keyframes mdc-ripple-fg-radius-in {
   from {
-    transform: translate(var(--mdc-ripple-fg-translate-start)) scale(1);
+    transform: translate(0) scale(1);
+    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
     animation-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
   }
 
   to {
-    transform: translate(var(--mdc-ripple-fg-translate-end)) scale(var(--mdc-ripple-fg-scale));
+    transform: translate(0) scale(0);
+    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 0));
   }
 }
 
@@ -52,10 +54,12 @@
 
 @keyframes mdc-ripple-fg-unbounded-transform-deactivate {
   from {
-    transform: var(--mdc-ripple-fg-approx-xf);
+    transform: 0;
+    transform: var(--mdc-ripple-fg-approx-xf, 0);
   }
 
   to {
-    transform: scale(var(--mdc-ripple-fg-scale));
+    transform: scale(0);
+    transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
 }

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

@@ -40,8 +40,17 @@
   --mdc-ripple-fg-unbounded-transform-duration: 0ms;
   --mdc-ripple-fg-approx-xf: 0;
 
-  will-change: transition, opacity;
+  will-change: transform, opacity;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &:not(.mdc-ripple-upgraded) {
+    &:hover::before,
+    &:focus::before,
+    &:active::after {
+      transition-duration: 85ms;
+      opacity: .6;
+    }
+  }
 }
 
 @mixin mdc-ripple-color_($config) {
@@ -52,6 +61,7 @@
   // 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);
+    $css-var: $theme-value;
     $css-var: var(--mdc-theme-#{$theme-style}, $theme-value);
 
     background-color: rgba($theme-value, $opacity);
@@ -65,6 +75,7 @@
   } @else {
     background-color: rgba($base-color, $opacity);
   }
+
   // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 }
 
@@ -78,8 +89,7 @@
   left: calc(50% - #{$radius});
   width: $radius * 2;
   height: $radius * 2;
-  transform: scale(var(--mdc-ripple-fg-scale));
-  transition: opacity 200ms linear;
+  transition: opacity 250ms linear;
   border-radius: 50%;
   opacity: 0;
   pointer-events: none;
@@ -88,6 +98,7 @@
 @mixin mdc-ripple-bg($config: ()) {
   $config: map-merge(mdc-ripple-default-config_(), $config);
   $pseudo: map-get($config, pseudo);
+  $radius: map-get($config, radius);
 
   // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($pseudo) {
@@ -101,6 +112,15 @@
   }
   // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 
+  &.mdc-ripple-upgraded#{$pseudo} {
+    top: calc(50% - #{$radius});
+    left: calc(50% - #{$radius});
+    width: $radius * 2;
+    height: $radius * 2;
+    transform: scale(0);
+    transform: scale(var(--mdc-ripple-fg-scale, 0));
+  }
+
   &.mdc-ripple-upgraded--background-active#{$pseudo} {
     opacity: .99999;
   }
@@ -118,23 +138,30 @@
   }
 
   &.mdc-ripple-upgraded--unbounded#{$pseudo} {
-    top: var(--mdc-ripple-top);
-    left: var(--mdc-ripple-left);
-    width: var(--mdc-ripple-fg-size);
-    height: var(--mdc-ripple-fg-size);
+    top: calc(50% - #{$radius / 2});
+    top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));
+    left: calc(50% - #{$radius / 2});
+    left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
+    width: $radius;
+    width: var(--mdc-ripple-fg-size, $radius);
+    height: $radius;
+    height: var(--mdc-ripple-fg-size, $radius);
+    transform: scale(0);
+    transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
 }
 
 @mixin mdc-ripple-fg-base_($config) {
+  $radius: map-get($config, radius);
+
   @include mdc-ripple-color_($config);
 
   position: absolute;
-  top: 0;
-  left: 0;
-  width: var(--mdc-ripple-fg-size);
-  height: var(--mdc-ripple-fg-size);
-  transform: scale(0);
-  transform-origin: center center;
+  top: calc(50% - #{$radius});
+  left: calc(50% - #{$radius});
+  width: $radius * 2;
+  height: $radius * 2;
+  transition: opacity 250ms linear;
   border-radius: 50%;
   opacity: 0;
   pointer-events: none;
@@ -143,6 +170,7 @@
 @mixin mdc-ripple-fg($config: ()) {
   $config: map-merge(mdc-ripple-default-config_(), $config);
   $pseudo: map-get($config, pseudo);
+  $radius: map-get($config, radius);
 
   // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($pseudo) {
@@ -156,13 +184,34 @@
   }
   // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 
+  &.mdc-ripple-upgraded {
+    &#{$pseudo} {
+      top: 0;
+      left: 0;
+      width: $radius;
+      width: var(--mdc-ripple-fg-size, $radius);
+      height: $radius;
+      height: var(--mdc-ripple-fg-size, $radius);
+      transform: scale(0);
+      transform-origin: center center;
+      opacity: 0;
+    }
+  }
+
   &:not(.mdc-ripple-upgraded--unbounded)#{$pseudo} {
     transform-origin: center center;
   }
 
   &.mdc-ripple-upgraded--unbounded#{$pseudo} {
-    top: var(--mdc-ripple-top);
-    left: var(--mdc-ripple-left);
+    top: 0;
+    top: var(--mdc-ripple-top, 0);
+    left: 0;
+    left: var(--mdc-ripple-left, 0);
+    width: $radius;
+    width: var(--mdc-ripple-fg-size, $radius);
+    height: $radius;
+    height: var(--mdc-ripple-fg-size, $radius);
+    transform: scale(0);
     transform-origin: center center;
   }
 
@@ -172,16 +221,23 @@
   }
 
   &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-activation#{$pseudo} {
-    transform: scale(var(--mdc-ripple-fg-scale));
+    transform: scale(0);
+    transform: scale(var(--mdc-ripple-fg-scale, 0));
     transition:
       opacity 110ms linear,
-      transform var(--mdc-ripple-fg-unbounded-transform-duration) linear 80ms;
+      transform 0 linear 80ms;
+    transition:
+      opacity 110ms linear,
+      transform var(--mdc-ripple-fg-unbounded-transform-duration, 0) linear 80ms;
     opacity: 1;
   }
 
   &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-deactivation#{$pseudo} {
     animation:
-      mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration) linear,
-      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration) $mdc-animation-fast-out-slow-in-timing-function;
+      mdc-ripple-fg-unbounded-opacity-deactivate 0 linear,
+      mdc-ripple-fg-unbounded-transform-deactivate 0 $mdc-animation-fast-out-slow-in-timing-function;
+    animation:
+      mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration, 0) linear,
+      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration, 0) $mdc-animation-fast-out-slow-in-timing-function;
   }
 }

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

@@ -21,6 +21,10 @@
 // postcss-bem-linter: define ripple-surface
 
 .mdc-ripple-surface {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before"));
+  @include mdc-ripple-fg((pseudo: "::after"));
+
   position: relative;
   outline: none;
   overflow: hidden;
@@ -29,51 +33,24 @@
     overflow: visible;
   }
 
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transition: mdc-animation-exit(opacity, 120ms);
-    border-radius: inherit;
-    background: currentColor;
-    content: "";
-    opacity: 0;
-  }
-
-  &:focus::before {
-    opacity: .12;
-  }
-
-  &:active::before {
-    opacity: .18;
-  }
-
-  &.mdc-ripple-upgraded {
-    @include mdc-ripple-base;
-    @include mdc-ripple-bg((pseudo: "::before"));
-    @include mdc-ripple-fg((pseudo: "::after"));
-  }
-
-  &--primary.mdc-ripple-upgraded {
+  &--primary {
     &::before,
     &::after {
       @include mdc-theme-prop(background-color, primary);
     }
 
-    @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-    @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+    @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .16));
+    @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .16));
   }
 
-  &--accent.mdc-ripple-upgraded {
+  &--accent {
     &::before,
     &::after {
       @include mdc-theme-prop(background-color, primary);
     }
 
-    @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .14));
-    @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .14));
+    @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .16));
+    @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .16));
   }
 }
 

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

@@ -19,6 +19,10 @@
 @import "./mixins";
 @import "./variables";
 
+@function mdc-switch-transition($property) {
+  @return $property 90ms $mdc-switch-transition-curve;
+}
+
 // postcss-bem-linter: define switch
 .mdc-switch {
   display: inline-block;
@@ -47,7 +51,7 @@
     cursor: pointer;
     user-select: none;
 
-    @include mdc-theme-dark(".mdc-checkbox") {
+    @include mdc-theme-dark(".mdc-switch") {
       background-color: transparent;
     }
 
@@ -59,14 +63,14 @@
       bottom: 0;
       left: 0;
       transition:
-        mdc-checkbox-transition(opacity, $mdc-switch-transition-curve),
-        mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+        mdc-switch-transition(opacity),
+        mdc-switch-transition(background-color);
       border-radius: 7px;
       background-color: $mdc-switch-unchecked-track-color;
       content: "";
       opacity: .38;
 
-      @include mdc-theme-dark(".mdc-checkbox") {
+      @include mdc-theme-dark(".mdc-switch") {
         background-color: $mdc-switch-unchecked-track-color-dark;
         opacity: .3;
       }
@@ -82,12 +86,12 @@
       height: $mdc-switch-knob-diameter;
       transform: translateX(0);
       transition:
-        mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
-        mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+        mdc-switch-transition(transform),
+        mdc-switch-transition(background-color);
       border-radius: $mdc-switch-knob-diameter / 2;
       background-color: $mdc-switch-unchecked-knob-color;
 
-      @include mdc-theme-dark(".mdc-checkbox") {
+      @include mdc-theme-dark(".mdc-switch") {
         background-color: $mdc-switch-unchecked-knob-color-dark;
       }
 
@@ -104,8 +108,8 @@
         height: $mdc-switch-focus-ring-diameter;
         transform: scale(0);
         transition:
-          mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
-          mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+          mdc-switch-transition(transform),
+          mdc-switch-transition(background-color);
         border-radius: $mdc-switch-focus-ring-diameter / 2;
         background-color: transparent;
         content: "";
@@ -123,12 +127,12 @@
       height: $mdc-switch-focus-ring-diameter;
       transform: scale(1);
       transition:
-        mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
-        mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+        mdc-switch-transition(transform),
+        mdc-switch-transition(background-color);
       border-radius: $mdc-switch-focus-ring-diameter / 2;
       background-color: $mdc-switch-unchecked-focus-ring-color;
 
-      @include mdc-theme-dark(".mdc-checkbox") {
+      @include mdc-theme-dark(".mdc-switch") {
         background-color: $mdc-switch-unchecked-focus-ring-color-dark;
         opacity: .14;
       }
@@ -146,15 +150,15 @@
   .mdc-switch__knob {
     transform: translateX($mdc-switch-track-width - $mdc-switch-knob-diameter);
     transition:
-      mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
-      mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+      mdc-switch-transition(transform),
+      mdc-switch-transition(background-color);
 
     @include mdc-theme-prop(background-color, primary);
 
     &::before {
       @include mdc-theme-prop(background-color, primary);
 
-      @include mdc-theme-dark(".mdc-checkbox") {
+      @include mdc-theme-dark(".mdc-switch") {
         @include mdc-theme-prop(background-color, primary);
       }
 
@@ -174,7 +178,7 @@
     background-color: $mdc-switch-unchecked-track-color;
     opacity: .12;
 
-    @include mdc-theme-dark(".mdc-checkbox") {
+    @include mdc-theme-dark(".mdc-switch") {
       background-color: $mdc-switch-unchecked-track-color-dark;
       opacity: .1;
     }
@@ -183,7 +187,7 @@
   .mdc-switch__knob {
     background-color: $mdc-switch-disabled-knob-color;
 
-    @include mdc-theme-dark(".mdc-checkbox") {
+    @include mdc-theme-dark(".mdc-switch") {
       background-color: $mdc-switch-disabled-knob-color-dark;
     }
   }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-02-21 00:00:00.000000000 Z
+date: 2017-03-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails