material_components_web-sass 0.7.0 → 0.8.0

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

@@ -50,7 +50,10 @@
   user-select: none;
   box-sizing: border-box;
   -webkit-appearance: none;
-  -webkit-tap-highlight-color: rgba(black, .18);
+
+  &:not(.mdc-ripple-upgraded) {
+    -webkit-tap-highlight-color: rgba(black, .18);
+  }
 
   @include mdc-theme-dark {
     @include mdc-ripple-base;
@@ -58,7 +61,9 @@
     @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
     @include mdc-theme-prop(color, text-primary-on-dark);
 
-    -webkit-tap-highlight-color: rgba(white, .18);
+    &:not(.mdc-ripple-upgraded) {
+      -webkit-tap-highlight-color: rgba(white, .18);
+    }
   }
 
   @each $theme-style in (primary, accent) {
@@ -189,4 +194,3 @@
 }
 
 // postcss-bem-linter: end
-

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

@@ -37,8 +37,6 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
 
   &__surface {
     display: inline-flex;
-    position: absolute;
-    bottom: 50vh;
     flex-direction: column;
 
     @include mdc-elevation(24);
@@ -48,6 +46,7 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     max-width: 865px;
     transform: translateY(150px) scale(.8);
     transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms);
+    border-radius: 2px;
 
     @include mdc-theme-prop(background-color, background);
 

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

@@ -39,9 +39,12 @@
   fill: currentColor;
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, .18);
   overflow: hidden;
 
+  &:not(.mdc-ripple-upgraded) {
+    -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-elevation(6);
@@ -59,33 +62,6 @@
     @include mdc-ripple-fg((pseudo: "::after"));
   }
 
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transition: mdc-animation-exit(opacity, 120ms);
-    border-radius: inherit;
-    background: rgba(0, 0, 0, .2);
-    content: "";
-    opacity: 0;
-  }
-
-  &:focus::before {
-    transition: mdc-animation-enter(opacity, 120ms);
-    opacity: .12;
-  }
-
-  &:active::before {
-    transition: mdc-animation-enter(opacity, 120ms);
-    opacity: .18;
-  }
-
-  &:active:focus::before {
-    transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
-  }
-
   &:active,
   &:focus {
     outline: none;

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

@@ -20,46 +20,37 @@
 
 @keyframes mdc-ripple-fg-radius-in {
   from {
-    transform: translate(0) scale(1);
+    // 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-fast-out-slow-in-timing-function;
   }
 
   to {
-    transform: translate(0) scale(0);
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 0));
+    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
   }
 }
 
-@keyframes mdc-ripple-fg-opacity-out {
+@keyframes mdc-ripple-fg-opacity-in {
   from {
-    opacity: 1;
+    opacity: 0;
     animation-timing-function: linear;
   }
 
   to {
-    opacity: 0;
+    opacity: 1;
   }
 }
 
-@keyframes mdc-ripple-fg-unbounded-opacity-deactivate {
+@keyframes mdc-ripple-fg-opacity-out {
   from {
     opacity: 1;
+    animation-timing-function: linear;
   }
 
   to {
     opacity: 0;
   }
 }
-
-@keyframes mdc-ripple-fg-unbounded-transform-deactivate {
-  from {
-    transform: 0;
-    transform: var(--mdc-ripple-fg-approx-xf, 0);
-  }
-
-  to {
-    transform: scale(0);
-    transform: scale(var(--mdc-ripple-fg-scale, 0));
-  }
-}

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

@@ -8,7 +8,8 @@
 //      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.
+// 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.
 //
@@ -28,17 +29,14 @@
 }
 
 @mixin mdc-ripple-base() {
+  --mdc-ripple-surface-width: 0;
+  --mdc-ripple-surface-height: 0;
+  --mdc-ripple-fg-size: 0;
   --mdc-ripple-left: 0;
   --mdc-ripple-top: 0;
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-surface-height: 0;
-  --mdc-ripple-surface-width: 0;
-  --mdc-ripple-fg-unbounded-transform-duration: 0ms;
-  --mdc-ripple-xfo-x: center;
-  --mdc-ripple-xfo-y: center;
-  --mdc-ripple-fg-unbounded-opacity-duration: 0ms;
-  --mdc-ripple-fg-unbounded-transform-duration: 0ms;
-  --mdc-ripple-fg-approx-xf: 0;
+  --mdc-ripple-fg-scale: 1;
+  --mdc-ripple-fg-translate-end: 0;
+  --mdc-ripple-fg-translate-start: 0;
 
   will-change: transform, opacity;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -121,18 +119,11 @@
     transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
 
-  &.mdc-ripple-upgraded--background-active#{$pseudo} {
+  &.mdc-ripple-upgraded--background-focused#{$pseudo} {
     opacity: .99999;
   }
 
-  // When an element goes active, a foreground ripple will be triggered.
-  // Therefore, we adjust the transition duration for the correct "wind-
-  // up" animation.
-  &.mdc-ripple-upgraded--background-active:active#{$pseudo} {
-    transition-duration: 600ms;
-  }
-
-  &.mdc-ripple-upgraded--background-bounded-active-fill#{$pseudo} {
+  &.mdc-ripple-upgraded--background-active-fill#{$pseudo} {
     transition-duration: 120ms;
     opacity: 1;
   }
