material_components_web-sass 0.12.1 → 0.13.0

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

@@ -135,10 +135,10 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     padding: 8px;
 
     &__button {
-      margin-right: 8px;
+      @include mdc-rtl-reflexive-box(margin, right, 8px);
 
       &:last-child {
-        margin-right: 0;
+        @include mdc-rtl-reflexive-box(margin, right, 0);
       }
     }
   }

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

@@ -135,3 +135,8 @@
     }
   }
 }
+
+.mdc-drawer-scroll-lock {
+  height: 100vh;
+  overflow: hidden;
+}

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

@@ -44,7 +44,7 @@
   }
 
   width: calc(#{$percent} - #{$gutter});
-  width: calc(#{$percent} - var(--mdc-layout-grid-gutter, #{$gutter}));
+  width: calc(#{$percent} - var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}));
 
   @supports (display: grid) {
     width: auto;
@@ -52,53 +52,45 @@
   }
 }
 
-@mixin mdc-layout-grid-cell-spans_($span, $gutter) {
-  @each $size in map-keys($mdc-layout-grid-columns) {
-    @include mdc-layout-grid-media-query_($size) {
-      @include mdc-layout-grid-cell-span_($size, $span, $gutter);
-    }
-  }
-}
-
 // Public mixins, meant for developer usage.
-@mixin mdc-layout-grid($margin, $gutter, $max-width: null) {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  margin: 0 auto;
+@mixin mdc-layout-grid($size, $margin, $max-width: null) {
   box-sizing: border-box;
-  padding: $margin - $gutter / 2;
-  padding: calc(var(--mdc-layout-grid-margin, #{$margin}) - var(--mdc-layout-grid-gutter, #{$gutter}) / 2);
+  margin: 0 auto;
 
   @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) {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  margin: -$gutter / 2;
+  margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2 * -1);
+
   @supports (display: grid) {
     display: grid;
     grid-gap: $gutter;
-    grid-gap: var(--mdc-layout-grid-gutter, $gutter);
-    padding: $margin;
-    padding: var(--mdc-layout-grid-margin, #{$margin});
-
-    @each $size in map-keys($mdc-layout-grid-columns) {
-      @include mdc-layout-grid-media-query_($size) {
-        grid-template-columns: repeat(map-get($mdc-layout-grid-columns, $size), minmax(0, 1fr));
-      }
-    }
+    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));
   }
 }
 
-@mixin mdc-layout-grid-cell($gutter, $span: 4) {
-  margin: $gutter / 2;
-  margin: calc(var(--mdc-layout-grid-gutter, #{$gutter}) / 2);
+@mixin mdc-layout-grid-cell($size, $default-span, $gutter) {
   box-sizing: border-box;
+  margin: $gutter / 2;
+  margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2);
 
   @supports (display: grid) {
     margin: 0;
   }
 
-  @include mdc-layout-grid-cell-spans_($span, $gutter);
+  @include mdc-layout-grid-cell-span_($size, $default-span, $gutter);
 }
 
 @mixin mdc-layout-grid-cell-order($order) {

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

@@ -24,6 +24,18 @@ $mdc-layout-grid-columns: (
   phone: 4
 ) !default;
 
+$mdc-layout-grid-default-margin: (
+  desktop: 24px,
+  tablet: 16px,
+  phone: 16px
+) !default;
+
+$mdc-layout-grid-default-gutter: (
+  desktop: 24px,
+  tablet: 16px,
+  phone: 16px
+) !default;
+
 $mdc-layout-grid-default-column-span: 4 !default;
-$mdc-layout-grid-default-margin: 16px !default;
-$mdc-layout-grid-default-gutter: 16px !default;
+
+$mdc-layout-grid-max-width: null;

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

@@ -15,22 +15,48 @@
 @import "./variables";
 @import "./mixins";
 
+:root {
+  @each $size in map-keys($mdc-layout-grid-columns) {
+    --mdc-layout-grid-margin-#{$size}: map-get($mdc-layout-grid-default-margin, $size);
+    --mdc-layout-grid-gutter-#{$size}: map-get($mdc-layout-grid-default-gutter, $size);
+  }
+}
+
 // postcss-bem-linter: define layout-grid
 .mdc-layout-grid {
-  @include mdc-layout-grid($mdc-layout-grid-default-margin, $mdc-layout-grid-default-gutter);
+  @each $size in map-keys($mdc-layout-grid-columns) {
+    @include mdc-layout-grid-media-query_($size) {
+      $margin: map-get($mdc-layout-grid-default-margin, $size);
+
+      @include mdc-layout-grid($size, $margin, $mdc-layout-grid-max-width);
+    }
+  }
 }
 
-.mdc-layout-grid__cell {
-  @include mdc-layout-grid-cell($mdc-layout-grid-default-gutter);
+.mdc-layout-grid__inner {
+  @each $size in map-keys($mdc-layout-grid-columns) {
+    @include mdc-layout-grid-media-query_($size) {
+      $margin: map-get($mdc-layout-grid-default-margin, $size);
+      $gutter: map-get($mdc-layout-grid-default-gutter, $size);
 
+      @include mdc-layout-grid-inner($size, $margin, $gutter);
+    }
+  }
+}
+
+.mdc-layout-grid__cell {
   @each $size in map-keys($mdc-layout-grid-columns) {
     @include mdc-layout-grid-media-query_($size) {
+      $gutter: map-get($mdc-layout-grid-default-gutter, $size);
+
+      @include mdc-layout-grid-cell($size, $mdc-layout-grid-default-column-span, $gutter);
+
       @for $span from 1 through map-get($mdc-layout-grid-columns, desktop) {
         // Span classes.
         // stylelint-disable max-nesting-depth
         @at-root .mdc-layout-grid__cell--span-#{$span},
           .mdc-layout-grid__cell--span-#{$span}-#{$size}.mdc-layout-grid__cell--span-#{$span}-#{$size} {
-          @include mdc-layout-grid-cell-span_($size, $span, $mdc-layout-grid-default-gutter);
+          @include mdc-layout-grid-cell-span_($size, $span, $gutter);
         }
         // stylelint-enable max-nesting-depth
       }

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

@@ -140,9 +140,7 @@ $mdc-list-side-padding: 16px;
   .mdc-list--two-line.mdc-list--dense & {
     height: 60px;
   }
-  // stylelint-enable plugin/selector-bem-pattern
 }
-
 // postcss-bem-linter: end //
 
 // Override anchor tag styles for the use-case of a list being used for navigation
@@ -221,11 +219,9 @@ a.mdc-list-item {
   }
 
   // Reset padding on mdc-list since it's already accounted for by the list group.
-  // stylelint-disable plugin/selector-bem-pattern
   .mdc-list {
     padding: 0;
   }
-  // stylelint-enable plugin/selector-bem-pattern
 }
 
 // postcss-bem-linter: end

data/vendor/assets/stylesheets/@material/menu/simple/mdc-simple-menu.scss

@@ -26,6 +26,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
 .mdc-simple-menu {
   display: none;
   position: absolute;
+  min-width: 170px;
   max-width: calc(100vw - 32px);
   max-height: calc(100vh - 32px);
   margin: 0;
@@ -133,8 +134,9 @@ $mdc-simple-menu-item-fade-duration: .3s;
     outline: none;
     color: inherit;
     text-decoration: none;
+    user-select: none;
 
-    @include mdc-typography(body2);
+    @include mdc-typography(subheading2);
 
     @include mdc-theme-dark(".mdc-simple-menu", true) {
       color: white;
@@ -189,6 +191,22 @@ $mdc-simple-menu-item-fade-duration: .3s;
     opacity: .18;
   }
 
+  .mdc-list-item[aria-disabled="true"] {
+    cursor: default;
+
+    @include mdc-theme-prop(color, text-disabled-on-light);
+
+    @include mdc-theme-dark(".mdc-select") {
+      @include mdc-theme-prop(color, text-disabled-on-dark);
+    }
+  }
+
+  .mdc-list-item[aria-disabled="true"] {
+    &:focus::before,
+    &:active::before {
+      opacity: 0;
+    }
+  }
   /* stylelint-enable plugin/selector-bem-pattern */
 }
 

data/vendor/assets/stylesheets/@material/slider/_variables.scss

@@ -0,0 +1,18 @@
+//
+// 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.
+//
+
+$mdc-slider-default-assumed-bg-color: white !default;
+$mdc-slider-dark-theme-assumed-bg-color: #333 !default;

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

@@ -0,0 +1,226 @@
+//
+// 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/theme/mixins";
+@import "@material/rtl/mixins";
+@import "./variables";
+
+$mdc-slider-main-grey: #bdbdbd;
+$mdc-slider-dark-theme-grey: #5c5c5c;
+
+// postcss-bem-linter: define slider
+
+@keyframes mdc-slider-emphasize {
+  0% {
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    animation-timing-function: ease-in;
+    transform: scale(.85);
+  }
+
+  100% {
+    transform: scale(.571);
+  }
+}
+
+.mdc-slider {
+  position: relative;
+  width: 100%;
+  height: 48px;
+  cursor: pointer;
+  touch-action: pan-x;
+  -webkit-tap-highlight-color: rgba(black, 0);
+
+  &:focus {
+    outline: none;
+  }
+
+  &__track-container {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    height: 2px;
+    background-color: $mdc-slider-main-grey;
+    overflow: hidden;
+
+    @include mdc-theme-dark(".mdc-slider") {
+      background-color: $mdc-slider-dark-theme-grey;
+    }
+  }
+
+  &__track {
+    @include mdc-theme-prop(background-color, primary);
+
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform-origin: left top;
+    will-change: transform;
+
+    @include mdc-rtl(".mdc-slider") {
+      transform-origin: right top;
+    }
+  }
+
+  &__thumb-container {
+    position: absolute;
+    top: 15px;
+    left: 0;
+    width: 21px;
+    // Ensure that touching anywhere within the Y-coordinate space of thumb
+    // is considered "clicking on the thumb".
+    height: 100%;
+    will-change: transform;
+  }
+
+  &__thumb {
+    @include mdc-theme-prop(fill, primary);
+    @include mdc-theme-prop(stroke, primary);
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: scale(.571);
+    transition: transform 100ms ease-out, fill 100ms ease-out, stroke 100ms ease-out;
+    stroke-width: 3.5;
+  }
+
+  &__focus-ring {
+    @include mdc-theme-prop(background-color, primary);
+
+    width: 21px;
+    height: 21px;
+    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out;
+    border-radius: 50%;
+    opacity: 0;
+  }
+}
+
+.mdc-slider--active {
+  .mdc-slider__thumb {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.mdc-slider--focus {
+  .mdc-slider__thumb {
+    animation: mdc-slider-emphasize 266.67ms linear;
+  }
+
+  .mdc-slider__focus-ring {
+    transform: scale3d(1.55, 1.55, 1.55);
+    opacity: .25;
+  }
+}
+
+.mdc-slider--disabled {
+  cursor: auto;
+
+  .mdc-slider__track {
+    background-color: $mdc-slider-main-grey;
+
+    @include mdc-theme-dark(".mdc-slider", true) {
+      background-color: $mdc-slider-dark-theme-grey;
+    }
+  }
+
+  // We use !important here to override all styles without having to use excessive
+  // :not() selectors or intricate compound selectors.
+  .mdc-slider__thumb {
+    fill: $mdc-slider-main-grey !important;
+    stroke: $mdc-slider-default-assumed-bg-color !important;
+    stroke: var(--mdc-slider-bg-color-behind-component, $mdc-slider-default-assumed-bg-color) !important;
+
+    @include mdc-theme-dark(".mdc-slider", true) {
+      fill: $mdc-slider-dark-theme-grey !important;
+      stroke: $mdc-slider-dark-theme-assumed-bg-color !important;
+      stroke: var(--mdc-slider-bg-color-behind-component, $mdc-slider-dark-theme-assumed-bg-color) !important;
+    }
+  }
+}
+
+.mdc-slider--off {
+  .mdc-slider__track {
+    opacity: 0;
+  }
+
+  // stylelint-disable-next-line plugin/selector-bem-pattern
+  .mdc-slider__thumb {
+    fill: $mdc-slider-default-assumed-bg-color;
+    fill: var(--mdc-slider-bg-color-behind-component, $mdc-slider-default-assumed-bg-color);
+    stroke: $mdc-slider-main-grey;
+
+    @include mdc-theme-dark(".mdc-slider", true) {
+      fill: $mdc-slider-dark-theme-assumed-bg-color;
+      fill: var(--mdc-slider-bg-color-behind-component, $mdc-slider-dark-theme-assumed-bg-color);
+      stroke: $mdc-slider-dark-theme-grey;
+    }
+  }
+
+  // stylelint-disable plugin/selector-bem-pattern
+  &.mdc-slider--focus {
+    .mdc-slider__thumb {
+      fill: #dedede;
+
+      @include mdc-theme-dark(".mdc-slider", true) {
+        fill: #82848c;
+        stroke: #82848c;
+      }
+    }
+  }
+
+  &.mdc-slider--active.mdc-slider--focus {
+    .mdc-slider__thumb {
+      stroke: #8c8c8c;
+
+      @include mdc-theme-dark(".mdc-slider", true) {
+        stroke: $mdc-slider-dark-theme-grey;
+      }
+    }
+  }
+
+  .mdc-slider__focus-ring {
+    background-color: $mdc-slider-main-grey;
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+}
+
+.mdc-slider--in-transit {
+  .mdc-slider__thumb {
+    transition-delay: 140ms;
+  }
+}
+
+// NOTE(traviskaufman): There are multiple cases where we want the slider to
+// transition seamlessly even though we're jumping to a spot. The selectors
+// below highlight these cases. The selectors are supplemented by a comment
+// denoting their semantic meaning within the slider.
+
+// When a user clicks somewhere on the track that is not directly the slider
+// thumb container, we transition to the place where the user clicked.
+.mdc-slider--in-transit,
+// When a user is using the arrow keys to modify the value of the slider rather
+// than dragging with a pointer, we transition from one value to another.
+.mdc-slider:focus:not(.mdc-slider--active) {
+  .mdc-slider__thumb-container,
+  .mdc-slider__track {
+    transition: transform 80ms ease;
+  }
+}
+
+// postcss-bem-linter: end