material_components_web-sass 0.11.1 → 0.12.0

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

@@ -28,6 +28,8 @@
   justify-content: flex-end;
   padding: 0;
   box-sizing: border-box;
+  border-radius: 2px;
+  overflow: hidden;
 
   &__primary {
     padding: 16px;

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

@@ -32,10 +32,29 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
 .mdc-dialog {
   display: flex;
   position: fixed;
+  top: 0;
+  left: 0;
   align-items: center;
   justify-content: center;
-  opacity: 0;
-  z-index: -1;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  z-index: 2;
+
+  &__backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    align-items: center;
+    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;
@@ -47,7 +66,6 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     min-width: 640px;
     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);
@@ -66,22 +84,6 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     opacity: 0;
   }
 
-  &__backdrop {
-    display: flex;
-    position: fixed;
-    top: 0;
-    left: 0;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-
-    @include mdc-theme-prop(background-color, text-primary-on-light);
-
-    opacity: 0;
-    z-index: -1;
-  }
-
   &__header {
     display: flex;
     align-items: center;
@@ -131,6 +133,14 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     align-items: center;
     justify-content: flex-end;
     padding: 8px;
+
+    &__button {
+      margin-right: 8px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
   }
 
   // TODO: Replace with breakpoint variable
@@ -145,28 +155,34 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
       line-height: 24px;
     }
   }
-}
 
-.mdc-dialog--open {
-  display: flex;
-  top: 0;
-  left: 0;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  z-index: 2;
+  &--animating {
+    visibility: visible;
+
+    .mdc-dialog__backdrop {
+      transition: mdc-animation-enter(opacity, 120ms);
+    }
 
-  .mdc-dialog__surface {
-    transform: translateY(0) scale(1);
-    transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms);
-    opacity: 1;
+    .mdc-dialog--open .mdc-dialog__surface {
+      transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms);
+    }
+
+    .mdc-dialog__surface {
+      transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms);
+    }
   }
 
-  .mdc-dialog__backdrop {
-    transition: mdc-animation-enter(opacity, 120ms);
-    opacity: .3;
+  &--open {
+    visibility: visible;
+
+    .mdc-dialog__backdrop {
+      opacity: .3;
+    }
+
+    .mdc-dialog__surface {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+    }
   }
 }
 

data/vendor/assets/stylesheets/@material/drawer/permanent/mdc-permanent-drawer.scss

@@ -41,8 +41,8 @@ $mdc-permanent-drawer-dark-theme-bg-color: #212121 !default;
 
   display: inline-flex;
   flex-direction: column;
+  flex: 0 0 auto;
   width: $mdc-permanent-drawer-width;
-  height: 100%;
   box-sizing: border-box;
   overflow: hidden;
 

data/vendor/assets/stylesheets/@material/drawer/temporary/mdc-temporary-drawer.scss

@@ -65,7 +65,7 @@
 
     @include mdc-slideable-drawer;
 
-    @include mdc-rtl(".mdc-temporary-drawer__drawer") {
+    @include mdc-rtl(".mdc-temporary-drawer") {
       @include mdc-slideable-drawer-rtl;
     }
 

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

@@ -0,0 +1,150 @@
+//
+// 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 primary-indeterminate-translate {
+  0% {
+    transform: translateX(0);
+  }
+
+  20% {
+    animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+    transform: translateX(0);
+  }
+
+  59.15% {
+    animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+    transform: translateX(83.67142%);
+  }
+
+  100% {
+    transform: translateX(200.611057%);
+  }
+}
+
+@keyframes primary-indeterminate-scale {
+  0% {
+    transform: scaleX(.08);
+  }
+
+  36.65% {
+    animation-timing-function: cubic-bezier(.334731, .12482, .785844, 1);
+    transform: scaleX(.08);
+  }
+
+  69.15% {
+    animation-timing-function: cubic-bezier(.06, .11, .6, 1);
+    transform: scaleX(.661479);
+  }
+
+  100% {
+    transform: scaleX(.08);
+  }
+}
+
+@keyframes secondary-indeterminate-translate {
+  0% {
+    animation-timing-function: cubic-bezier(.15, 0, .515058, .409685);
+    transform: translateX(0);
+  }
+
+  25% {
+    animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712);
+    transform: translateX(37.651913%);
+  }
+
+  48.35% {
+    animation-timing-function: cubic-bezier(.4, .627035, .6, .902026);
+    transform: translateX(84.386165%);
+  }
+
+  100% {
+    transform: translateX(160.277782%);
+  }
+}
+
+@keyframes secondary-indeterminate-scale {
+  0% {
+    animation-timing-function: cubic-bezier(.205028, .057051, .57661, .453971);
+    transform: scaleX(.08);
+  }
+
+  19.15% {
+    animation-timing-function: cubic-bezier(.152313, .196432, .648374, 1.004315);
+    transform: scaleX(.457104);
+  }
+
+  44.15% {
+    animation-timing-function: cubic-bezier(.257759, -.003163, .211762, 1.38179);
+    transform: scaleX(.72796);
+  }
+
+  100% {
+    transform: scaleX(.08);
+  }
+}
+
+@keyframes buffering {
+  to {
+    transform: translateX(-10px);
+  }
+}
+
+@keyframes primary-indeterminate-translate-reverse {
+  0% {
+    transform: translateX(0);
+  }
+
+  20% {
+    animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+    transform: translateX(0);
+  }
+
+  59.15% {
+    animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+    transform: translateX(-83.67142%);
+  }
+
+  100% {
+    transform: translateX(-200.611057%);
+  }
+}
+
+@keyframes secondary-indeterminate-translate-reverse {
+  0% {
+    animation-timing-function: cubic-bezier(.15, 0, .515058, .409685);
+    transform: translateX(0);
+  }
+
+  25% {
+    animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712);
+    transform: translateX(-37.651913%);
+  }
+
+  48.35% {
+    animation-timing-function: cubic-bezier(.4, .627035, .6, .902026);
+    transform: translateX(-84.386165%);
+  }
+
+  100% {
+    transform: translateX(-160.277782%);
+  }
+}
+
+@keyframes buffering-reverse {
+  to {
+    transform: translateX(10px);
+  }
+}

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

