material_components_web-sass 0.24.0 → 0.25.0

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

@@ -22,11 +22,11 @@
 @import "./variables";
 
 @mixin mdc-button-filled-accessible($container-fill-color) {
-  $light-or-dark: mdc-theme-light-or-dark($container-fill-color);
+  $fill-tone: mdc-theme-tone($container-fill-color);
 
   @include mdc-button-container-fill-color($container-fill-color);
 
-  @if ($light-or-dark == "light") {
+  @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);
   } @else {
@@ -60,6 +60,11 @@
 }
 
 @mixin mdc-button-stroke-width($stroke-width) {
+  // Note: Adjust padding to maintain consistent width with non-stroked buttons
+  $padding-value: max($mdc-button-horizontal-padding - $stroke-width, 0);
+
+  padding-right: $padding-value;
+  padding-left: $padding-value;
   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
@@ -70,6 +75,13 @@
     // Minus extra 1 to accommodate odd font size of dense button
     line-height: $mdc-dense-button-height - $stroke-width * 2 - 1;
   }
+
+  &.mdc-button--compact {
+    $padding-compact-value: max($mdc-compact-button-horizontal-padding - $stroke-width, 0);
+
+    padding-right: $padding-compact-value;
+    padding-left: $padding-compact-value;
+  }
 }
 
 @mixin mdc-button-base_() {
@@ -82,13 +94,12 @@
   box-sizing: border-box;
   min-width: 64px;
   height: $mdc-button-height;
-  padding: 0 16px;
+  padding: 0 $mdc-button-horizontal-padding;
   border: none;
   outline: none;
   text-align: center;
   user-select: none;
   -webkit-appearance: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   overflow: hidden;
   vertical-align: middle;
 
@@ -172,7 +183,7 @@
 }
 
 @mixin mdc-button--compact_() {
-  padding: 0 8px;
+  padding: 0 $mdc-compact-button-horizontal-padding;
 }
 
 @mixin mdc-button--dense_() {

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

@@ -15,7 +15,9 @@
 //
 
 $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/dialog/mdc-dialog.scss

@@ -108,7 +108,7 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     margin-top: 20px;
     padding: 0 24px 24px;
 
-    @include mdc-theme-dark(".mdc-dialog", true) {
+    @include mdc-theme-dark(".mdc-dialog") {
       @include mdc-theme-prop(color, text-secondary-on-dark);
     }
 

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

@@ -14,25 +14,44 @@
 // limitations under the License.
 //
 
+@import "@material/theme/variables";
 @import "./variables";
 
 /**
- * Applies the correct css rules to an element to give it the elevation specified by $z-value.
+ * Applies the correct CSS rules to an element to give it the elevation specified by $z-value.
  * The $z-value must be between 0 and 24.
+ * If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
+ * $opacity-boost.
  */
-@mixin mdc-elevation($z-value) {
+@mixin mdc-elevation($z-value, $color: $mdc-elevation-baseline-color, $opacity-boost: 0) {
   @if type-of($z-value) != number or not unitless($z-value) {
-    @error "$z-value must be a unitless number";
+    @error "$z-value must be a unitless number, but received '#{$z-value}'";
   }
 
   @if $z-value < 0 or $z-value > 24 {
-    @error "$z-value must be between 0 and 24";
+    @error "$z-value must be between 0 and 24, but received '#{$z-value}'";
   }
 
-  #{$mdc-elevation-property}:
-    #{"#{map-get($mdc-elevation-umbra-map, $z-value)} #{$mdc-elevation-umbra-color}"},
-    #{"#{map-get($mdc-elevation-penumbra-map, $z-value)} #{$mdc-elevation-penumbra-color}"},
-    #{map-get($mdc-elevation-ambient-map, $z-value)} $mdc-elevation-ambient-color;
+  @if map-has-key($mdc-theme-property-values, $color) {
+    $color: map-get($mdc-theme-property-values, $color);
+  }
+
+  @if type-of($color) != color {
+    @error "$color must be a valid color, but '#{$color}' is of type #{type-of($color)}";
+  }
+
+  $umbra-z-value: map-get($mdc-elevation-umbra-map, $z-value);
+  $penumbra-z-value: map-get($mdc-elevation-penumbra-map, $z-value);
+  $ambient-z-value: map-get($mdc-elevation-ambient-map, $z-value);
+
+  $umbra-color: rgba($color, $mdc-elevation-umbra-opacity + $opacity-boost);
+  $penumbra-color: rgba($color, $mdc-elevation-penumbra-opacity + $opacity-boost);
+  $ambient-color: rgba($color, $mdc-elevation-ambient-opacity + $opacity-boost);
+
+  box-shadow:
+    #{"#{$umbra-z-value} #{$umbra-color}"},
+    #{"#{$penumbra-z-value} #{$penumbra-color}"},
+    #{$ambient-z-value} $ambient-color;
 }
 
 /**

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

@@ -16,9 +16,10 @@
 
 @import "@material/animation/variables";
 
-$mdc-elevation-umbra-color: rgba(black, .2);
-$mdc-elevation-penumbra-color: rgba(black, .14);
-$mdc-elevation-ambient-color: rgba(black, .12);
+$mdc-elevation-baseline-color: black;
+$mdc-elevation-umbra-opacity: .2;
+$mdc-elevation-penumbra-opacity: .14;
+$mdc-elevation-ambient-opacity: .12;
 
 $mdc-elevation-umbra-map: (
   0: "0px 0px 0px 0px",

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

@@ -21,12 +21,11 @@
 @import "@material/theme/mixins";
 
 @mixin mdc-fab-accessible($container-color) {
-  @include mdc-fab-container-color($container-color);
+  $fill-tone: mdc-theme-tone($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);
+  @include mdc-fab-container-color($container-color);
 
-  @if ($light-or-dark-text == "light") {
+  @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);
   } @else {

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

@@ -0,0 +1,52 @@
+// 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/theme/mixins";
+@import "@material/theme/variables"; // for mdc-theme-prop-value
+
+@mixin mdc-linear-progress-bar-color($color) {
+  .mdc-linear-progress__bar-inner {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-linear-progress-buffer-color($color) {
+  // We need to escape the '#' character as "%23" for SVG because '#' is a reserved character in URIs.
+  $color-value-for-css: mdc-theme-prop-value($color);
+  $color-value-for-svg: mdc-linear-progress-str-replace_(#{$color-value-for-css}, "#", "%23");
+
+  .mdc-linear-progress__buffering-dots {
+    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
+    // stylelint-disable-next-line function-url-quotes
+    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='#{$color-value-for-svg}'/%3E%3C/svg%3E");
+  }
+
+  .mdc-linear-progress__buffer {
+    background-color: $color-value-for-css;
+  }
+}
+
+// Based on https://css-tricks.com/snippets/sass/str-replace-function/
+@function mdc-linear-progress-str-replace_($string, $search, $replace) {
+  $index: str-index($string, $search);
+
+  @if $index {
+    $head: str-slice($string, 1, $index - 1);
+    $tail: mdc-linear-progress-str-replace_(str-slice($string, $index + str-length($search)), $search, $replace);
+
+    @return $head + $replace + $tail;
+  }
+
+  @return $string;
+}

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

@@ -0,0 +1,15 @@
+// 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-linear-progress-baseline-buffer-color: #e6e6e6;

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

@@ -13,10 +13,14 @@
 // limitations under the License.
 
 @import "@material/animation/functions";
-@import "@material/theme/mixins";
 @import "./keyframes";
+@import "./mixins";
+@import "./variables";
 
 .mdc-linear-progress {
+  @include mdc-linear-progress-bar-color(primary);
+  @include mdc-linear-progress-buffer-color($mdc-linear-progress-baseline-buffer-color);
+
   position: relative;
   width: 100%;
   height: 4px;
@@ -34,8 +38,6 @@
   }
 
   &__bar-inner {
-    @include mdc-theme-prop(background-color, primary);
-
     display: inline-block;
     position: absolute;
     width: 100%;
@@ -43,18 +45,11 @@
     animation: none;
   }
 
-  &--accent .mdc-linear-progress__bar-inner {
-    @include mdc-theme-prop(background-color, secondary);
-  }
-
   &__buffering-dots {
     position: absolute;
     width: 100%;
     height: 100%;
     animation: buffering 250ms infinite linear;
-    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
-    // stylelint-disable-next-line function-url-quotes
-    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E");
     background-repeat: repeat-x;
     background-size: 10px 4px;
   }
@@ -65,7 +60,6 @@
     height: 100%;
     transform-origin: top left;
     transition: mdc-animation-exit-temporary(transform, 250ms);
-    background-color: #e6e6e6;
   }
 
   &__secondary-bar {

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

@@ -61,6 +61,7 @@ $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;
   }
 

data/vendor/assets/stylesheets/@material/slider/_keyframes.scss

@@ -0,0 +1,30 @@
+//
+// 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.
+//
+
+@keyframes mdc-slider-emphasize {
+  0% {
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    animation-timing-function: ease-in;
+    transform: scale(.85);
+  }
+
+  100% {
+    transform: scale(.571);
+  }
+}

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

@@ -0,0 +1,129 @@
+//
+// 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/theme/functions";
+@import "@material/theme/mixins";
+@import "@material/theme/variables"; // for mdc-theme-prop-value
+@import "./variables";
+
+//
+// Public
+//
+
+@mixin mdc-slider-highlight-color($color) {
+  &:not(.mdc-slider--disabled) {
+    @include mdc-slider-highlight-color_($color);
+  }
+}
+
+@mixin mdc-slider-rail-color($color, $opacity: $mdc-slider-baseline-rail-opacity) {
+  &:not(.mdc-slider--disabled) {
+    @include mdc-slider-rail-color_($color, $opacity);
+  }
+}
+
+@mixin mdc-slider-rail-tick-mark-color($color) {
+  &:not(.mdc-slider--disabled) {
+    @include mdc-slider-rail-tick-mark-color_($color);
+  }
+}
+
+@mixin mdc-slider-thumb-color($color) {
+  &:not(.mdc-slider--disabled) {
+    @include mdc-slider-thumb-color_($color);
+  }
+}
+
+@mixin mdc-slider-focus-halo-color($color) {
+  &:not(.mdc-slider--disabled) {
+    .mdc-slider__focus-ring {
+      @include mdc-theme-prop(background-color, $color);
+    }
+  }
+}
+
+@mixin mdc-slider-value-pin-ink-color($color) {
+  &:not(.mdc-slider--disabled) {
+    .mdc-slider__pin {
+      @include mdc-theme-prop(color, $color);
+    }
+  }
+}
+
+@mixin mdc-slider-value-pin-fill-color($color) {
+  &:not(.mdc-slider--disabled) {
+    .mdc-slider__pin {
+      @include mdc-theme-prop(background-color, $color);
+    }
+  }
+}
+
+@mixin mdc-slider-value-pin-fill-color-accessible($color) {
+  $color-value: mdc-theme-prop-value($color);
+  $ink-color: if(mdc-theme-tone($color-value) == "light", text-primary-on-light, text-primary-on-dark);
+
+  @include mdc-slider-value-pin-fill-color($color);
+  @include mdc-slider-value-pin-ink-color($ink-color);
+}
+
+// NOTE: This mixin sets the color of ALL customizable elements in the slider. If new elements are added, this mixin
+// should be updated to cover those additional elements.
+@mixin mdc-slider-color-accessible($color) {
+  @include mdc-slider-highlight-color($color);
+  @include mdc-slider-rail-color($color);
+  @include mdc-slider-rail-tick-mark-color($color);
+  @include mdc-slider-thumb-color($color);
+  @include mdc-slider-focus-halo-color($color);
+  @include mdc-slider-value-pin-fill-color-accessible($color);
+}
+
+//
+// Private
+//
+
+@mixin mdc-slider-highlight-color_($color) {
+  .mdc-slider__track {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-slider-rail-color_($color, $opacity: $mdc-slider-baseline-rail-opacity) {
+  .mdc-slider__track-container {
+    @include mdc-theme-prop(background-color, rgba(mdc-theme-prop-value($color), $opacity));
+  }
+}
+
+@mixin mdc-slider-rail-tick-mark-color_($color) {
+  .mdc-slider__track-marker::after,
+  .mdc-slider__track-marker-container::after {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-slider-thumb-color_($color) {
+  .mdc-slider__thumb {
+    @include mdc-theme-prop(fill, $color);
+    @include mdc-theme-prop(stroke, $color);
+  }
+}
+
+@mixin mdc-slider-thumb-stroke-cutout_($color) {
+  .mdc-slider__thumb {
+    /* @alternate */
+    stroke: $color;
+    stroke: var(--mdc-slider-bg-color-behind-component, $color);
+  }
+}