material_components_web-sass 0.17.0 → 0.18.0

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

@@ -17,62 +17,33 @@
 @import "@material/elevation/mixins";
 @import "@material/ripple/mixins";
 @import "@material/theme/mixins";
+@import "@material/theme/variables";
 @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(button);
   @include mdc-theme-prop(color, text-primary-on-light);
-  @include mdc-typography-base;
 
   display: inline-block;
   position: relative;
-  min-width: 64px;
+  min-width: 88px;
   height: 36px;
   padding: 0 16px;
   border: none;
-  border-radius: 2px;
+  border-radius: 4px;
+  box-sizing: border-box;
   outline: none;
   background: transparent;
-  font-size: 14px;
-  font-weight: 500;
-  letter-spacing: .04em;
-  line-height: 36px;
   text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
   overflow: hidden;
   vertical-align: middle;
   user-select: none;
-  box-sizing: border-box;
   -webkit-appearance: none;
 
-  &:not(.mdc-ripple-upgraded) {
-    -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);
-
-    &:not(.mdc-ripple-upgraded) {
-      -webkit-tap-highlight-color: rgba(white, .18);
-    }
-  }
-
-  @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;
@@ -87,110 +58,120 @@
     border: 0;
   }
 
-  &--dense {
-    height: 32px;
-    font-size: .8125rem; // 13sp
-    line-height: 32px;
+  &:not(.mdc-ripple-upgraded) {
+    -webkit-tap-highlight-color: rgba(black, .3);
   }
 
-  // TODO(cristobalchao): Disable ink wash on hover and alter elevation instead for raised surfaces.
-  &--raised {
-    @include mdc-elevation(2);
-    @include mdc-elevation-transition;
-
-    min-width: 88px;
-
-    &:active {
-      @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));
-      }
-    }
+  fieldset:disabled &,
+  &:disabled {
+    color: rgba(black, .38);
+    cursor: default;
+    pointer-events: none;
 
     @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(background-color, primary);
-      @include mdc-theme-prop(color, text-primary-on-primary);
-
-      // postcss-bem-linter: ignore
-      &::before {
-        // We are explicitly not fully adhering to Material Design here.
-        // This should be the 700-shade when active instead of a black shade.
-        // Due to the complexity involved in adhering fully it is being ignored.
-        // Instead re-using the existing architecture for shading works just fine.
-        color: black;
-      }
+      @include mdc-theme-prop(color, text-disabled-on-dark);
     }
   }
 
-  &--primary {
-    @include mdc-theme-prop(color, primary);
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(color, primary);
-    }
+  @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);
 
-    // postcss-bem-linter: ignore
-    &.mdc-button--raised {
-      @include mdc-theme-prop(background-color, primary);
-      @include mdc-theme-prop(color, text-primary-on-primary);
-
-      // postcss-bem-linter: ignore
-      &::before {
-        color: black;
-      }
+    &:not(.mdc-ripple-upgraded) {
+      -webkit-tap-highlight-color: rgba(white, .18);
     }
   }
+}
 
-  &--accent {
-    @include mdc-theme-prop(color, accent);
+.mdc-button--raised {
+  @include mdc-elevation(2);
+  @include mdc-elevation-transition;
+  @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);
 
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(color, accent);
-    }
+  background-color: black;
 
-    // postcss-bem-linter: ignore
-    &.mdc-button--raised {
-      @include mdc-theme-prop(background-color, accent);
-      @include mdc-theme-prop(color, text-primary-on-accent);
-
-      // postcss-bem-linter: ignore
-      &::before {
-        color: black;
-      }
-    }
+  &:hover,
+  &:focus {
+    @include mdc-elevation(4);
   }
 
-  &--compact {
-    padding: 0 8px;
+  &:active {
+    @include mdc-elevation(8);
   }
 
   fieldset:disabled &,
   &:disabled {
-    color: rgba(0, 0, 0, .26);
-    cursor: default;
-    pointer-events: none;
+    @include mdc-elevation(0);
+    @include mdc-theme-prop(color, text-primary-on-dark);
+
+    background-color: rgba(black, .15);
 
     @include mdc-theme-dark(".mdc-button") {
-      color: rgba(255, 255, 255, .3);
+      @include mdc-theme-prop(color, text-disabled-on-dark);
+
+      background-color: rgba(255, 255, 255, .15);
     }
   }
 
-  fieldset:disabled &--raised,
-  &--raised:disabled {
-    @include mdc-elevation(0);
+  @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);
 
-    background-color: rgba(0, 0, 0, .12);
-    pointer-events: none;
+    background-color: white;
 
-    @include mdc-theme-dark(".mdc-button") {
-      background-color: rgba(255, 255, 255, .12);
+    &:not(.mdc-ripple-upgraded) {
+      -webkit-tap-highlight-color: rgba(black, .18);
     }
   }
 }
 
+.mdc-button--compact {
+  padding: 0 8px;
+}
+
+.mdc-button--dense {
+  height: 32px;
+  font-size: .8125rem; // 13sp
+  line-height: 32px;
+}
+
+@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: end

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

