material_components_web-sass 0.14.0.1 → 0.15.0

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

@@ -19,7 +19,6 @@
 @import "@material/elevation/mixins";
 @import "@material/ripple/mixins";
 @import "@material/theme/mixins";
-@import "@material/typography/mixins";
 
 // postcss-bem-linter: define button
 
@@ -27,7 +26,6 @@
   @include mdc-ripple-base;
   @include mdc-ripple-bg((pseudo: "::before"));
   @include mdc-ripple-fg((pseudo: "::after"));
-  @include mdc-typography(body2);
   @include mdc-theme-prop(color, text-primary-on-light);
 
   display: inline-block;
@@ -39,9 +37,10 @@
   border-radius: 2px;
   outline: none;
   background: transparent;
-  font-size: 14px; // Override font to specifically be px as spec defined pt
+  font-size: 14px;
   font-weight: 500;
-  line-height: 36px; // Override line-height so text aligns centered
+  letter-spacing: .04em;
+  line-height: 36px;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;

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

@@ -56,7 +56,7 @@
         // 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} {
+          .mdc-layout-grid__cell--span-#{$span}-#{$size} {
           @include mdc-layout-grid-cell-span_($size, $span, $gutter);
         }
         // stylelint-enable max-nesting-depth
@@ -97,4 +97,13 @@
   }
 }
 
+.mdc-layout-grid--align-left {
+  margin-right: auto;
+  margin-left: 0;
+}
+
+.mdc-layout-grid--align-right {
+  margin-right: 0;
+  margin-left: auto;
+}
 // postcss-bem-linter: end

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

@@ -15,6 +15,7 @@
 //
 
 @import "@material/theme/mixins";
+@import "@material/typography/mixins";
 @import "@material/rtl/mixins";
 @import "./variables";
 
@@ -77,6 +78,50 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
     }
   }
 
+  &__track-marker-container {
+    display: flex;
+    margin-right: 0;
+    margin-left: -1px;
+    visibility: hidden;
+
+    @include mdc-rtl(".mdc-slider") {
+      margin-right: -1px;
+      margin-left: 0;
+    }
+
+    &::after {
+      display: block;
+      width: 2px;
+      height: 2px;
+      background-color: $mdc-slider-dark-theme-grey;
+      content: "";
+
+      @include mdc-theme-dark(".mdc-slider", true) {
+        background-color: $mdc-slider-main-grey;
+      }
+    }
+  }
+
+  &__track-marker {
+    flex: 1;
+
+    &::after {
+      display: block;
+      width: 2px;
+      height: 2px;
+      background-color: $mdc-slider-dark-theme-grey;
+      content: "";
+
+      @include mdc-theme-dark(".mdc-slider", true) {
+        background-color: $mdc-slider-main-grey;
+      }
+    }
+
+    &:first-child::after {
+      width: 3px;
+    }
+  }
+
   &__thumb-container {
     position: absolute;
     top: 15px;
@@ -109,6 +154,37 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
     border-radius: 50%;
     opacity: 0;
   }
+
+  &__pin {
+    @include mdc-theme-prop(background-color, primary);
+    @include mdc-theme-prop(color, text-primary-on-primary);
+
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    margin-top: -2px;
+    margin-left: -2px;
+    transform: rotate(-45deg) scale(0) translate(0, 0);
+    transition: transform 100ms ease-out;
+    border-radius: 50% 50% 50% 0%;
+
+    /**
+     * Ensuring that the pin is higher than the thumb in the stacking order
+     * removes some rendering jank observed in Chrome.
+     */
+    z-index: 1;
+  }
+
+  &__pin-value-marker {
+    @include mdc-typography(caption);
+
+    transform: rotate(45deg);
+  }
 }
 
 .mdc-slider--active {
@@ -172,6 +248,14 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
     }
   }
 
+  .mdc-slider__pin {
+    background-color: $mdc-slider-main-grey;
+
+    @include mdc-theme-dark(".mdc-slider", true) {
+      background-color: $mdc-slider-dark-theme-grey;
+    }
+  }
+
   // stylelint-disable plugin/selector-bem-pattern
   &.mdc-slider--focus {
     .mdc-slider__thumb {
@@ -223,4 +307,35 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
   }
 }
 
+.mdc-slider--discrete {
+  // stylelint-disable plugin/selector-bem-pattern
+  &.mdc-slider--active {
+    .mdc-slider__thumb {
+      transform: scale(calc(12 / 21));
+    }
+
+    .mdc-slider__pin {
+      transform: rotate(-45deg) scale(1) translate(19px, -20px);
+    }
+  }
+
+  &.mdc-slider--focus {
+    .mdc-slider__thumb {
+      animation: none;
+    }
+
+    .mdc-slider__focus-ring {
+      transform: none;
+      opacity: 0;
+    }
+  }
+
+  &.mdc-slider--display-markers {
+    .mdc-slider__track-marker-container {
+      visibility: visible;
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+}
+
 // postcss-bem-linter: end

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

@@ -16,6 +16,7 @@
 
 // Hard coded since the color is not present in any palette.
 $mdc-snackbar-background-color: #323232;
+$mdc-snackbar-background-color-on-dark: #fafafa;
 $mdc-snackbar-foreground-color: white;
 // TODO: Better spot to pull this breakpoint?
 //$snackbar-tablet-breakpoint: $grid-tablet-breakpoint;

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

@@ -30,31 +30,60 @@
   justify-content: flex-start;
   padding-right: 24px;
   padding-left: 24px;
-  transform: translate(0, 100%);
+  transform: translate(-50%, 100%);
   transition: mdc-animation-exit(transform, .25s);
   background-color: $mdc-snackbar-background-color;
+
+  @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);
+    transform: translate(0, 100%);
   }
 
   @media (min-width: $mdc-snackbar-tablet-breakpoint) {
     min-width: 288px;
     max-width: 568px;
-    transform: translate(-50%, 100%);
     border-radius: 2px;
   }
 
+  &--align-start {
+    @media (min-width: $mdc-snackbar-tablet-breakpoint) {
+      bottom: 24px;
+
+      @include mdc-rtl-reflexive-position(left, 24px);
+
+      transform: translate(0, 200%);
+    }
+
+    @media (max-width: ($mdc-snackbar-tablet-breakpoint - 1)) {
+      bottom: 0;
+      left: 0;
+      width: calc(100% - 48px);
+      transform: translate(0, 100%);
+    }
+  }
+
   &--active {
-    transform: translate(0, 0);
+    transform: translate(0);
     pointer-events: auto;
     transition: mdc-animation-enter(transform, .25s);
 
-    @media (min-width: $mdc-snackbar-tablet-breakpoint) {
+    &:not(.mdc-snackbar--align-start) {
       transform: translate(-50%, 0);
+
+      @media (max-width: ($mdc-snackbar-tablet-breakpoint - 1)) {
+        bottom: 0;
+        left: 0;
+        width: calc(100% - 48px);
+        transform: translate(0);
+      }
     }
   }
 
@@ -84,6 +113,11 @@
     height: 48px;
     transition: mdc-animation-exit(opacity, .3s);
     color: $mdc-snackbar-foreground-color;
+
+    @include mdc-theme-dark(".mdc-snackbar") {
+      @include mdc-theme-prop(color, text-primary-on-light);
+    }
+
     opacity: 0;
   }
 
@@ -99,6 +133,11 @@
 
   &__action-button {
     @include mdc-theme-prop(color, accent);
+
+    @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;

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

@@ -79,7 +79,7 @@
 
     align-self: center;
     margin: 0;
-    margin-left: 16px;
+    margin-left: 24px;
     padding: $mdc-toobar-element-vertical-padding 0;
     line-height: 1.5rem;
     text-overflow: ellipsis;
@@ -93,9 +93,33 @@
     @include mdc-theme-prop(color, text-primary-on-primary);
   }
 
+  &__icon:last-child {
+    padding-right: 16px;
+  }
+
   &__icon--menu {
     @include mdc-shared-icon-style(menu);
     @include mdc-theme-prop(color, text-primary-on-primary);
+
+    padding: 16px 24px;
+  }
+}
+
+.mdc-toolbar__icon--menu + .mdc-toolbar__title {
+  margin-left: 8px;
+}
+
+@media (max-width: $mdc-toolbar-mobile-breakpoint) {
+  .mdc-toolbar__icon--menu {
+    padding: 16px;
+  }
+
+  .mdc-toolbar__icon:last-child {
+    padding: 16px 8px;
+  }
+
+  .mdc-toolbar__title {
+    margin-left: 16px !important;
   }
 }
 
@@ -103,7 +127,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1;
+  z-index: 4;
 
   @include mdc-elevation(4);
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.14.0.1
+  version: 0.15.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-06-28 00:00:00.000000000 Z
+date: 2017-07-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails