material_components_web-sass 0.20.0 → 0.21.0

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

@@ -130,8 +130,8 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
     // Ensure that touching anywhere within the Y-coordinate space of thumb
     // is considered "clicking on the thumb".
     height: 100%;
-    will-change: transform;
     user-select: none;
+    will-change: transform;
   }
 
   &__thumb {

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

@@ -33,14 +33,13 @@
   transform: translate(-50%, 100%);
   transition: mdc-animation-exit-permanent(transform, .25s);
   background-color: $mdc-snackbar-background-color;
+  pointer-events: none;
+  will-change: transform;
 
   @include mdc-theme-dark(".mdc-snackbar") {
     background-color: $mdc-snackbar-background-color-on-dark;
   }
 
-  will-change: transform;
-  pointer-events: none;
-
   @media (max-width: ($mdc-snackbar-tablet-breakpoint - 1)) {
     left: 0;
     width: calc(100% - 48px);
@@ -55,10 +54,9 @@
 
   &--align-start {
     @media (min-width: $mdc-snackbar-tablet-breakpoint) {
-      bottom: 24px;
-
       @include mdc-rtl-reflexive-position(left, 24px);
 
+      bottom: 24px;
       transform: translate(0, 200%);
     }
 
@@ -72,8 +70,8 @@
 
   &--active {
     transform: translate(0);
-    pointer-events: auto;
     transition: mdc-animation-enter(transform, .25s);
+    pointer-events: auto;
 
     &:not(.mdc-snackbar--align-start) {
       transform: translate(-50%, 0);
@@ -96,12 +94,12 @@
   }
 
   &--action-on-bottom &__action-wrapper {
+    @include mdc-rtl-reflexive-box(margin, left, auto);
+
     flex-direction: column;
     justify-content: flex-start;
     margin-top: -12px;
     margin-bottom: 8px;
-
-    @include mdc-rtl-reflexive-box(margin, left, auto);
   }
 
   &__text {
@@ -112,13 +110,12 @@
     align-items: center;
     height: 48px;
     transition: mdc-animation-exit-permanent(opacity, .3s);
+    opacity: 0;
     color: $mdc-snackbar-foreground-color;
 
     @include mdc-theme-dark(".mdc-snackbar") {
       @include mdc-theme-prop(color, text-primary-on-light);
     }
-
-    opacity: 0;
   }
 
   &--multiline &__text {
@@ -132,20 +129,27 @@
   /* stylelint-enable plugin/selector-bem-pattern */
 
   &__action-button {
+    @include mdc-typography(button);
     @include mdc-theme-prop(color, secondary);
 
     @include mdc-theme-dark(".mdc-snackbar") {
       @include mdc-theme-prop(color, primary);
     }
 
-    @include mdc-rtl-reflexive-box(margin, right, -16px, ".mdc-snackbar");
-
-    min-width: auto;
-    height: inherit;
+    padding: 0;
     transition: mdc-animation-exit-permanent(opacity, .3s);
+    border: none;
+    outline: none;
+    background-color: transparent;
     opacity: 0;
+    user-select: none;
+    -webkit-appearance: none;
     visibility: hidden;
 
+    &:hover {
+      cursor: pointer;
+    }
+
     &::-moz-focus-inner {
       border: 0;
     }

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

@@ -33,8 +33,8 @@
     left: 0;
     width: $mdc-switch-track-width;
     height: $mdc-switch-track-height;
-    cursor: pointer;
     opacity: 0;
+    cursor: pointer;
     z-index: 2;
   }
 
@@ -65,8 +65,8 @@
         mdc-switch-transition(background-color);
       border-radius: 7px;
       background-color: $mdc-switch-unchecked-track-color;
-      content: "";
       opacity: .38;
+      content: "";
 
       @include mdc-theme-dark(".mdc-switch") {
         background-color: $mdc-switch-unchecked-track-color-dark;
@@ -76,6 +76,8 @@
 
     // postcss-bem-linter: ignore
     .mdc-switch__knob {
+      @include mdc-elevation(2);
+
       display: block;
       position: absolute;
       top: -3px;
@@ -88,15 +90,12 @@
         mdc-switch-transition(background-color);
       border-radius: $mdc-switch-knob-diameter / 2;
       background-color: $mdc-switch-unchecked-knob-color;
+      z-index: 1;
 
       @include mdc-theme-dark(".mdc-switch") {
         background-color: $mdc-switch-unchecked-knob-color-dark;
       }
 
-      @include mdc-elevation(2);
-
-      z-index: 1;
-
       // postcss-bem-linter: ignore
       &::before {
         position: absolute;
@@ -110,8 +109,8 @@
           mdc-switch-transition(background-color);
         border-radius: $mdc-switch-focus-ring-diameter / 2;
         background-color: transparent;
-        content: "";
         opacity: .2;
+        content: "";
       }
     }
   }
@@ -146,13 +145,13 @@
   }
 
   .mdc-switch__knob {
+    @include mdc-theme-prop(background-color, primary);
+
     transform: translateX($mdc-switch-track-width - $mdc-switch-knob-diameter);
     transition:
       mdc-switch-transition(transform),
       mdc-switch-transition(background-color);
 
-    @include mdc-theme-prop(background-color, primary);
-
     &::before {
       @include mdc-theme-prop(background-color, primary);
 

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

@@ -148,9 +148,9 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     height: 100%;
     border-radius: 50%;
     background-color: inherit;
-    content: "";
     opacity: 0;
     pointer-events: none;
+    content: "";
   }
 
   // NOTE: For some reasons, stylelint complains that the two patterns below don't follow BEM.
@@ -176,8 +176,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 
   .mdc-textfield__input {
     align-self: flex-end;
-    height: 100%;
     box-sizing: border-box;
+    height: 100%;
     padding: 20px 16px 0;
   }
 
@@ -266,8 +266,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
       height: 100%;
       transition: mdc-textfield-transition(opacity);
       background-color: $mdc-textfield-error-on-light;
-      content: "";
       opacity: 0;
+      content: "";
     }
 
     @include mdc-theme-dark(".mdc-textfield") {
@@ -316,8 +316,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 .mdc-textfield--upgraded:not(.mdc-textfield--fullwidth):not(.mdc-textfield--box) {
   display: inline-flex;
   position: relative;
-  box-sizing: border-box;
   align-items: flex-end;
+  box-sizing: border-box;
   margin-top: 16px;
 
   &:not(.mdc-textfield--multiline) {
@@ -413,6 +413,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 }
 
 .mdc-textfield--disabled {
+  border-bottom: 1px dotted $mdc-textfield-disabled-border-on-light;
   pointer-events: none;
 
   &::after {
@@ -424,8 +425,6 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     padding-bottom: 7px;
   }
 
-  border-bottom: 1px dotted $mdc-textfield-disabled-border-on-light;
-
   @include mdc-theme-dark(".mdc-textfield", true) {
     border-bottom: 1px dotted $mdc-textfield-disabled-border-on-dark;
   }
@@ -546,8 +545,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 
 .mdc-textfield--fullwidth {
   display: block;
-  width: 100%;
   box-sizing: border-box;
+  width: 100%;
   margin: 0;
   border: none;
   border-bottom: 1px solid $mdc-textfield-divider-on-light;
@@ -669,8 +668,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 
   margin: 0;
   transition: mdc-textfield-transition(opacity);
-  font-size: .75rem;
   opacity: 0;
+  font-size: .75rem;
   will-change: opacity;
 
   @include mdc-theme-dark {
@@ -708,8 +707,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 
 .mdc-textfield--invalid {
   + .mdc-textfield-helptext--validation-msg {
-    color: $mdc-textfield-error-on-light;
     opacity: 1;
+    color: $mdc-textfield-error-on-light;
   }
 
   @include mdc-theme-dark(".mdc-textfield", true) {

data/vendor/assets/stylesheets/@material/theme/_functions.scss

@@ -50,9 +50,7 @@ $_mdc-theme-tonal-offset: 7%;
 
   @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
     @return "dark";
-  }
-
-  @else {
+  } @else {
     @return "light";
   }
 }
@@ -76,16 +74,12 @@ $_mdc-theme-tonal-offset: 7%;
       dark: lighten($color, $amount-1x),
       light: lighten($color, $amount-2x)
     );
-  }
-
-  @else if $luminance >= $upper-bound {
+  } @else if $luminance >= $upper-bound {
     @return (
       dark: darken($color, $amount-2x),
       light: darken($color, $amount-1x)
     );
-  }
-
-  @else {
+  } @else {
     @return (
       dark: darken($color, $amount-1x),
       light: lighten($color, $amount-1x)

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

@@ -23,14 +23,10 @@
   @if type-of($style) == "color" {
     @if $important {
       #{$property}: $style !important;
-    }
-
-    @else {
+    } @else {
       #{$property}: $style;
     }
-  }
-
-  @else {
+  } @else {
     @if not map-has-key($mdc-theme-property-values, $style) {
       @error "Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
     }
@@ -41,9 +37,7 @@
       /* @alternate */
       #{$property}: $value !important;
       #{$property}: var(--mdc-theme-#{$style}, $value) !important;
-    }
-
-    @else {
+    } @else {
       /* @alternate */
       #{$property}: $value;
       #{$property}: var(--mdc-theme-#{$style}, $value);
@@ -91,18 +85,14 @@
         .mdc-theme--dark & {
           @content;
         }
-      }
-
-      @else {
+      } @else {
         #{$root-selector}--theme-dark &,
         .mdc-theme--dark & {
           @content;
         }
       }
     }
-  }
-
-  @else {
+  } @else {
     &--theme-dark,
     .mdc-theme--dark & {
       @content;

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

@@ -25,6 +25,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  // stylelint enable
+
+  border: none;
+  background-color: inherit;
+  color: inherit;
+  text-decoration: none;
 
   // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if $padding-type == menu {
@@ -32,10 +38,4 @@
   } @else {
     padding: $mdc-toobar-element-vertical-padding 8px;
   }
-  // stylelint enable
-
-  border: none;
-  background-color: inherit;
-  color: inherit;
-  text-decoration: none;
 }

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

@@ -23,24 +23,24 @@
 
 // postcss-bem-linter: define toolbar
 .mdc-toolbar {
+  @include mdc-theme-prop(background-color, primary);
+  @include mdc-theme-prop(color, text-primary-on-primary);
+
   display: flex;
   position: relative;
   flex-direction: column;
   justify-content: space-between;
-  width: 100%;
   box-sizing: border-box;
-
-  @include mdc-theme-prop(background-color, primary);
-  @include mdc-theme-prop(color, text-primary-on-primary);
+  width: 100%;
 
   &__row {
     display: flex;
     position: relative;
     align-items: center;
+    box-sizing: border-box;
     width: 100%;
     height: auto;
     min-height: $mdc-toolbar-row-height;
-    box-sizing: border-box;
 
     // TODO: refactor this out when #23 is implemented
     @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint)
@@ -125,12 +125,12 @@
 }
 
 .mdc-toolbar--fixed {
+  @include mdc-elevation(4);
+
   position: fixed;
   top: 0;
   left: 0;
   z-index: 4;
-
-  @include mdc-elevation(4);
 }
 
 .mdc-toolbar--flexible {

data/vendor/assets/stylesheets/_material-components-web.scss

@@ -14,7 +14,6 @@
 // limitations under the License.
 //
 
-@import "@material/animation/mdc-animation";
 @import "@material/button/mdc-button";
 @import "@material/card/mdc-card";
 @import "@material/checkbox/mdc-checkbox";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.20.0
+  version: 0.21.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-09-06 00:00:00.000000000 Z
+date: 2017-09-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -125,10 +125,9 @@ files:
 - vendor/assets/fonts/roboto/Roboto-Thin.woff2
 - vendor/assets/javascripts/material-components-web.js
 - vendor/assets/stylesheets/@material/animation/_functions.scss
-- vendor/assets/stylesheets/@material/animation/_mixins.scss
 - vendor/assets/stylesheets/@material/animation/_variables.scss
-- vendor/assets/stylesheets/@material/animation/mdc-animation.scss
 - vendor/assets/stylesheets/@material/button/_mixins.scss
+- vendor/assets/stylesheets/@material/button/_variables.scss
 - vendor/assets/stylesheets/@material/button/mdc-button.scss
 - vendor/assets/stylesheets/@material/card/mdc-card.scss
 - vendor/assets/stylesheets/@material/checkbox/_keyframes.scss
@@ -146,6 +145,7 @@ files:
 - vendor/assets/stylesheets/@material/elevation/_variables.scss
 - vendor/assets/stylesheets/@material/elevation/mdc-elevation.scss
 - vendor/assets/stylesheets/@material/fab/_mixins.scss
+- vendor/assets/stylesheets/@material/fab/_variables.scss
 - vendor/assets/stylesheets/@material/fab/mdc-fab.scss
 - vendor/assets/stylesheets/@material/fonts/material-icons.scss
 - vendor/assets/stylesheets/@material/fonts/roboto.scss