@@ -0,0 +1,135 @@
+// 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/animation/functions";
+@import "@material/theme/mixins";
+@import "./keyframes";
+
+.mdc-linear-progress {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  transform: translateZ(0);
+  transition: mdc-animation-exit(opacity, 250ms);
+  overflow: hidden;
+
+  &__bar {
+    animation: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform-origin: top left;
+    transition: mdc-animation-exit(transform, 250ms);
+  }
+
+  &__bar-inner {
+    @include mdc-theme-prop(background-color, primary);
+
+    animation: none;
+    display: inline-block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  &--accent .mdc-linear-progress__bar-inner {
+    @include mdc-theme-prop(background-color, accent);
+  }
+
+  &__buffering-dots {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    // 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 {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform-origin: top left;
+    transition: mdc-animation-exit(transform, 250ms);
+    background-color: #e6e6e6;
+  }
+
+  &__secondary-bar {
+    visibility: hidden;
+  }
+
+  &--indeterminate {
+    .mdc-linear-progress__bar {
+      transition: none;
+    }
+
+    .mdc-linear-progress__primary-bar {
+      animation: primary-indeterminate-translate 2s infinite linear;
+      left: -145.166611%;
+
+      > .mdc-linear-progress__bar-inner {
+        animation: primary-indeterminate-scale 2s infinite linear;
+      }
+    }
+
+    .mdc-linear-progress__secondary-bar {
+      animation: secondary-indeterminate-translate 2s infinite linear;
+      left: -54.888891%;
+      visibility: visible;
+
+      > .mdc-linear-progress__bar-inner {
+        animation: secondary-indeterminate-scale 2s infinite linear;
+      }
+    }
+  }
+
+  &--reversed {
+    .mdc-linear-progress__bar,
+    .mdc-linear-progress__buffer {
+      right: 0;
+      transform-origin: center right;
+    }
+
+    .mdc-linear-progress__primary-bar {
+      animation-name: primary-indeterminate-translate-reverse;
+    }
+
+    .mdc-linear-progress__secondary-bar {
+      animation-name: secondary-indeterminate-translate-reverse;
+    }
+
+    .mdc-linear-progress__buffering-dots {
+      animation: buffering-reverse 250ms infinite linear;
+    }
+  }
+
+  &--closed {
+    opacity: 0;
+  }
+}
+
+.mdc-linear-progress--indeterminate.mdc-linear-progress--reversed {
+  .mdc-linear-progress__primary-bar {
+    right: -145.166611%;
+    left: auto;
+  }
+
+  .mdc-linear-progress__secondary-bar {
+    right: -54.888891%;
+    left: auto;
+  }
+}

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

@@ -157,11 +157,11 @@ a.mdc-list-item {
   @include mdc-ripple-base;
   @include mdc-ripple-bg((pseudo: "::before"));
   @include mdc-ripple-fg((pseudo: "::after"));
+  @include mdc-rtl-reflexive-position(left, $mdc-list-side-padding * -1);
 
   position: relative;
   // Cause the upgraded list item to cover the entirety of the list, causing ripples to emanate
   // across the entire list element.
-  left: $mdc-list-side-padding * -1;
   width: 100%;
   padding: 0 $mdc-list-side-padding;
   overflow: hidden;