feat: Update material-components-web to v0.30.0 (#624)

Author: trimox

package-lock.json

@@ -35,7 +35,7 @@
     "@angular/forms": "^5.2.3",
     "@angular/platform-browser": "^5.2.3",
     "core-js": "^2.5.3",
-    "material-components-web": "^0.29.0",
+    "material-components-web": "^0.30.0",
     "rxjs": "^5.5.6",
     "tsickle": "^0.26.0",
     "tslib": "^1.9.0",

package.json

@@ -1,15 +1,7 @@
 .mdc-button--primary {
   @include mdc-button-filled-accessible($mdc-theme-primary);
-
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-filled-accessible($mdc-theme-primary);
-  }
 }
 
 .mdc-button--secondary {
   @include mdc-button-filled-accessible($mdc-theme-secondary);
-
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-filled-accessible($mdc-theme-secondary);
-  }
 }

src/theme/extend/mdc-button.scss

@@ -1,6 +1,8 @@
+@import "material-components-web/line-ripple/mdc-line-ripple";
 @import "material-components-web/button/mdc-button";
 @import "material-components-web/card/mdc-card";
 @import "material-components-web/checkbox/mdc-checkbox";
+@import "material-components-web/chips/mdc-chips";
 @import "material-components-web/dialog/mdc-dialog";
 @import "material-components-web/drawer/mdc-drawer";
 @import "material-components-web/elevation/mdc-elevation";

src/theme/extend/mdc-theme.scss

@@ -87,7 +87,7 @@
 @mixin mdc-button-base_() {
   @include mdc-typography(button);
   @include mdc-ripple-surface;
-  @include mdc-ripple-radius;
+  @include mdc-ripple-radius-bounded;
 
   display: inline-block;
   position: relative;
@@ -103,6 +103,11 @@
   overflow: hidden;
   vertical-align: middle;
 
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
   // postcss-bem-linter: ignore
   &:active {
     outline: none;
@@ -112,21 +117,12 @@
     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);
-    }
   }
 }
 
@@ -145,22 +141,13 @@
 
   &: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);
-    }
   }
 }
 

src/theme/extend/text-field/mdc-text-field.scss

@@ -16,7 +16,6 @@
 
 @import "../ripple/common";
 @import "../ripple/mixins";
-@import "../theme/mixins";
 @import "./mixins";
 @import "./variables";
 

src/theme/material-components-web.scss

@@ -0,0 +1,57 @@
+//
+// Copyright 2017 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 "../theme/mixins";
+
+//
+// Public
+//
+
+@mixin mdc-card-fill-color($color) {
+  @include mdc-theme-prop(background-color, $color);
+}
+
+@mixin mdc-card-stroke($color, $thickness: 1px) {
+  border: $thickness solid mdc-theme-prop-value($color);
+}
+
+@mixin mdc-card-corner-radius($radius) {
+  border-radius: $radius;
+}
+
+@mixin mdc-card-media-aspect-ratio($x, $y) {
+  &::before {
+    // This clever trick brought to you by: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
+    margin-top: percentage($y / $x);
+  }
+}
+
+//
+// Private
+//
+
+@mixin mdc-card-row-layout_($display: flex) {
+  display: $display;
+  flex-direction: row;
+  align-items: center;
+}
+
+@mixin mdc-card-media-aspect-ratio-base_ {
+  &::before {
+    display: block;
+    content: "";
+  }
+}