material_components_web-sass 0.23.0 → 0.24.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5783828cbdfaefed41a723e1bf9b49275f3dd863
-  data.tar.gz: 02d39f0fdf9d157edd6882ed817a491a6935bcd5
+  metadata.gz: 13cda5cefe52b75e32186da2f58944147e182177
+  data.tar.gz: 2f7d0179a435094ec43b949eb6c506b39c6dc879
 SHA512:
-  metadata.gz: 512bea0d7116ea4e146a26b32d65eea383e0acc2861f56c72a17a1f4ba98772d1722d1a623fb7d8b90d7275851d6a6412d05251119acad42dd327905f62a0e26
-  data.tar.gz: e4e64fa4ef5bc755edf6af719aeb581137362fdc47cda9820750314ffb3e4270f42c4015468c269ad84dd170c0676a447616d950185c8d066b4407a5f0d26a09
+  metadata.gz: '08772e27cca4eb6adbc7336d5b1375873915c060c621308f9ce126afc3489140d90e5f78b5a345ae60aa0cd3b8ad2f2a723823ba217c914943436524b2aeb0cd'
+  data.tar.gz: 92e9bbfe5f0268c655d68ee89b5e3fc34001997b12ea5336af4500b83d7054d4ed1f74ddf353a754d10c1a23f13fd16c114ae4b1cc10861b845bd45baf1fc0ff

data/.travis.yml

@@ -1,7 +1,7 @@
 sudo: false
 language: ruby
 rvm:
-  - 2.2.7
-  - 2.3.4
-  - 2.4.1
+  - 2.2.8
+  - 2.3.5
+  - 2.4.2
 before_install: gem install bundler

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.24.0 (2017-10-31)
+
+- Update assets to match upstream version
+
+Library version: 
+
+- Material Components for the web v0.24.0
+- Material Icons v3.0.0
+
 ## 0.23.0 (2017-10-19)
 
 - Update assets to match upstream version

data/lib/material_components_web/sass/version.rb

@@ -1,5 +1,5 @@
 module MaterialComponentsWeb
   module Sass
-    VERSION = '0.23.0'.freeze
+    VERSION = '0.24.0'.freeze
   end
 end

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

@@ -1910,6 +1910,7 @@ var MDCTabBar = function (_MDCComponent) {
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cssClasses; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return strings; });
 /**
+ * @license
  * Copyright 2016 Google Inc. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -3327,16 +3328,12 @@ var MDCRippleFoundation = function (_MDCFoundation) {
     key: 'updateLayoutCssVars_',
     value: function updateLayoutCssVars_() {
       var _MDCRippleFoundation$6 = MDCRippleFoundation.strings,
-          VAR_SURFACE_WIDTH = _MDCRippleFoundation$6.VAR_SURFACE_WIDTH,
-          VAR_SURFACE_HEIGHT = _MDCRippleFoundation$6.VAR_SURFACE_HEIGHT,
           VAR_FG_SIZE = _MDCRippleFoundation$6.VAR_FG_SIZE,
           VAR_LEFT = _MDCRippleFoundation$6.VAR_LEFT,
           VAR_TOP = _MDCRippleFoundation$6.VAR_TOP,
           VAR_FG_SCALE = _MDCRippleFoundation$6.VAR_FG_SCALE;
 
 
-      this.adapter_.updateCssVariable(VAR_SURFACE_WIDTH, this.frame_.width + 'px');
-      this.adapter_.updateCssVariable(VAR_SURFACE_HEIGHT, this.frame_.height + 'px');
       this.adapter_.updateCssVariable(VAR_FG_SIZE, this.initialSize_ + 'px');
       this.adapter_.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
 
@@ -3395,8 +3392,6 @@ var cssClasses = {
 };
 
 var strings = {
-  VAR_SURFACE_WIDTH: '--mdc-ripple-surface-width',
-  VAR_SURFACE_HEIGHT: '--mdc-ripple-surface-height',
   VAR_FG_SIZE: '--mdc-ripple-fg-size',
   VAR_LEFT: '--mdc-ripple-left',
   VAR_TOP: '--mdc-ripple-top',
@@ -6556,7 +6551,7 @@ var MDCIconToggle = function (_MDCComponent) {
       this.disabled = this.root_.getAttribute(__WEBPACK_IMPORTED_MODULE_1__foundation__["a" /* default */].strings.ARIA_DISABLED) === 'true';
     }
 
