material_components_web-sass 0.20.0 → 0.21.0

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

@@ -135,12 +135,12 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
   width: var(--mdc-grid-list-tile-width, $mdc-grid-list-tile-width);
 
   &__primary {
-    position: relative;
-    height: 0;
-
     @include mdc-theme-prop(background-color, background);
     @include mdc-theme-prop(color, text-primary-on-background);
 
+    position: relative;
+    height: 0;
+
     &-content {
       position: absolute;
       top: 0;
@@ -156,25 +156,25 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
   }
 
   &__secondary {
+    @include mdc-theme-prop(background-color, primary);
+    @include mdc-theme-prop(color, text-primary-on-primary);
+
     position: absolute;
-    box-sizing: border-box;
     bottom: 0;
+    box-sizing: border-box;
     height: $mdc-grid-list-oneline-cap-secondary-height;
     padding: $mdc-grid-list-tile-secondary-padding;
-
-    @include mdc-theme-prop(background-color, primary);
-    @include mdc-theme-prop(color, text-primary-on-primary);
   }
 
   &__title {
+    @include mdc-typography-overflow-ellipsis;
+
     display: block;
     margin: 0;
     padding: 0;
     font-size: 1rem;
     font-weight: #{map-get($mdc-typography-font-weight-values, medium)};
     line-height: 1rem;
-
-    @include mdc-typography-overflow-ellipsis;
   }
 
   &__support-text {

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

@@ -46,13 +46,11 @@
     @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
   }
 
-  // For some reason, GPU layer promotion makes ripples look terrible on Chrome
-  will-change: initial;
   display: flex;
   position: relative;
-  box-sizing: border-box;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   width: 48px;
   height: 48px;
   padding: 12px;
@@ -60,13 +58,15 @@
   font-size: 1.5rem;
   cursor: pointer;
   user-select: none;
+  // For some reason, GPU layer promotion makes ripples look terrible on Chrome
+  will-change: initial;
 
   &::after {
     position: absolute;
     border-radius: 50%;
-    content: "";
     opacity: 0;
     pointer-events: none;
+    content: "";
   }
 
   @include mdc-theme-dark {

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

@@ -48,23 +48,17 @@
     @media (max-width: $max) {
       @content;
     }
-  }
-
-  @else if $min != null and $max != null {
+  } @else if $min != null and $max != null {
     // Tablet
     @media (min-width: $min) and (max-width: $max) {
       @content;
     }
-  }
-
-  @else if $min != null and $max == null {
+  } @else if $min != null and $max == null {
     // Desktop
     @media (min-width: $min) {
       @content;
     }
-  }
-
-  @else {
+  } @else {
     // Fallback - no breakpoints defined
     @content;
   }
@@ -98,13 +92,12 @@
 
   box-sizing: border-box;
   margin: 0 auto;
+  padding: $margin;
+  padding: var(--mdc-layout-grid-margin-#{$size}, #{$margin});
 
   @if $max-width {
     max-width: $max-width;
   }
-
-  padding: $margin;
-  padding: var(--mdc-layout-grid-margin-#{$size}, #{$margin});
 }
 
 @mixin mdc-layout-grid-inner($size, $margin, $gutter) {
@@ -120,9 +113,9 @@
 
   @supports (display: grid) {
     display: grid;
+    margin: 0;
     grid-gap: $gutter;
     grid-gap: var(--mdc-layout-grid-gutter-#{$size}, $gutter);
-    margin: 0;
     grid-template-columns: repeat(map-get($mdc-layout-grid-columns, $size), minmax(0, 1fr));
   }
 }
@@ -132,6 +125,8 @@
     @error "Invalid style specified! Choose one of #{map-keys($mdc-layout-grid-columns)}";
   }
 
+  @include mdc-layout-grid-cell-span_($size, $default-span, $gutter);
+
   box-sizing: border-box;
   margin: $gutter / 2;
   margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2);
@@ -139,8 +134,6 @@
   @supports (display: grid) {
     margin: 0;
   }
-
-  @include mdc-layout-grid-cell-span_($size, $default-span, $gutter);
 }
 
 @mixin mdc-layout-grid-cell-order($order) {

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

@@ -25,10 +25,10 @@
   overflow: hidden;
 
   &__bar {
-    animation: none;
     position: absolute;
     width: 100%;
     height: 100%;
+    animation: none;
     transform-origin: top left;
     transition: mdc-animation-exit-temporary(transform, 250ms);
   }
@@ -36,11 +36,11 @@
   &__bar-inner {
     @include mdc-theme-prop(background-color, primary);
 
-    animation: none;
     display: inline-block;
     position: absolute;
     width: 100%;
     height: 100%;
+    animation: none;
   }
 
   &--accent .mdc-linear-progress__bar-inner {
@@ -51,12 +51,12 @@
     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;
-    animation: buffering 250ms infinite linear;
   }
 
   &__buffer {
@@ -78,8 +78,8 @@
     }
 
     .mdc-linear-progress__primary-bar {
-      animation: primary-indeterminate-translate 2s infinite linear;
       left: -145.166611%;
+      animation: primary-indeterminate-translate 2s infinite linear;
 
       > .mdc-linear-progress__bar-inner {
         animation: primary-indeterminate-scale 2s infinite linear;
@@ -87,8 +87,8 @@
     }
 
     .mdc-linear-progress__secondary-bar {
-      animation: secondary-indeterminate-translate 2s infinite linear;
       left: -54.888891%;
+      animation: secondary-indeterminate-translate 2s infinite linear;
       visibility: visible;
 
       > .mdc-linear-progress__bar-inner {

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

@@ -39,8 +39,8 @@ $mdc-radio-transition-duration: 120ms;
 
   display: inline-block;
   position: relative;
-  box-sizing: border-box;
   flex: 0 0 auto;
+  box-sizing: border-box;
   width: $mdc-radio-touch-area;
   height: $mdc-radio-touch-area;
   padding: ($mdc-radio-touch-area - $mdc-radio-ui-size) / 2;
@@ -68,9 +68,9 @@ $mdc-radio-transition-duration: 120ms;
     display: inline-block;
     position: absolute;
     left: ($mdc-radio-touch-area - $mdc-radio-ui-size) / 2;
+    box-sizing: border-box;
     width: $mdc-radio-ui-pct;
     height: $mdc-radio-ui-pct;
-    box-sizing: border-box;
 
     &::before {
       @include mdc-theme-prop(background-color, primary);
@@ -83,9 +83,9 @@ $mdc-radio-transition-duration: 120ms;
       transform: scale(0, 0);
       transition: mdc-radio-exit(opacity), mdc-radio-exit(transform);
       border-radius: 50%;
-      content: "";
       opacity: 0;
       pointer-events: none;
+      content: "";
     }
   }
 
@@ -99,13 +99,13 @@ $mdc-radio-transition-duration: 120ms;
     position: absolute;
     top: 0;
     left: 0;
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     transition: mdc-radio-exit(border-color);
     border-width: 2px;
     border-style: solid;
     border-radius: 50%;
-    box-sizing: border-box;
   }
 
   &__inner-circle {
@@ -118,12 +118,12 @@ $mdc-radio-transition-duration: 120ms;
     position: absolute;
     top: 0;
     left: 0;
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     transform: scale(0, 0);
     transition: mdc-radio-exit(transform), mdc-radio-exit(background-color);
     border-radius: 50%;
-    box-sizing: border-box;
   }
 
   &__native-control {
@@ -134,8 +134,8 @@ $mdc-radio-transition-duration: 120ms;
     height: 100%;
     margin: 0;
     padding: 0;
-    cursor: inherit;
     opacity: 0;
+    cursor: inherit;
     z-index: 1;
   }
 }

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

@@ -20,12 +20,12 @@
 
 @keyframes mdc-ripple-fg-radius-in {
   from {
+    animation-timing-function: $mdc-animation-standard-curve-timing-function;
     // NOTE: For these keyframes, we do not need custom property fallbacks because they are only
     // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
     // that custom properties are supported within the browser before adding this class, we can
     // safely use them without a fallback.
     transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
-    animation-timing-function: $mdc-animation-standard-curve-timing-function;
   }
 
   to {
@@ -35,8 +35,8 @@
 
 @keyframes mdc-ripple-fg-opacity-in {
   from {
-    opacity: 0;
     animation-timing-function: linear;
+    opacity: 0;
   }
 
   to {
@@ -46,8 +46,8 @@
 
 @keyframes mdc-ripple-fg-opacity-out {
   from {
-    opacity: 1;
     animation-timing-function: linear;
+    opacity: 1;
   }
 
   to {

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

@@ -235,8 +235,23 @@
   }
 
   &.mdc-ripple-upgraded--foreground-deactivation#{$pseudo} {
+    animation: 83ms mdc-ripple-fg-opacity-out;
     // Retain transform from mdc-ripple-fg-radius-in activation
     transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-    animation: 83ms mdc-ripple-fg-opacity-out;
+  }
+}
+
+// Styles used to detect buggy behavior of CSS custom properties in Edge.
+// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
+// This is included in _mixins.scss rather than mdc-ripple.scss so that it will be
+// present for other components which rely on ripple as well as mdc-ripple itself.
+
+.mdc-ripple-surface--test-edge-var-bug {
+  --mdc-ripple-surface-test-edge-var: 1px solid #000;
+
+  visibility: hidden;
+
+  &::before {
+    border: var(--mdc-ripple-surface-test-edge-var);
   }
 }

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

@@ -54,20 +54,4 @@
   }
 }
 
-// Styles used to detect buggy behavior of CSS custom properties in Edge
-// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
-
-.mdc-ripple-surface--test-edge-var-bug {
-  // stylelint-disable plugin/selector-bem-pattern
-  // bem linter is disabled because it cannot correctly reconcile mdc prefix for css variables.
-  --mdc-ripple-surface-test-edge-var: 1px solid #000;
-  // stylelint-enable plugin/selector-bem-pattern
-
-  visibility: hidden;
-
-  &::before {
-    border: var(--mdc-ripple-surface-test-edge-var);
-  }
-}
-
 // postcss-bem-linter: end

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

@@ -69,9 +69,7 @@
         @content;
       }
     }
-  }
-
-  @else {
+  } @else {
     [dir="rtl"] &,
     &[dir="rtl"] {
       @content;

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

@@ -30,13 +30,7 @@
   @include mdc-typography(subheading2);
   @include mdc-theme-prop(color, text-primary-on-light);
   @include mdc-rtl-reflexive-box(padding, right, $dd-arrow-padding);
-
-  // Resets for <select> element
-  appearance: none;
-
-  &::-ms-expand {
-    display: none;
-  }
+  @include mdc-select-dd-arrow-svg-bg_;
 
   display: inline-flex;
   align-items: center;
@@ -49,15 +43,17 @@
   border: none;
   border-bottom: 1px solid rgba(black, .12);
   border-radius: 0;
-  background: none;
   background-repeat: no-repeat;
   background-position: right center;
-
-  @include mdc-select-dd-arrow-svg-bg_;
-
   font-family: Roboto, sans-serif;
   font-size: .936rem;
   cursor: pointer;
+  // Resets for <select> element
+  appearance: none;
+
+  &::-ms-expand {
+    display: none;
+  }
 
   &:focus {
     @include mdc-theme-prop(border-bottom-color, primary);
@@ -183,32 +179,31 @@
 
 // postcss-bem-linter: define multi-select
 .mdc-multi-select {
-  appearance: none;
+  @include mdc-theme-prop(border-color, text-hint-on-light);
+
   width: 250px;
   padding: 0;
-  border: 1px solid;
-
-  @include mdc-theme-prop(border-color, text-hint-on-light);
+  border-width: 1px;
+  border-style: solid;
+  outline: none;
+  appearance: none;
 
   @include mdc-theme-dark {
     @include mdc-theme-prop(border-color, text-hint-on-dark);
   }
 
-  outline: none;
-
   // stylelint-disable plugin/selector-bem-pattern
   .mdc-list-group {
+    @include mdc-theme-prop(color, text-hint-on-light);
+
     margin: 16px 0 0;
     padding: 0 0 0 16px;
-
-    @include mdc-theme-prop(color, text-hint-on-light);
+    font-weight: normal;
 
     @include mdc-theme-dark {
       @include mdc-theme-prop(color, text-hint-on-dark);
     }
 
-    font-weight: normal;
-
     &:last-child {
       margin-bottom: 16px;
     }
@@ -221,11 +216,11 @@
 
   // stylelint-disable plugin/selector-bem-pattern
   .mdc-list-item {
+    @include mdc-theme-prop(color, text-primary-on-light);
+
     margin: 0 0 0 -16px;
     padding: 0 16px;
 
-    @include mdc-theme-prop(color, text-primary-on-light);
-
     @include mdc-theme-dark {
       @include mdc-theme-prop(color, text-primary-on-dark);
     }
@@ -242,8 +237,6 @@
 
   // stylelint-disable plugin/selector-bem-pattern
   .mdc-list-item:checked {
-    background-color: rgba(black, .12);
-
     @include mdc-theme-prop(background-color, background);
 
     @include mdc-theme-dark {