@@ -24,7 +24,7 @@
 $mdc-dialog-dark-theme-bg-color: #303030 !default;
 
 :root {
-  --mdc-dialog-dark-theme-bg-color: $mdc-dialog-dark-theme-bg-color;
+  --mdc-dialog-dark-theme-bg-color: #{$mdc-dialog-dark-theme-bg-color};
 }
 
 // postcss-bem-linter: define dialog
@@ -143,7 +143,7 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     }
 
     &__action {
-      @include mdc-theme-prop(color, accent);
+      @include mdc-theme-prop(color, secondary);
     }
   }
 

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

@@ -22,7 +22,7 @@ $mdc-permanent-drawer-width: 240px;
 $mdc-permanent-drawer-dark-theme-bg-color: #212121 !default;
 
 :root {
-  --mdc-permanent-drawer-dark-theme-bg-color: $mdc-permanent-drawer-dark-theme-bg-color;
+  --mdc-permanent-drawer-dark-theme-bg-color: #{$mdc-permanent-drawer-dark-theme-bg-color};
 }
 
 .mdc-permanent-drawer {

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

@@ -24,7 +24,7 @@ $mdc-persistent-drawer-width: 240px;
 $mdc-persistent-drawer-dark-theme-bg-color: #212121 !default;
 
 :root {
-  --mdc-persistent-drawer-dark-theme-bg-color: $mdc-persistent-drawer-dark-theme-bg-color;
+  --mdc-persistent-drawer-dark-theme-bg-color: #{$mdc-persistent-drawer-dark-theme-bg-color};
 }
 
 .mdc-persistent-drawer {

data/vendor/assets/stylesheets/@material/drawer/slidable/_mixins.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.
- */
+//
+// 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 "@material/rtl/mixins";
 

data/vendor/assets/stylesheets/@material/drawer/slidable/_variables.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.
- */
+//
+// 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.
+//
 
 $mdc-slidable-drawer-transition-close-time: .195s;
 $mdc-slidable-drawer-transition-open-time: .225s;

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

@@ -45,8 +45,8 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, .18);
   }
 
-  @include mdc-theme-prop(background-color, accent);
-  @include mdc-theme-prop(color, text-primary-on-accent);
+  @include mdc-theme-prop(background-color, secondary);
+  @include mdc-theme-prop(color, text-primary-on-secondary);
   @include mdc-elevation(6);
 
   &--mini {

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

@@ -129,6 +129,9 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
 .mdc-grid-tile {
   display: block;
   position: relative;
+
+  /* @alternate */
+  width: $mdc-grid-list-tile-width;
   width: var(--mdc-grid-list-tile-width, $mdc-grid-list-tile-width);
 
   &__primary {

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

@@ -81,9 +81,9 @@
 }
 
 .mdc-icon-toggle--accent {
-  @include mdc-theme-prop(color, accent);
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .14));
+  @include mdc-theme-prop(color, secondary);
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: secondary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: secondary, opacity: .14));
 }
 
 .mdc-icon-toggle--disabled {

data/vendor/assets/stylesheets/@material/layout-grid/_variables.scss

@@ -44,4 +44,4 @@ $mdc-layout-grid-column-width: (
 
 $mdc-layout-grid-default-column-span: 4 !default;
 
-$mdc-layout-grid-max-width: null;
+$mdc-layout-grid-max-width: null !default;

data/vendor/assets/stylesheets/@material/layout-grid/mdc-layout-grid.scss

@@ -17,9 +17,9 @@
 
 :root {
   @each $size in map-keys($mdc-layout-grid-columns) {
-    --mdc-layout-grid-margin-#{$size}: map-get($mdc-layout-grid-default-margin, $size);
-    --mdc-layout-grid-gutter-#{$size}: map-get($mdc-layout-grid-default-gutter, $size);
-    --mdc-layout-grid-column-width-#{$size}: map-get($mdc-layout-grid-column-width, $size);
+    --mdc-layout-grid-margin-#{$size}: #{map-get($mdc-layout-grid-default-margin, $size)};
+    --mdc-layout-grid-gutter-#{$size}: #{map-get($mdc-layout-grid-default-gutter, $size)};
+    --mdc-layout-grid-column-width-#{$size}: #{map-get($mdc-layout-grid-column-width, $size)};
   }
 }
 

data/vendor/assets/stylesheets/@material/linear-progress/mdc-linear-progress.scss

@@ -44,7 +44,7 @@
   }
 
   &--accent .mdc-linear-progress__bar-inner {
-    @include mdc-theme-prop(background-color, accent);
+    @include mdc-theme-prop(background-color, secondary);
   }
 
   &__buffering-dots {

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

@@ -49,8 +49,8 @@
       @include mdc-theme-prop(background-color, primary);
     }
 
-    @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .16));
+    @include mdc-ripple-bg((pseudo: "::before", theme-style: secondary, opacity: .16));
+    @include mdc-ripple-fg((pseudo: "::after", theme-style: secondary, opacity: .16));
   }
 }