material_components_web-sass 0.26.0 → 0.27.0

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

@@ -28,10 +28,10 @@
 
   @if ($fill-tone == "dark") {
     @include mdc-button-ink-color(text-primary-on-dark);
-    @include mdc-ripple-color(text-primary-on-dark, $mdc-filled-button-ripple-opacity);
+    @include mdc-states(text-primary-on-dark);
   } @else {
     @include mdc-button-ink-color(text-primary-on-light);
-    @include mdc-ripple-color(text-primary-on-light, $mdc-filled-button-ripple-opacity);
+    @include mdc-states(text-primary-on-light);
   }
 }
 

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

@@ -18,6 +18,3 @@ $mdc-button-height: 36px;
 $mdc-button-horizontal-padding: 16px;
 $mdc-dense-button-height: 32px;
 $mdc-compact-button-horizontal-padding: 8px;
-
-$mdc-unfilled-button-ripple-opacity: .16;
-$mdc-filled-button-ripple-opacity: .32;

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

@@ -25,7 +25,7 @@
   @include mdc-button-corner-radius(2px);
   @include mdc-button-container-fill-color(transparent);
   @include mdc-button-ink-color(primary);
-  @include mdc-ripple-color(primary, $mdc-unfilled-button-ripple-opacity);
+  @include mdc-states(primary);
 }
 
 .mdc-button--raised,
@@ -33,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-ripple-color(text-primary-on-primary, $mdc-filled-button-ripple-opacity);
+  @include mdc-states(text-primary-on-primary);
 }
 
 .mdc-button--raised {

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

@@ -26,7 +26,7 @@
   @include mdc-checkbox-ink-color($mdc-checkbox-mark-color);
   @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color);
   @include mdc-ripple-surface;
-  @include mdc-ripple-color($mdc-checkbox-baseline-theme-color, $mdc-checkbox-ripple-opacity);
+  @include mdc-states($mdc-checkbox-baseline-theme-color);
   @include mdc-ripple-radius($mdc-checkbox-ripple-radius);
   @include mdc-checkbox-container-colors();
 

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

@@ -27,10 +27,10 @@
 
   @if ($fill-tone == "dark") {
     @include mdc-fab-ink-color(text-primary-on-dark);
-    @include mdc-ripple-color(text-primary-on-dark, $mdc-ripple-pressed-light-ink-opacity);
+    @include mdc-states(text-primary-on-dark);
   } @else {
     @include mdc-fab-ink-color(text-primary-on-light);
-    @include mdc-ripple-color(text-primary-on-light, $mdc-ripple-pressed-dark-ink-opacity);
+    @include mdc-states(text-primary-on-light);
   }
 }
 

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

@@ -22,11 +22,7 @@
   @include mdc-fab-base_;
   @include mdc-fab-container-color(secondary);
   @include mdc-fab-ink-color(text-primary-on-secondary);
-  @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);
-  }
+  @include mdc-states(text-primary-on-secondary);
 }
 
 .mdc-fab--mini {

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

@@ -23,26 +23,11 @@
 .mdc-icon-toggle {
   @include mdc-theme-prop(color, text-secondary-on-light);
   @include mdc-ripple-surface;
-  // 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-color(black, .062);
   @include mdc-ripple-radius;
+  @include mdc-states(black);
 
   @include mdc-theme-dark(".mdc-icon-toggle", true) {
-    @include mdc-ripple-color(white, .16);
+    @include mdc-states(white);
   }
 
   display: flex;
@@ -75,12 +60,12 @@
 
 .mdc-icon-toggle--primary {
   @include mdc-theme-prop(color, primary);
-  @include mdc-ripple-color(primary, .14);
+  @include mdc-states(primary);
 }
 
 .mdc-icon-toggle--accent {
   @include mdc-theme-prop(color, secondary);
-  @include mdc-ripple-color(secondary, .14);
+  @include mdc-states(secondary);
 }
 
 .mdc-icon-toggle--disabled {

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

@@ -62,6 +62,10 @@
     transition: mdc-animation-exit-temporary(transform, 250ms);
   }
 
+  &__primary-bar {
+    transform: scaleX(0);
+  }
+
   &__secondary-bar {
     visibility: hidden;
   }

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

@@ -0,0 +1,83 @@
+// 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/rtl/mixins";
+@import "@material/theme/mixins";
+@import "./variables";
+
+//
+// Public
+//
+
+@mixin mdc-list-item-primary-text-ink-color($color) {
+  @include mdc-theme-prop(color, $color);
+}
+
+@mixin mdc-list-item-secondary-text-ink-color($color) {
+  .mdc-list-item__secondary-text {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-list-item-graphic-fill-color($color) {
+  .mdc-list-item__start-detail {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-list-item-graphic-ink-color($color) {
+  .mdc-list-item__start-detail {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-list-item-meta-ink-color($color) {
+  .mdc-list-item__end-detail {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-list-divider-color($color) {
+  .mdc-list-divider {
+    @include mdc-theme-prop(border-bottom-color, $color);
+  }
+}
+
+@mixin mdc-list-group-subheader-ink-color($color) {
+  .mdc-list-group__subheader {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+//
+// Private
+//
+
+// Sets the width and height of a detail element to the specified value.
+@mixin mdc-list-detail-size_($size) {
+  width: $size;
+  height: $size;
+}
+
+// Sets the width and height of the start detail element, as well as calculates the margins for
+// the start detail element such that the text is always offset by 72px, which is defined within
+// the spec.
+@mixin mdc-list-start-detail-size_($size) {
+  $text-offset: 72px;
+  $side-padding: $mdc-list-side-padding;
+  $margin-value: $text-offset - $side-padding - $size;
+
+  @include mdc-list-detail-size_($size);
+  @include mdc-rtl-reflexive-box(margin, right, $margin-value, ".mdc-list-item");
+}

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

@@ -0,0 +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.
+
+$mdc-list-divider-color-light: rgba(0, 0, 0, .12) !default;
+$mdc-list-divider-color-dark: rgba(255, 255, 255, .2) !default;
+
+$mdc-list-side-padding: 16px;

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

@@ -17,35 +17,36 @@
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
 @import "@material/typography/variables";
+@import "./mixins";
+@import "./variables";
 
-$mdc-list-side-padding: 16px;
-
-// Sets the width and height of a detail element to the specified dimension.
-@mixin mdc-list-detail-size_($size) {
-  width: $size;
-  height: $size;
-}
-
-// Sets the width and height of the start detail element, as well as calculates the margins for
-// the start detail element such that the text is always offset by 72px, which is defined within
-// the spec.
-@mixin mdc-list-start-detail-size_($size) {
-  $text-offset: 72px;
-  $side-padding: $mdc-list-side-padding;
-  $margin-value: $text-offset - $side-padding - $size;
+// TODO(acdvorak): Find a way to remove parent .mdc-list and .mdc-list-group selectors; they violate BEM.
+.mdc-list,
+.mdc-list-group {
+  @include mdc-list-divider-color($mdc-list-divider-color-light);
 
-  @include mdc-list-detail-size_($size);
-  @include mdc-rtl-reflexive-box(margin, right, $margin-value, ".mdc-list-item");
+  @include mdc-theme-dark {
+    @include mdc-list-divider-color($mdc-list-divider-color-dark);
+  }
 }
 
 // postcss-bem-linter: define list
 
 .mdc-list {
   @include mdc-typography(subheading2);
-  @include mdc-theme-prop(color, text-primary-on-background);
+
+  // TODO(acdvorak): Find a way to remove parent .mdc-list selector; it violates BEM.
+  @include mdc-list-item-primary-text-ink-color(text-primary-on-background);
+  @include mdc-list-item-secondary-text-ink-color(text-secondary-on-background);
+  @include mdc-list-item-graphic-fill-color(transparent);
+  @include mdc-list-item-graphic-ink-color(text-icon-on-background);
+  @include mdc-list-item-meta-ink-color(text-hint-on-background);
 
   @include mdc-theme-dark {
-    @include mdc-theme-prop(color, text-primary-on-dark);
+    @include mdc-list-item-primary-text-ink-color(text-primary-on-dark);
+    @include mdc-list-item-secondary-text-ink-color(text-secondary-on-dark);
+    @include mdc-list-item-graphic-ink-color(text-icon-on-dark);
+    @include mdc-list-item-meta-ink-color(text-hint-on-dark);
   }
 
   margin: 0;
@@ -75,8 +76,21 @@ $mdc-list-side-padding: 16px;
   justify-content: flex-start;
   height: 48px;
 
+  // "Selected" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.
+  // "Activated" is more permanent. E.g., the currently highlighted navigation destination in a drawer.
+  &--selected,
+  &--activated {
+    @include mdc-list-item-primary-text-ink-color(primary);
+    @include mdc-list-item-graphic-ink-color(primary);
+  }
+
+  // stylelint-disable-next-line plugin/selector-bem-pattern
   &__start-detail {
     @include mdc-list-start-detail-size_(24px);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &__end-detail {
@@ -87,22 +101,17 @@ $mdc-list-side-padding: 16px;
   &__text {
     display: inline-flex;
     flex-direction: column;
+  }
 
-    &__secondary {
-      @include mdc-typography(body1);
-      @include mdc-theme-prop(color, text-secondary-on-background);
-
-      @include mdc-theme-dark {
-        @include mdc-theme-prop(color, text-secondary-on-dark);
-      }
+  &__secondary-text {
+    @include mdc-typography(body1);
 
-      // Match the font size to the primary text when dense
-      // stylelint-disable plugin/selector-bem-pattern
-      .mdc-list--dense & {
-        font-size: inherit;
-      }
-      // stylelint-enable plugin/selector-bem-pattern
+    // Match the font size to the primary text when dense
+    // stylelint-disable plugin/selector-bem-pattern
+    .mdc-list--dense & {
+      font-size: inherit;
     }
+    // stylelint-enable plugin/selector-bem-pattern
   }
 
   // stylelint-disable plugin/selector-bem-pattern
@@ -144,7 +153,7 @@ $mdc-list-side-padding: 16px;
     height: 60px;
   }
 }
-// postcss-bem-linter: end //
+// postcss-bem-linter: end
 
 // Override anchor tag styles for the use-case of a list being used for navigation
 // stylelint-disable selector-max-type,selector-no-qualifying-type
@@ -182,11 +191,8 @@ a.mdc-list-item {
   height: 0;
   margin: 0;
   border: none;
-  border-bottom: 1px solid rgba(0, 0, 0, .12);
-
-  @include mdc-theme-dark(".mdc-list") {
-    border-bottom-color: rgba(255, 255, 255, .2);
-  }
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 }
 
 .mdc-list-divider--inset {
@@ -202,6 +208,12 @@ a.mdc-list-item {
 // postcss-bem-linter: define list-group
 
 .mdc-list-group {
+  @include mdc-list-group-subheader-ink-color(text-primary-on-background);
+
+  @include mdc-theme-dark {
+    @include mdc-list-group-subheader-ink-color(text-primary-on-dark);
+  }
+
   padding: 0 $mdc-list-side-padding;
 
   &__subheader {
@@ -211,11 +223,6 @@ a.mdc-list-item {
       ($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;
 
     @include mdc-typography(body2);
-    @include mdc-theme-prop(color, text-primary-on-background);
-
-    @include mdc-theme-dark {
-      @include mdc-theme-prop(color, text-primary-on-dark);
-    }
 
     margin: $mdc-list-subheader-margin 0;
   }

data/vendor/assets/stylesheets/@material/menu/simple/mdc-simple-menu.scss

@@ -22,10 +22,17 @@
 $mdc-simple-menu-fade-duration: .2s;
 $mdc-simple-menu-item-fade-duration: .3s;
 
-/* postcss-bem-linter: define simple-menu */
+// postcss-bem-linter: define simple-menu
 .mdc-simple-menu {
+  @include mdc-elevation(2);
+
+  @include mdc-theme-dark {
+    background-color: #424242;
+  }
+
   display: none;
   position: absolute;
+  box-sizing: border-box;
   min-width: 170px;
   max-width: calc(100vw - 32px);
   max-height: calc(100vh - 32px);
@@ -35,20 +42,13 @@ $mdc-simple-menu-item-fade-duration: .3s;
   transform-origin: top left;
   border-radius: 2px;
   background-color: white;
-  white-space: nowrap;
   opacity: 0;
+  white-space: nowrap;
   overflow-x: hidden;
   overflow-y: auto;
-  box-sizing: border-box;
   will-change: transform, opacity;
   z-index: 4;
 
-  @include mdc-elevation(2);
-
-  @include mdc-theme-dark {
-    background-color: #424242;
-  }
-
   &:focus {
     outline: none;
   }
@@ -61,17 +61,17 @@ $mdc-simple-menu-item-fade-duration: .3s;
 
   &--animating {
     display: inline-block;
-    overflow-y: hidden;
     transition: opacity $mdc-simple-menu-fade-duration $mdc-animation-deceleration-curve-timing-function;
+    overflow-y: hidden;
   }
 
   &__items {
+    box-sizing: border-box;
     overflow-x: hidden;
     overflow-y: auto;
-    box-sizing: border-box;
     will-change: transform;
 
-    /* stylelint-disable plugin/selector-bem-pattern, selector-no-universal */
+    // stylelint-disable plugin/selector-bem-pattern, selector-no-universal, selector-max-universal
     > * {
       opacity: 0;
     }
@@ -96,14 +96,14 @@ $mdc-simple-menu-item-fade-duration: .3s;
         will-change: opacity;
       }
     }
-    /* stylelint-enable plugin/selector-bem-pattern, selector-no-universal */
+    // stylelint-enable plugin/selector-bem-pattern, selector-no-universal, selector-max-universal
   }
 
-  /* stylelint-disable plugin/selector-bem-pattern */
+  // stylelint-disable plugin/selector-bem-pattern
   [dir="rtl"] & {
     transform-origin: top right;
   }
-  /* stylelint-enable plugin/selector-bem-pattern */
+  // stylelint-enable plugin/selector-bem-pattern
 
   // Note: it's appropriate to use `!important` for these since:
   // - they override defaults at several levels of specificity;
@@ -124,25 +124,25 @@ $mdc-simple-menu-item-fade-duration: .3s;
     transform-origin: bottom right !important;
   }
 
-  /* stylelint-disable plugin/selector-bem-pattern */
+  // stylelint-disable plugin/selector-bem-pattern
   .mdc-list-group,
   .mdc-list {
     padding: 8px 0;
   }
 
   .mdc-list-item {
+    @include mdc-typography(subheading2);
+
+    @include mdc-theme-dark(".mdc-simple-menu", true) {
+      color: white;
+    }
+
     position: relative;
     padding: 0 16px;
     outline: none;
     color: inherit;
     text-decoration: none;
     user-select: none;
-
-    @include mdc-typography(subheading2);
-
-    @include mdc-theme-dark(".mdc-simple-menu", true) {
-      color: white;
-    }
   }
 
   .mdc-list-divider {
@@ -159,14 +159,14 @@ $mdc-simple-menu-item-fade-duration: .3s;
     }
   }
 
-  /* 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. */
+  // TODO(sgomes): Revisit when we have interactive lists.
   .mdc-list-item::before {
     position: absolute;
     top: 0;
@@ -176,9 +176,9 @@ $mdc-simple-menu-item-fade-duration: .3s;
     transition: opacity 120ms $mdc-animation-deceleration-curve-timing-function;
     border-radius: inherit;
     background: currentColor;
-    content: "";
     opacity: 0;
     pointer-events: none;
+    content: "";
   }
 
   .mdc-list-item:focus::before {
@@ -186,22 +186,20 @@ $mdc-simple-menu-item-fade-duration: .3s;
   }
 
   .mdc-list-item:active::before {
-    /*
-      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.
-    */
+    // 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;
   }
 
   .mdc-list-item[aria-disabled="true"] {
-    cursor: default;
-
     @include mdc-theme-prop(color, text-disabled-on-light);
 
     @include mdc-theme-dark(".mdc-select") {
       @include mdc-theme-prop(color, text-disabled-on-dark);
     }
+
+    cursor: default;
   }
 
   .mdc-list-item[aria-disabled="true"] {
@@ -210,7 +208,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
       opacity: 0;
     }
   }
-  /* stylelint-enable plugin/selector-bem-pattern */
+  // stylelint-enable plugin/selector-bem-pattern
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end