@@ -215,29 +206,13 @@
     transform-origin: center center;
   }
 
-  &.mdc-ripple-upgraded--foreground-bounded-active-fill#{$pseudo} {
-    animation-fill-mode: forwards;
-    animation: 300ms mdc-ripple-fg-radius-in, 400ms mdc-ripple-fg-opacity-out;
-  }
-
-  &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-activation#{$pseudo} {
-    transform: scale(0);
-    transform: scale(var(--mdc-ripple-fg-scale, 0));
-    transition:
-      opacity 110ms linear,
-      transform 0 linear 80ms;
-    transition:
-      opacity 110ms linear,
-      transform var(--mdc-ripple-fg-unbounded-transform-duration, 0) linear 80ms;
-    opacity: 1;
+  &.mdc-ripple-upgraded--foreground-activation#{$pseudo} {
+    animation: 300ms mdc-ripple-fg-radius-in forwards, 83ms mdc-ripple-fg-opacity-in forwards;
   }
 
-  &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-deactivation#{$pseudo} {
-    animation:
-      mdc-ripple-fg-unbounded-opacity-deactivate 0 linear,
-      mdc-ripple-fg-unbounded-transform-deactivate 0 $mdc-animation-fast-out-slow-in-timing-function;
-    animation:
-      mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration, 0) linear,
-      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration, 0) $mdc-animation-fast-out-slow-in-timing-function;
+  &.mdc-ripple-upgraded--foreground-deactivation#{$pseudo} {
+    // 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: 250ms mdc-ripple-fg-opacity-out;
   }
 }

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

@@ -90,6 +90,7 @@
     max-height: 100%;
     transform-origin: center center;
     overflow-y: scroll;
+    z-index: 4; // Should pop up above everything else. temporary-drawer is next highest at 3.
   }
 
   &__selected-text {

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

@@ -19,9 +19,9 @@
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
 
-$mdc-toolbar-height: 64px;
-$mdc-toolbar-mobile-height: 56px;
-$mdc-toolbar-padding: 24px 16px;
+$mdc-toolbar-row-height: 64px;
+$mdc-toolbar-mobile-row-height: 56px;
+$mdc-toolbar-padding: 20px 28px;
 $mdc-toolbar-mobile-padding: 16px;
 
 $mdc-toolbar-mobile-breakpoint: 599px;
@@ -30,27 +30,35 @@ $mdc-toolbar-mobile-breakpoint: 599px;
 .mdc-toolbar {
   display: flex;
   position: relative;
-  align-items: center;
+  flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  height: $mdc-toolbar-height;
-  padding: $mdc-toolbar-padding;
   box-sizing: border-box;
 
   @include mdc-theme-prop(background-color, primary);
   @include mdc-theme-prop(color, text-primary-on-primary);
 
-  // TODO: refactor this out when #23 is implemented
-  @media (max-width: $mdc-toolbar-mobile-breakpoint) {
-    height: $mdc-toolbar-mobile-height;
-    padding: $mdc-toolbar-mobile-padding;
+  &__row {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: $mdc-toolbar-row-height;
+    padding: $mdc-toolbar-padding;
+    box-sizing: border-box;
+
+    // TODO: refactor this out when #23 is implemented
+    @media (max-width: $mdc-toolbar-mobile-breakpoint) {
+      height: $mdc-toolbar-mobile-row-height;
+      padding: $mdc-toolbar-mobile-padding;
+    }
   }
 
   &__section {
     display: inline-flex;
     flex: 1;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
+    z-index: 1;
 
     &--align-start {
       justify-content: flex-start;
@@ -61,12 +69,13 @@ $mdc-toolbar-mobile-breakpoint: 599px;
       justify-content: flex-end;
       order: 1;
     }
+  }
 
-    .mdc-toolbar__title {
-      @include mdc-typography(title);
+  &__title {
+    @include mdc-typography(title);
 
-      margin: 0;
-    }
+    margin: 0;
+    line-height: 1.5rem;
   }
 }
 
@@ -82,9 +91,9 @@ $mdc-toolbar-mobile-breakpoint: 599px;
 // postcss-bem-linter: end
 
 .mdc-toolbar-fixed-adjust {
-  margin-top: $mdc-toolbar-height;
+  margin-top: $mdc-toolbar-row-height;
 
   @media (max-width: 599px) {
-    margin-top: $mdc-toolbar-mobile-height;
+    margin-top: $mdc-toolbar-mobile-row-height;
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.8.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-03-21 00:00:00.000000000 Z
+date: 2017-04-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails