material_components_web-sass 0.20.0 → 0.21.0

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

@@ -1,12 +1,12 @@
-// 
+//
 // 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.
@@ -26,8 +26,8 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding: 0;
   box-sizing: border-box;
+  padding: 0;
   border-radius: 2px;
   overflow: hidden;
 
@@ -46,12 +46,12 @@
   }
 
   &__supporting-text {
-    padding: 8px 16px;
-    box-sizing: border-box;
-
     @include mdc-typography(body1);
     @include mdc-theme-prop(color, text-primary-on-light);
 
+    box-sizing: border-box;
+    padding: 8px 16px;
+
     @include mdc-theme-dark(".mdc-card") {
       @include mdc-theme-prop(color, text-primary-on-dark);
     }
@@ -70,8 +70,8 @@
 
   &__actions {
     display: flex;
-    padding: 8px;
     box-sizing: border-box;
+    padding: 8px;
 
     // Adjust text color for dark theme.
     @include mdc-theme-dark(".mdc-card") {
@@ -110,8 +110,8 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    padding: 16px;
     box-sizing: border-box;
+    padding: 16px;
   }
 
   &__media-item {
@@ -161,14 +161,13 @@
   }
 
   &__horizontal-block {
+    @include mdc-rtl-reflexive-property(padding, 0, 16px);
+
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
     box-sizing: border-box;
-    padding: 0;
-
-    @include mdc-rtl-reflexive-property(padding, 0, 16px);
 
     // postcss-bem-linter: ignore
     .mdc-card__actions--vertical {

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

@@ -126,9 +126,9 @@
 
 @keyframes mdc-checkbox-indeterminate-checked-checkmark {
   from {
+    animation-timing-function: $_mdc-checkbox-indeterminate-checked-easing-function;
     transform: rotate(45deg);
     opacity: 0;
-    animation-timing-function: $_mdc-checkbox-indeterminate-checked-easing-function;
   }
 
   to {
@@ -152,9 +152,9 @@
 
 @keyframes mdc-checkbox-indeterminate-checked-mixedmark {
   from {
+    animation-timing-function: $_mdc-checkbox-indeterminate-checked-easing-function;
     transform: rotate(0deg);
     opacity: 1;
-    animation-timing-function: $_mdc-checkbox-indeterminate-checked-easing-function;
   }
 
   to {
@@ -165,9 +165,9 @@
 
 @keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {
   0% {
+    animation-timing-function: linear;
     transform: scaleX(1);
     opacity: 1;
-    animation-timing-function: linear;
   }
 
   32.8%,

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

@@ -44,8 +44,8 @@
 
   display: inline-block;
   position: relative;
-  box-sizing: content-box;
   flex: 0 0 $mdc-checkbox-size;
+  box-sizing: content-box;
   width: $mdc-checkbox-size;
   height: $mdc-checkbox-size;
   padding: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
@@ -80,7 +80,6 @@
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    pointer-events: none;
     width: $mdc-checkbox-ui-pct;
     height: $mdc-checkbox-ui-pct;
     transition:
@@ -89,6 +88,7 @@
     border: $mdc-checkbox-border-width solid $mdc-checkbox-border-color;
     border-radius: 2px;
     background-color: transparent;
+    pointer-events: none;
     will-change: background-color, border-color;
 
     @include mdc-theme-dark(".mdc-checkbox") {
@@ -98,18 +98,17 @@
     // The frame's ::before element is used as a focus indicator for the checkbox
     &::before {
       @include mdc-checkbox-cover-element;
+      @include mdc-theme-prop(background, primary);
 
       width: 100%;
       height: 100%;
       transform: scale(0, 0);
       transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform);
       border-radius: 50%;
-      content: "";
       opacity: 0;
       pointer-events: none;
+      content: "";
       will-change: opacity, transform;
-
-      @include mdc-theme-prop(background, primary);
     }
   }
 
@@ -121,8 +120,8 @@
     height: 100%;
     margin: 0;
     padding: 0;
-    cursor: inherit;
     opacity: 0;
+    cursor: inherit;
   }
 
   &__checkmark {
@@ -130,8 +129,8 @@
 
     width: 100%;
     transition: mdc-checkbox-transition-exit(opacity, 0ms, $mdc-checkbox-transition-duration * 2);
-    opacity: 0;
     fill: $mdc-checkbox-mark-color;
+    opacity: 0;
 
     &__path {
       transition:
@@ -171,13 +170,13 @@
 
 .mdc-checkbox__native-control:checked {
   ~ .mdc-checkbox__background {
+    @include mdc-theme-prop(border-color, primary);
+    @include mdc-theme-prop(background-color, primary);
+
     transition:
       mdc-checkbox-transition-enter(border-color),
       mdc-checkbox-transition-enter(background-color);
 
-    @include mdc-theme-prop(border-color, primary);
-    @include mdc-theme-prop(background-color, primary);
-
     .mdc-checkbox__checkmark {
       transition:
         mdc-checkbox-transition-enter(opacity, 0ms, $mdc-checkbox-transition-duration * 2),

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

@@ -42,6 +42,8 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
   z-index: 5;
 
   &__backdrop {
+    @include mdc-theme-prop(background-color, text-primary-on-light);
+
     position: fixed;
     top: 0;
     left: 0;
@@ -49,26 +51,22 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     justify-content: center;
     width: 100%;
     height: 100%;
-
-    @include mdc-theme-prop(background-color, text-primary-on-light);
-
     opacity: 0;
     z-index: -1;
   }
 
   &__surface {
-    display: inline-flex;
-    flex-direction: column;
-
     @include mdc-elevation(24);
+    @include mdc-theme-prop(background-color, background);
 
+    display: inline-flex;
+    flex-direction: column;
     width: calc(100% - 30px);
     min-width: 640px;
     max-width: 865px;
     transform: translateY(150px) scale(.8);
     border-radius: 2px;
-
-    @include mdc-theme-prop(background-color, background);
+    opacity: 0;
 
     @include mdc-theme-dark(".mdc-dialog") {
       @include mdc-theme-prop(color, text-primary-on-dark);
@@ -80,8 +78,6 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     @include mdc-rtl(".mdc-dialog") {
       text-align: right;
     }
-
-    opacity: 0;
   }
 
   &__header {
@@ -98,31 +94,30 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     }
 
     &__title {
+      @include mdc-typography(title);
+
       flex: 1;
       margin: 0;
-
-      @include mdc-typography(title);
     }
   }
 
   &__body {
+    @include mdc-theme-prop(color, text-secondary-on-light);
+    @include mdc-typography(body1);
+
     margin-top: 20px;
     padding: 0 24px 24px;
 
-    @include mdc-theme-prop(color, text-secondary-on-light);
-
     @include mdc-theme-dark(".mdc-dialog", true) {
       @include mdc-theme-prop(color, text-secondary-on-dark);
     }
 
-    @include mdc-typography(body1);
-
     &--scrollable {
       max-height: 195px;
       border-top: 1px solid rgba(0, 0, 0, .1);
       border-bottom: 1px solid rgba(0, 0, 0, .1);
-      overflow-y: scroll;
       overflow-x: auto;
+      overflow-y: scroll;
       -webkit-overflow-scrolling: touch;
     }
   }

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

@@ -26,10 +26,10 @@
     flex-direction: row;
     flex-shrink: 0;
     align-items: flex-center;
+    box-sizing: border-box;
     height: 56px;
     padding: 16px;
     border-bottom: 1px solid rgba(0, 0, 0, .12);
-    box-sizing: border-box;
 
     @include mdc-theme-dark(quote(#{&})) {
       border-bottom: 1px solid rgba(255, 255, 255, .12);
@@ -64,8 +64,8 @@
     bottom: 0;
     left: 0;
     align-items: flex-end;
-    padding: 16px;
     box-sizing: border-box;
+    padding: 16px;
   }
   // stylelint-enable selector-max-type
 }
@@ -78,14 +78,14 @@
   }
 
   .mdc-list-item {
+    @include mdc-typography(body2);
+
     position: relative;
     padding: 0 16px;
     outline: none;
     color: inherit;
     text-decoration: none;
 
-    @include mdc-typography(body2);
-
     // Remove the 16px left offset since we already expand the padding of the list item to take up
     // the width of the drawer.
     &.mdc-ripple-upgraded {
@@ -118,8 +118,8 @@
     transition: mdc-animation-exit-temporary(opacity, 120ms);
     border-radius: inherit;
     background: currentColor;
-    content: "";
     opacity: 0;
+    content: "";
   }
 
   .mdc-list-item:focus::before {

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

@@ -12,11 +12,27 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import "@material/animation/functions";
 @import "@material/animation/variables";
 @import "@material/elevation/mixins";
+@import "@material/elevation/variables";
 @import "@material/ripple/mixins";
+@import "@material/theme/functions";
 @import "@material/theme/mixins";
+@import "./variables";
+
+@mixin mdc-fab-accessible($container-color) {
+  @include mdc-fab-container-color($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);
+
+  @if ($light-or-dark-text == "light") {
+    @include mdc-fab-ink-color(text-primary-on-dark);
+    @include mdc-fab-ripple($mdc-fab-light-ripple-config);
+  } @else {
+    @include mdc-fab-ink-color(text-primary-on-light);
+    @include mdc-fab-ripple(()); //default dark ripple
+  }
+}
 
 @mixin mdc-fab-container-color($color) {
   @include mdc-theme-prop(background-color, $color);
@@ -31,28 +47,33 @@
   @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
 }
 
+$mdc-fab-icon-enter-delay_: 90ms;
+$mdc-fab-icon-enter-duration_: 180ms;
+
 @mixin mdc-fab-base_ {
   @include mdc-ripple-base;
+  @include mdc-elevation(6);
 
   display: inline-flex;
   position: relative;
   justify-content: center;
+  box-sizing: border-box;
   width: 56px;
   height: 56px;
   padding: 0;
-  transition: box-shadow 280ms $mdc-animation-standard-curve-timing-function;
+  transition:
+    box-shadow $mdc-elevation-transition-duration $mdc-elevation-transition-timing-function,
+    opacity 15ms linear 30ms,
+    mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_ + $mdc-fab-icon-enter-delay_);
   border: none;
   border-radius: 50%;
+  fill: currentColor;
   cursor: pointer;
   user-select: none;
-  box-sizing: border-box;
-  fill: currentColor;
   -moz-appearance: none;
   -webkit-appearance: none;
   overflow: hidden;
 
-  @include mdc-elevation(6);
-
   &:active {
     @include mdc-elevation(12);
   }
@@ -96,4 +117,19 @@
   align-items: center;
   justify-content: center;
   width: 100%;
+  transition: mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_, $mdc-fab-icon-enter-delay_);
+  will-change: transform;
+}
+
+@mixin mdc-fab--exited_ {
+  transform: scale(0);
+  transition:
+    opacity 15ms linear 150ms,
+    mdc-animation-exit-permanent(transform, 180ms);
+  opacity: 0;
+
+  .mdc-fab__icon {
+    transform: scale(0);
+    transition: mdc-animation-exit-permanent(transform, 135ms);
+  }
 }

data/vendor/assets/stylesheets/@material/{animation/_mixins.scss → fab/_variables.scss}

@@ -1,4 +1,3 @@
-//
 // Copyright 2017 Google Inc. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -12,22 +11,5 @@
 // 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 "./variables";
-
-@mixin mdc-animation-deceleration-curve {
-  animation-timing-function: $mdc-animation-deceleration-curve-timing-function;
-}
-
-@mixin mdc-animation-standard-curve {
-  animation-timing-function: $mdc-animation-standard-curve-timing-function;
-}
-
-@mixin mdc-animation-acceleration-curve {
-  animation-timing-function: $mdc-animation-acceleration-curve-timing-function;
-}
 
-@mixin mdc-animation-sharp-curve {
-  animation-timing-function: $mdc-animation-sharp-curve-timing-function;
-}
+$mdc-fab-light-ripple-config: (base-color: white, opacity: .16);

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

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import "@material/theme/variables";
 @import "./mixins";
+@import "./variables";
 
 // postcss-bem-linter: define fab
 
@@ -21,19 +21,13 @@
   @include mdc-fab-base_;
   @include mdc-fab-container-color(secondary);
   @include mdc-fab-ink-color(text-primary-on-secondary);
-  @include mdc-fab-ripple((base-color: white, opacity: .16));
+  @include mdc-fab-ripple($mdc-fab-light-ripple-config);
 
   &:not(.mdc-ripple-upgraded) {
     -webkit-tap-highlight-color: rgba(0, 0, 0, .18);
   }
 }
 
-.mdc-fab--plain {
-  @include mdc-fab-container-color(white);
-  @include mdc-fab-ink-color(text-primary-on-light);
-  @include mdc-fab-ripple(()); // default dark ripple
-}
-
 .mdc-fab--mini {
   @include mdc-fab--mini_;
 }
@@ -42,4 +36,8 @@
   @include mdc-fab__icon_;
 }
 
+.mdc-fab--exited {
+  @include mdc-fab--exited_;
+}
+
 // postcss-bem-linter: end