material_components_web-sass 0.20.0 → 0.21.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d8ca8d42be1db8293e67a81ea8982e79f83a046c
-  data.tar.gz: d273a3510c91da3706a0d025f3c362d14efe8555
+  metadata.gz: 2b334719663df042c604d36a3ae498e7740df9fb
+  data.tar.gz: 6969131d3b9cb32034243b9a09f666ae0f513cf2
 SHA512:
-  metadata.gz: 42483b7070fc79daa3e449c3c67aa5fd8f50e960c103c22a5fe72af7126616d20262404ccf9455d3bbc1cd782ef24b6ddc9d1f69d9a9aa31f9abae1167202c5a
-  data.tar.gz: 6c66d8344e4ad7cff4f95a3591ee0ca481e7fae829ca349fb7de97d69fb21ff268a82c7d96ca7bcc2a969dee83455b54eb03a7002f6d5a572b71b9be4182d663
+  metadata.gz: fd8ac4ba7ce363e33f730882ccad3b1e932003d0b99d11a8586a90a53ff65abaa843eede000ac1c3b6117de26bd868bba4e01f23365a770f155eef5acee5024b
+  data.tar.gz: 64e6c4947c5bfabdb7c428114a1a2b9346a03a101617f8cd8414ab5aba99c1812937586fc5a13fdd0110cfdaa0234df2c281bf240fbcf6993f543f2459837448

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.21.0 (2017-09-19)
+
+- Update assets to match upstream version
+
+Library version: 
+
+- Material Components for the web v0.21.0
+- Material Icons v3.0.0
+
 ## 0.20.0 (2017-09-06)
 
 - Update assets to match upstream version

data/README.md

@@ -42,7 +42,6 @@ Restart Rails web server if it was running.
 Individual Sass components can be included like this:
 
 ```scss
-@import "@material/animation/mdc-animation";
 @import "@material/button/mdc-button";
 @import "@material/card/mdc-card";
 @import "@material/checkbox/mdc-checkbox";

data/lib/material_components_web/sass/version.rb

@@ -1,5 +1,5 @@
 module MaterialComponentsWeb
   module Sass
-    VERSION = '0.20.0'.freeze
+    VERSION = '0.21.0'.freeze
   end
 end

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

@@ -2052,6 +2052,23 @@ var registry = Object.create(null);
 
 var CONSOLE_WARN = console.warn.bind(console);
 
+function _emit(evtType, evtData) {
+  var shouldBubble = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+  var evt = void 0;
+  if (typeof CustomEvent === 'function') {
+    evt = new CustomEvent(evtType, {
+      detail: evtData,
+      bubbles: shouldBubble
+    });
+  } else {
+    evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent(evtType, shouldBubble, false, evtData);
+  }
+
+  document.dispatchEvent(evt);
+}
+
 /**
  * Auto-initializes all mdc components on a page.
  */
@@ -2085,6 +2102,8 @@ function mdcAutoInit() {
       configurable: true
     });
   }
+
+  _emit('MDCAutoInit:End', {});
 }
 
 mdcAutoInit.register = function (componentName, Ctor) {
@@ -9749,7 +9768,7 @@ var MDCSliderFoundation = function (_MDCFoundation) {
       this.layout();
       // At last step, provide a reasonable default value to discrete slider
       if (this.isDiscrete_ && this.getStep() == 0) {
-        this.setStep(1);
+        this.step_ = 1;
       }
     }
   }, {
@@ -11491,7 +11510,7 @@ var MDCTabBarScrollerFoundation = function (_MDCFoundation) {
         }
       }
 
-      this.scrollToTabAtIndex_(scrollTargetIndex);
+      this.scrollToTabAtIndex(scrollTargetIndex);
     }
   }, {
     key: 'scrollForward',
@@ -11523,7 +11542,7 @@ var MDCTabBarScrollerFoundation = function (_MDCFoundation) {
         }
       }
 
-      this.scrollToTabAtIndex_(scrollTargetIndex);
+      this.scrollToTabAtIndex(scrollTargetIndex);
     }
   }, {
     key: 'layout',
@@ -11588,8 +11607,8 @@ var MDCTabBarScrollerFoundation = function (_MDCFoundation) {
       this.updateIndicatorEnabledStates_();
     }
   }, {
-    key: 'scrollToTabAtIndex_',
-    value: function scrollToTabAtIndex_(index) {
+    key: 'scrollToTabAtIndex',
+    value: function scrollToTabAtIndex(index) {
       var _this5 = this;
 
       var scrollTargetOffsetLeft = this.adapter_.getComputedLeftForTabAtIndex(index);

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

@@ -14,28 +14,180 @@
 // limitations under the License.
 //
 
+@import "@material/elevation/mixins";
 @import "@material/ripple/mixins";
+@import "@material/theme/functions";
 @import "@material/theme/mixins";
-@import "@material/theme/variables";
+@import "@material/typography/mixins";
+@import "./variables";
 
-@mixin mdc-button-filled_() {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .32));
-  @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .32));
-  @include mdc-theme-prop(color, text-primary-on-dark);
+@mixin mdc-button-filled-accessible($container-fill-color) {
+  $light-or-dark: mdc-theme-light-or-dark($container-fill-color);
 
-  background-color: black;
+  @include mdc-button-container-fill-color($container-fill-color);
 
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-ripple-base;
-    @include mdc-ripple-bg((pseudo: "::before", base-color: black, opacity: .32));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: black, opacity: .32));
-    @include mdc-theme-prop(color, text-primary-on-light);
+  @if ($light-or-dark == "light") {
+    @include mdc-button-ink-color(text-primary-on-dark);
+    @include mdc-button-ripple((base-color: white, opacity: .32));
+  } @else {
+    @include mdc-button-ink-color(text-primary-on-light);
+    @include mdc-button-ripple((base-color: black, opacity: .32));
+  }
+}
+
+@mixin mdc-button-container-fill-color($color) {
+  // :not(:disabled) is used to support link styled as button
+  // as link does not support :enabled style
+  &:not(:disabled) {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
 
-    background-color: white;
+@mixin mdc-button-stroke-color($color) {
+  &:not(:disabled) {
+    @include mdc-theme-prop(border-color, $color);
+  }
+}
+
+@mixin mdc-button-ink-color($color) {
+  &:not(:disabled) {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@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));
 
     &:not(.mdc-ripple-upgraded) {
-      -webkit-tap-highlight-color: rgba(black, .18);
+      $tap-highlight-color: rgba(map-get($ripple-config, base-color), map-get($ripple-config, opacity));
+
+      @include mdc-theme-prop(-webkit-tap-highlight-color, $tap-highlight-color);
     }
   }
 }
+
+@mixin mdc-button-corner-radius($corner-radius) {
+  border-radius: $corner-radius;
+}
+
+@mixin mdc-button-stroke-width($stroke-width) {
+  border-width: $stroke-width;
+  // Note: line height is adjusted for stroke button because borders are not
+  // considered as space available to text on the Web
+  line-height: $mdc-button-height - $stroke-width * 2;
+
+  // postcss-bem-linter: ignore
+  &.mdc-button--dense {
+    // Minus extra 1 to accommodate odd font size of dense button
+    line-height: $mdc-dense-button-height - $stroke-width * 2 - 1;
+  }
+}
+
+@mixin mdc-button-base_() {
+  @include mdc-typography(button);
+
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 88px;
+  height: $mdc-button-height;
+  padding: 0 16px;
+  border: none;
+  outline: none;
+  text-align: center;
+  user-select: none;
+  -webkit-appearance: none;
+  overflow: hidden;
+  vertical-align: middle;
+
+  // postcss-bem-linter: ignore
+  &:active {
+    outline: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  &:disabled {
+    @include mdc-theme-prop(background-color, transparent);
+    @include mdc-theme-prop(color, text-disabled-on-light);
+
+    cursor: default;
+    pointer-events: none;
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(color, text-disabled-on-dark);
+    }
+  }
+}
+
+@mixin mdc-button__icon_ {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  font-size: 18px;
+  line-height: inherit;
+  vertical-align: top;
+}
+
+@mixin mdc-button--stroked_() {
+  border-style: solid;
+
+  &:disabled {
+    @include mdc-theme-prop(border-color, text-disabled-on-light);
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(border-color, text-disabled-on-dark);
+    }
+  }
+}
+
+@mixin mdc-button--filled_() {
+  &:disabled {
+    @include mdc-theme-prop(background-color, rgba(black, .12));
+    @include mdc-theme-prop(color, text-disabled-on-light);
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(background-color, rgba(white, .12));
+      @include mdc-theme-prop(color, text-disabled-on-light);
+    }
+  }
+}
+
+@mixin mdc-button--raised_() {
+  @include mdc-elevation(2);
+  @include mdc-elevation-transition;
+
+  &:hover,
+  &:focus {
+    @include mdc-elevation(4);
+  }
+
+  &:active {
+    @include mdc-elevation(8);
+  }
+
+  &:disabled {
+    @include mdc-elevation(0);
+  }
+}
+
+@mixin mdc-button--compact_() {
+  padding: 0 8px;
+}
+
+@mixin mdc-button--dense_() {
+  height: $mdc-dense-button-height;
+  font-size: .8125rem; // 13sp
+  line-height: $mdc-dense-button-height;
+}

data/vendor/assets/stylesheets/@material/{animation/mdc-animation.scss → button/_variables.scss}

@@ -14,22 +14,5 @@
 // limitations under the License.
 //
 
-@import "./mixins";
-
-.mdc-animation {
-  &-deceleration-curve {
-    @include mdc-animation-deceleration-curve;
-  }
-
-  &-standard-curve {
-    @include mdc-animation-standard-curve;
-  }
-
-  &-acceleration-curve {
-    @include mdc-animation-acceleration-curve;
-  }
-
-  &-sharp-curve {
-    @include mdc-animation-sharp-curve;
-  }
-}
+$mdc-button-height: 36px;
+$mdc-dense-button-height: 32px;

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

@@ -14,194 +14,56 @@
 // limitations under the License.
 //
 
-@import "@material/elevation/mixins";
-@import "@material/ripple/mixins";
 @import "@material/theme/mixins";
-@import "@material/theme/variables";
-@import "@material/typography/mixins";
 @import "./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(button);
-  @include mdc-theme-prop(color, text-primary-on-light);
-
-  display: inline-block;
-  position: relative;
-  min-width: 88px;
-  height: 36px;
-  padding: 0 16px;
-  border: none;
-  border-radius: 4px;
-  box-sizing: border-box;
-  outline: none;
-  background: transparent;
-  text-align: center;
-  overflow: hidden;
-  vertical-align: middle;
-  user-select: none;
-  -webkit-appearance: none;
-
-  // postcss-bem-linter: ignore
-  &:active {
-    outline: none;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-
-  &:not(.mdc-ripple-upgraded) {
-    -webkit-tap-highlight-color: rgba(black, .3);
-  }
+  @include mdc-button-base_;
+  @include mdc-button-corner-radius(2px);
+  @include mdc-button-container-fill-color(transparent);
+  @include mdc-button-ink-color(text-primary-on-light);
+  @include mdc-button-ripple((base-color: black, opacity: .16));
 
   @include mdc-theme-dark(".mdc-button") {
-    @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));
-    @include mdc-theme-prop(color, text-primary-on-dark);
-
-    &:not(.mdc-ripple-upgraded) {
-      -webkit-tap-highlight-color: rgba(white, .18);
-    }
+    @include mdc-button-ink-color(text-primary-on-dark);
+    @include mdc-button-ripple((base-color: white, opacity: .16));
   }
 }
 
 .mdc-button--raised,
 .mdc-button--unelevated {
-  @include mdc-button-filled_;
-}
+  @include mdc-button--filled_;
+  @include mdc-button-filled-accessible(black);
 
-.mdc-button--raised {
-  @include mdc-elevation(2);
-  @include mdc-elevation-transition;
-
-  &:hover,
-  &:focus {
-    @include mdc-elevation(4);
+  @include mdc-theme-dark(".mdc-button") {
+    @include mdc-button-filled-accessible(white);
   }
+}
 
-  &:active {
-    @include mdc-elevation(8);
-  }
+.mdc-button--raised {
+  @include mdc-button--raised_;
 }
 
 .mdc-button--stroked {
-  @include mdc-theme-prop(border-color, text-primary-on-light);
-
-  border-width: 2px;
-  border-style: solid;
-  line-height: 32px;
+  @include mdc-button--stroked_;
+  @include mdc-button-stroke-width(2px);
+  @include mdc-button-stroke-color(text-primary-on-light);
 
   @include mdc-theme-dark(".mdc-button") {
-    @include mdc-theme-prop(border-color, text-primary-on-dark);
-  }
-
-  // postcss-bem-linter: ignore
-  &.mdc-button--dense {
-    line-height: 27px;  // To accommodate odd font size of dense button
+    @include mdc-button-stroke-color(text-primary-on-dark);
   }
 }
 
 .mdc-button--compact {
-  padding: 0 8px;
+  @include mdc-button--compact_;
 }
 
 .mdc-button--dense {
-  height: 32px;
-  font-size: .8125rem; // 13sp
-  line-height: 32px;
+  @include mdc-button--dense_;
 }
 
-@each $theme-style in (primary, secondary) {
-  // Needed for backward compatibility. Theme uses the term "secondary", but button still calls it "accent" for now.
-  $modifier: if($theme-style == "secondary", "accent", $theme-style);
-
-  // postcss-bem-linter: ignore
-  .mdc-button--#{$modifier} {
-    $theme-value: map-get($mdc-theme-property-values, $theme-style);
-
-    @include mdc-ripple-base;
-    @include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
-    @include mdc-theme-prop(color, $theme-style);
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-ripple-base;
-      @include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
-      @include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
-      @include mdc-theme-prop(color, $theme-style);
-    }
-    // postcss-bem-linter: ignore
-    &.mdc-button--raised,
-    &.mdc-button--unelevated {
-      $theme-value: map-get($mdc-theme-property-values, text-primary-on-#{$theme-style});
-
-      @include mdc-ripple-base;
-      @include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .32));
-      @include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .32));
-      @include mdc-theme-prop(background-color, $theme-style);
-      @include mdc-theme-prop(color, text-primary-on-#{$theme-style});
-    }
-    // postcss-bem-linter: ignore
-    &.mdc-button--stroked {
-      @include mdc-theme-prop(border-color, $theme-style);
-
-      @include mdc-theme-dark(".mdc-button") {
-        @include mdc-theme-prop(border-color, $theme-style);
-      }
-    }
-  }
-}
-
-// Disabled button styles need to be last to ensure they override other primary/accent/dark styles
-
-.mdc-button {
-  fieldset:disabled &,
-  &:disabled {
-    color: rgba(black, .38);
-    cursor: default;
-    pointer-events: none;
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(color, text-disabled-on-dark);
-    }
-  }
-}
-
-.mdc-button--raised,
-.mdc-button--unelevated {
-  fieldset:disabled &,
-  &:disabled {
-    @include mdc-elevation(0);
-    @include mdc-theme-prop(color, text-primary-on-dark);
-
-    background-color: rgba(black, .15);
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(color, text-disabled-on-dark);
-
-      background-color: rgba(255, 255, 255, .15);
-    }
-  }
-}
-
-.mdc-button--stroked {
-  fieldset:disabled &,
-  &:disabled {
-    border-color: rgba(black, .38);
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(border-color, text-disabled-on-dark);
-    }
-  }
+.mdc-button__icon {
+  @include mdc-button__icon_;
 }
 // postcss-bem-linter: end