-    /** @return {boolean} */
+    /** @return {!MDCRipple} */
 
   }, {
     key: 'refreshToggleData',
@@ -6571,6 +6566,14 @@ var MDCIconToggle = function (_MDCComponent) {
       return sel ?
       /** @type {!Element} */this.root_.querySelector(sel) : this.root_;
     }
+  }, {
+    key: 'ripple',
+    get: function get() {
+      return this.ripple_;
+    }
+
+    /** @return {boolean} */
+
   }, {
     key: 'on',
     get: function get() {
@@ -12089,6 +12092,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 /**
+ * @license
  * Copyright 2016 Google Inc. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -12440,6 +12444,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 /**
+ * @license
  * Copyright 2016 Google Inc. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");

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

@@ -28,10 +28,10 @@
 
   @if ($light-or-dark == "light") {
     @include mdc-button-ink-color(text-primary-on-dark);
-    @include mdc-button-ripple((theme-style: text-primary-on-dark, opacity: $mdc-filled-button-ripple-opacity));
+    @include mdc-ripple-color(text-primary-on-dark, $mdc-filled-button-ripple-opacity);
   } @else {
     @include mdc-button-ink-color(text-primary-on-light);
-    @include mdc-button-ripple((theme-style: text-primary-on-light, opacity: $mdc-filled-button-ripple-opacity));
+    @include mdc-ripple-color(text-primary-on-light, $mdc-filled-button-ripple-opacity);
   }
 }
 
@@ -55,14 +55,6 @@
   }
 }
 
-@mixin mdc-button-ripple($ripple-config) {
-  &:not(:disabled) {
-    @include mdc-ripple-base;
-    @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
-    @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
-  }
-}
-
 @mixin mdc-button-corner-radius($corner-radius) {
   border-radius: $corner-radius;
 }
@@ -82,11 +74,13 @@
 
 @mixin mdc-button-base_() {
   @include mdc-typography(button);
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius;
 
   display: inline-block;
   position: relative;
   box-sizing: border-box;
-  min-width: 88px;
+  min-width: 64px;
   height: $mdc-button-height;
   padding: 0 16px;
   border: none;

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

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 @import "./mixins";
 @import "./variables";
@@ -24,7 +25,7 @@
   @include mdc-button-corner-radius(2px);
   @include mdc-button-container-fill-color(transparent);
   @include mdc-button-ink-color(primary);
-  @include mdc-button-ripple((theme-style: primary, opacity: $mdc-unfilled-button-ripple-opacity));
+  @include mdc-ripple-color(primary, $mdc-unfilled-button-ripple-opacity);
 }
 
 .mdc-button--raised,
@@ -32,7 +33,7 @@
   @include mdc-button--filled_;
   @include mdc-button-container-fill-color(primary);
   @include mdc-button-ink-color(text-primary-on-primary);
-  @include mdc-button-ripple((theme-style: text-primary-on-primary, opacity: $mdc-filled-button-ripple-opacity));
+  @include mdc-ripple-color(text-primary-on-primary, $mdc-filled-button-ripple-opacity);
 }
 
 .mdc-button--raised {

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

@@ -15,7 +15,6 @@
 //
 
 @import "@material/animation/functions";
-@import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "./functions";
 @import "./keyframes";
@@ -87,13 +86,6 @@
   }
 }
 
-@mixin mdc-checkbox-ripple($ripple-config) {
-  $ripple-config: map-merge((opacity: $mdc-checkbox-ripple-opacity, radius: 50%), $ripple-config);
-
-  @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
-  @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
-}
-
 //
 // Private
 //

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

@@ -29,6 +29,7 @@ $mdc-checkbox-border-width: 2px;
 $mdc-checkbox-transition-duration: 90ms;
 $mdc-checkbox-item-spacing: 4px;
 $mdc-checkbox-ripple-opacity: .14;
+$mdc-checkbox-ripple-radius: 50%;
 $mdc-checkbox-focus-indicator-opacity: .26;
 
 // Manual calculation done on SVG

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

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 @import "./mixins";
 @import "./variables";
@@ -22,10 +23,11 @@
 
 .mdc-checkbox {
   @include mdc-checkbox-base_;
-  @include mdc-ripple-base;
   @include mdc-checkbox-ink-color($mdc-checkbox-mark-color);
   @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color);
-  @include mdc-checkbox-ripple((theme-style: $mdc-checkbox-baseline-theme-color, opacity: $mdc-checkbox-ripple-opacity));
+  @include mdc-ripple-surface;
+  @include mdc-ripple-color($mdc-checkbox-baseline-theme-color, $mdc-checkbox-ripple-opacity);
+  @include mdc-ripple-radius($mdc-checkbox-ripple-radius);
   @include mdc-checkbox-container-colors();
 
   @include mdc-theme-dark {

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

@@ -25,7 +25,7 @@
     position: relative;
     flex-direction: row;
     flex-shrink: 0;
-    align-items: flex-center;
+    align-items: center;
     box-sizing: border-box;
     height: 56px;
     padding: 16px;
@@ -101,12 +101,12 @@
     }
   }
 
-  /* stylelint-disable selector-no-qualifying-type */
+  // stylelint-disable selector-no-qualifying-type
   &--selected.mdc-list-item,
   &--selected.mdc-list-item .mdc-list-item__start-detail {
     @include mdc-theme-prop(color, primary);
   }
-  /* stylelint-enable selector-no-qualifying-type */
+  // stylelint-enable selector-no-qualifying-type
 
   /* TODO(sgomes): Revisit when we have interactive lists. */
   .mdc-list-item::before {

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

@@ -32,29 +32,29 @@ $mdc-permanent-drawer-dark-theme-bg-color: #212121 !default;
   @include mdc-rtl-reflexive-position(left, 0);
 
   @include mdc-theme-dark {
-    background-color: $mdc-permanent-drawer-dark-theme-bg-color;
-    background-color: var(--mdc-permanent-drawer-dark-theme-bg-color, #{$mdc-permanent-drawer-dark-theme-bg-color});
-
     @include mdc-theme-prop(color, text-primary-on-dark);
     @include mdc-rtl-reflexive-box(border, right, 1px solid rgba(white, .12));
+
+    background-color: $mdc-permanent-drawer-dark-theme-bg-color;
+    background-color: var(--mdc-permanent-drawer-dark-theme-bg-color, #{$mdc-permanent-drawer-dark-theme-bg-color});
   }
 
   display: inline-flex;
-  flex-direction: column;
   flex: 0 0 auto;
-  width: $mdc-permanent-drawer-width;
+  flex-direction: column;
   box-sizing: border-box;
+  width: $mdc-permanent-drawer-width;
   overflow: hidden;
 
   &--floating {
-    background: none;
-
     @include mdc-rtl-reflexive-box(border, right, none);
 
-    @include mdc-theme-dark {
-      background: none;
+    background: none;
 
+    @include mdc-theme-dark {
       @include mdc-rtl-reflexive-box(border, right, none);
+
+      background: none;
     }
   }
 }

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

@@ -38,11 +38,11 @@ $mdc-persistent-drawer-dark-theme-bg-color: #212121 !default;
     @include mdc-rtl-reflexive-position(left, 0);
 
     @include mdc-theme-dark {
-      background-color: $mdc-persistent-drawer-dark-theme-bg-color;
-      background-color: var(--mdc-persistent-drawer-dark-theme-bg-color, #{$mdc-persistent-drawer-dark-theme-bg-color});
-
       @include mdc-theme-prop(color, text-primary-on-dark);
       @include mdc-rtl-reflexive-box(border, right, 1px solid rgba(white, .12));
+
+      background-color: $mdc-persistent-drawer-dark-theme-bg-color;
+      background-color: var(--mdc-persistent-drawer-dark-theme-bg-color, #{$mdc-persistent-drawer-dark-theme-bg-color});
     }
 
     @include mdc-slideable-drawer;

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

@@ -28,11 +28,11 @@
   position: fixed;
   top: 0;
   left: 0;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
-  overflow: hidden;
   pointer-events: none;
-  box-sizing: border-box;
+  overflow: hidden;
   contain: strict;
   z-index: 5;
 
@@ -42,14 +42,14 @@
     position: absolute;
     top: 0;
     left: 0;
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, .6);
-    content: "";
     opacity: 0;
     opacity: var(--mdc-temporary-drawer-opacity, 0);
+    content: "";
     will-change: opacity;
-    box-sizing: border-box;
   }
 
   &__drawer {
@@ -58,9 +58,9 @@
     @include mdc-rtl-reflexive-position(left, 0);
 
     @include mdc-theme-dark(".mdc-temporary-drawer") {
-      background: #303030;
-
       @include mdc-theme-prop(color, text-primary-on-dark);
+
+      background: #303030;
     }
 
     @include mdc-slideable-drawer;
@@ -72,9 +72,9 @@
     display: flex;
     position: absolute;
     flex-direction: column;
+    box-sizing: border-box;
     width: calc(100% - 56px);
     max-width: 280px;
-    box-sizing: border-box;
     overflow: hidden;
     touch-action: none;
 
@@ -87,10 +87,10 @@
 
   &__content {
     flex-grow: 1;
+    box-sizing: border-box;
     margin: 0;
     overflow-x: hidden;
     overflow-y: auto;
-    box-sizing: border-box;
     -webkit-overflow-scrolling: touch;
     touch-action: pan-y;
   }

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

@@ -16,21 +16,22 @@
 @import "@material/elevation/mixins";
 @import "@material/elevation/variables";
 @import "@material/ripple/mixins";
+@import "@material/ripple/variables";
 @import "@material/theme/functions";
 @import "@material/theme/mixins";
-@import "./variables";
 
 @mixin mdc-fab-accessible($container-color) {
   @include mdc-fab-container-color($container-color);
+
   // Calculate whether to use dark or light text on top of given color.
   $light-or-dark-text: mdc-theme-light-or-dark($container-color);
 
   @if ($light-or-dark-text == "light") {
     @include mdc-fab-ink-color(text-primary-on-dark);
-    @include mdc-fab-ripple($mdc-fab-light-ripple-config);
+    @include mdc-ripple-color(text-primary-on-dark, $mdc-ripple-pressed-light-ink-opacity);
   } @else {
     @include mdc-fab-ink-color(text-primary-on-light);
-    @include mdc-fab-ripple(()); //default dark ripple
+    @include mdc-ripple-color(text-primary-on-light, $mdc-ripple-pressed-dark-ink-opacity);
   }
 }
 
@@ -42,16 +43,12 @@
   @include mdc-theme-prop(color, $color);
 }
 
-@mixin mdc-fab-ripple($ripple-config) {
-  @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
-  @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
-}
-
 $mdc-fab-icon-enter-delay_: 90ms;
 $mdc-fab-icon-enter-duration_: 180ms;
 
 @mixin mdc-fab-base_ {
-  @include mdc-ripple-base;
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius;
   @include mdc-elevation(6);
 
   display: inline-flex;

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

@@ -12,8 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import "@material/ripple/mixins";
+@import "@material/ripple/variables";
 @import "./mixins";
-@import "./variables";
 
 // postcss-bem-linter: define fab
 
@@ -21,7 +22,7 @@
   @include mdc-fab-base_;
   @include mdc-fab-container-color(secondary);
   @include mdc-fab-ink-color(text-primary-on-secondary);
-  @include mdc-fab-ripple($mdc-fab-light-ripple-config);
+  @include mdc-ripple-color(text-primary-on-secondary, $mdc-ripple-pressed-dark-ink-opacity);
 
   &:not(.mdc-ripple-upgraded) {
     -webkit-tap-highlight-color: rgba(0, 0, 0, .18);