material_components_web-sass 0.23.0 → 0.24.0

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

@@ -1,4 +1,5 @@
-// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// 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.
@@ -11,5 +12,7 @@
 // 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-fab-light-ripple-config: (base-color: white, opacity: .16);
+$mdc-ripple-pressed-dark-ink-opacity: .16;
+$mdc-ripple-pressed-light-ink-opacity: .32;

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

@@ -17,13 +17,14 @@
 @import "@material/animation/functions";
 @import "@material/theme/mixins";
 @import "./mixins";
+@import "./variables";
 
 // postcss-bem-linter: define ripple-surface
 
 .mdc-ripple-surface {
-  @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before"));
-  @include mdc-ripple-fg((pseudo: "::after"));
+  @include mdc-ripple-surface;
+  @include mdc-ripple-color;
+  @include mdc-ripple-radius;
 
   position: relative;
   outline: none;
@@ -34,23 +35,11 @@
   }
 
   &--primary {
-    &::before,
-    &::after {
-      @include mdc-theme-prop(background-color, primary);
-    }
-
-    @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .16));
+    @include mdc-ripple-color(primary, $mdc-ripple-pressed-dark-ink-opacity);
   }
 
   &--accent {
-    &::before,
-    &::after {
-      @include mdc-theme-prop(background-color, primary);
-    }
-
-    @include mdc-ripple-bg((pseudo: "::before", theme-style: secondary, opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", theme-style: secondary, opacity: .16));
+    @include mdc-ripple-color(secondary, $mdc-ripple-pressed-dark-ink-opacity);
   }
 }
 

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

@@ -28,6 +28,7 @@
   left: 50%;
   align-items: center;
   justify-content: flex-start;
+  box-sizing: border-box;
   padding-right: 24px;
   padding-left: 24px;
   transform: translate(-50%, 100%);
@@ -42,7 +43,7 @@
 
   @media (max-width: ($mdc-snackbar-tablet-breakpoint - 1)) {
     left: 0;
-    width: calc(100% - 48px);
+    width: 100%;
     transform: translate(0, 100%);
   }
 
@@ -63,7 +64,7 @@
     @media (max-width: ($mdc-snackbar-tablet-breakpoint - 1)) {
       bottom: 0;
       left: 0;
-      width: calc(100% - 48px);
+      width: 100%;
       transform: translate(0, 100%);
     }
   }
@@ -79,7 +80,7 @@
       @media (max-width: ($mdc-snackbar-tablet-breakpoint - 1)) {
         bottom: 0;
         left: 0;
-        width: calc(100% - 48px);
+        width: 100%;
         transform: translate(0);
       }
     }

data/vendor/assets/stylesheets/@material/switch/_functions.scss

@@ -0,0 +1,21 @@
+//
+// 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.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/animation/variables";
+
+@function mdc-switch-transition($property) {
+  @return $property 90ms $mdc-animation-standard-curve-timing-function;
+}

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

@@ -0,0 +1,74 @@
+//
+// 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.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/theme/mixins";
+@import "./variables";
+
+//
+// Public
+//
+
+@mixin mdc-switch-track-color($color) {
+  .mdc-switch__native-control:enabled:checked ~ .mdc-switch__background::before {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-switch-knob-color($color) {
+  // stylelint-disable-next-line selector-max-specificity
+  .mdc-switch__native-control:enabled:checked ~ .mdc-switch__background .mdc-switch__knob {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-switch-focus-indicator-color($color) {
+  // stylelint-disable-next-line selector-max-specificity
+  .mdc-switch__native-control:enabled:checked ~ .mdc-switch__background .mdc-switch__knob::before {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+//
+// Private
+//
+
+@mixin mdc-switch-unchecked-track-color_($color) {
+  .mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background::before {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-switch-unchecked-knob-color_($color) {
+  // stylelint-disable-next-line selector-max-specificity
+  .mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background .mdc-switch__knob {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-switch-unchecked-focus-indicator-color_($color) {
+  // stylelint-disable-next-line selector-max-specificity
+  .mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background .mdc-switch__knob::before {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-switch-tap-target_ {
+  position: absolute;
+  top: -14px;
+  left: -14px;
+  width: $mdc-switch-focus-ring-diameter;
+  height: $mdc-switch-focus-ring-diameter;
+}

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

@@ -1,18 +1,18 @@
-// 
+//
 // 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.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-// 
+//
 
 $mdc-switch-track-width: 34px;
 $mdc-switch-track-height: 14px;
@@ -28,3 +28,7 @@ $mdc-switch-unchecked-track-color-dark: #fff;
 $mdc-switch-unchecked-focus-ring-color-dark: #f1f1f1;
 $mdc-switch-disabled-knob-color: #bdbdbd;
 $mdc-switch-disabled-knob-color-dark: #424242;
+
+$mdc-switch-baseline-theme-color: secondary;
+
+$mdc-switch-knob-vertical-offset_: -3px;

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

@@ -1,3 +1,4 @@
+//
 // Copyright 2016 Google Inc. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -11,31 +12,46 @@
 // 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/variables";
 @import "@material/elevation/mixins";
 @import "@material/theme/mixins";
+@import "./functions";
+@import "./mixins";
 @import "./variables";
 
-@function mdc-switch-transition($property) {
-  @return $property 90ms $mdc-animation-standard-curve-timing-function;
-}
-
 // postcss-bem-linter: define switch
 .mdc-switch {
+  @include mdc-switch-unchecked-track-color_($mdc-switch-unchecked-track-color);
+  @include mdc-switch-unchecked-knob-color_($mdc-switch-unchecked-knob-color);
+  @include mdc-switch-unchecked-focus-indicator-color_($mdc-switch-unchecked-focus-ring-color);
+
+  @include mdc-theme-dark {
+    @include mdc-switch-unchecked-track-color_($mdc-switch-unchecked-track-color-dark);
+    @include mdc-switch-unchecked-knob-color_($mdc-switch-unchecked-knob-color-dark);
+    @include mdc-switch-unchecked-focus-indicator-color_($mdc-switch-unchecked-focus-ring-color-dark);
+  }
+
+  @include mdc-switch-track-color($mdc-switch-baseline-theme-color);
+  @include mdc-switch-knob-color($mdc-switch-baseline-theme-color);
+  @include mdc-switch-focus-indicator-color($mdc-switch-baseline-theme-color);
+
   display: inline-block;
   position: relative;
 
   &__native-control {
+    @include mdc-switch-tap-target_;
+
     display: inline-block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $mdc-switch-track-width;
-    height: $mdc-switch-track-height;
+    margin-top: $mdc-switch-knob-vertical-offset_;
+    transition: mdc-switch-transition(transform);
     opacity: 0;
     cursor: pointer;
     z-index: 2;
+
+    &:checked {
+      transform: translateX($mdc-switch-knob-active-margin);
+    }
   }
 
   &__background {
@@ -45,14 +61,9 @@
     height: $mdc-switch-track-height;
     border-radius: 7px;
     outline: none;
-    background-color: transparent;
-    cursor: pointer;
     user-select: none;
 
-    @include mdc-theme-dark(".mdc-switch") {
-      background-color: transparent;
-    }
-
+    // Track
     &::before {
       display: block;
       position: absolute;
@@ -64,12 +75,10 @@
         mdc-switch-transition(opacity),
         mdc-switch-transition(background-color);
       border-radius: 7px;
-      background-color: $mdc-switch-unchecked-track-color;
       opacity: .38;
       content: "";
 
       @include mdc-theme-dark(".mdc-switch") {
-        background-color: $mdc-switch-unchecked-track-color-dark;
         opacity: .3;
       }
     }
@@ -80,7 +89,7 @@
 
       display: block;
       position: absolute;
-      top: -3px;
+      top: $mdc-switch-knob-vertical-offset_;
       left: 0;
       width: $mdc-switch-knob-diameter;
       height: $mdc-switch-knob-diameter;
@@ -89,26 +98,18 @@
         mdc-switch-transition(transform),
         mdc-switch-transition(background-color);
       border-radius: $mdc-switch-knob-diameter / 2;
-      background-color: $mdc-switch-unchecked-knob-color;
       z-index: 1;
 
-      @include mdc-theme-dark(".mdc-switch") {
-        background-color: $mdc-switch-unchecked-knob-color-dark;
-      }
-
+      // Focus indicator
       // postcss-bem-linter: ignore
       &::before {
-        position: absolute;
-        top: -14px;
-        left: -14px;
-        width: $mdc-switch-focus-ring-diameter;
-        height: $mdc-switch-focus-ring-diameter;
+        @include mdc-switch-tap-target_;
+
         transform: scale(0);
         transition:
           mdc-switch-transition(transform),
           mdc-switch-transition(background-color);
         border-radius: $mdc-switch-focus-ring-diameter / 2;
-        background-color: transparent;
         opacity: .2;
         content: "";
       }
@@ -118,6 +119,7 @@
 
 .mdc-switch__native-control:focus ~ .mdc-switch__background {
   .mdc-switch__knob {
+    // Focus indicator
     &::before {
       position: absolute;
       width: $mdc-switch-focus-ring-diameter;
@@ -127,10 +129,8 @@
         mdc-switch-transition(transform),
         mdc-switch-transition(background-color);
       border-radius: $mdc-switch-focus-ring-diameter / 2;
-      background-color: $mdc-switch-unchecked-focus-ring-color;
 
       @include mdc-theme-dark(".mdc-switch") {
-        background-color: $mdc-switch-unchecked-focus-ring-color-dark;
         opacity: .14;
       }
     }
@@ -138,27 +138,19 @@
 }
 
 .mdc-switch__native-control:checked ~ .mdc-switch__background {
+  // Track
   &::before {
-    @include mdc-theme-prop(background-color, primary);
-
     opacity: .5;
   }
 
   .mdc-switch__knob {
-    @include mdc-theme-prop(background-color, primary);
-
-    transform: translateX($mdc-switch-track-width - $mdc-switch-knob-diameter);
+    transform: translateX($mdc-switch-knob-active-margin);
     transition:
       mdc-switch-transition(transform),
       mdc-switch-transition(background-color);
 
+    // Focus indicator
     &::before {
-      @include mdc-theme-prop(background-color, primary);
-
-      @include mdc-theme-dark(".mdc-switch") {
-        @include mdc-theme-prop(background-color, primary);
-      }
-
       opacity: .15;
     }
   }
@@ -171,6 +163,7 @@
 }
 
 .mdc-switch__native-control:disabled ~ .mdc-switch__background {
+  // Track
   &::before {
     background-color: $mdc-switch-unchecked-track-color;
     opacity: .12;

data/vendor/assets/stylesheets/@material/tabs/tab/mdc-tab.scss

@@ -158,18 +158,16 @@ $mdc-tab-with-icon-and-text-height: 72px;
 // stylelint-enable plugin/selector-bem-pattern
 
 .mdc-tab.mdc-ripple-upgraded {
-  @include mdc-ripple-base;
-  @include mdc-ripple-fg((pseudo: "::after"));
-  @include mdc-ripple-bg((pseudo: "::before"));
+  @include mdc-ripple-surface;
+  @include mdc-ripple-color;
+  @include mdc-ripple-radius;
 
   @include mdc-theme-dark(".mdc-tab-bar") {
-    @include mdc-ripple-bg((pseudo: "::before", base-color: map-get($mdc-theme-property-values, text-primary-on-dark), opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: map-get($mdc-theme-property-values, text-primary-on-dark), opacity: .16));
+    @include mdc-ripple-color(text-primary-on-dark, .16);
   }
 
   .mdc-toolbar & {
-    @include mdc-ripple-bg((pseudo: "::before", base-color: map-get($mdc-theme-property-values, text-primary-on-primary), opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: map-get($mdc-theme-property-values, text-primary-on-primary), opacity: .16));
+    @include mdc-ripple-color(text-primary-on-primary, .16);
   }
 
   // stylelint-disable plugin/selector-bem-pattern

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

@@ -14,6 +14,29 @@
 // limitations under the License.
 //
 
+@mixin mdc-text-field-box-corner-radius($radius) {
+  border-radius: $radius $radius 0 0;
+}
+
+@mixin mdc-text-field-textarea-corner-radius($radius) {
+  border-radius: $radius;
+
+  .mdc-textfield__label {
+    // Bottom corners are square to prevent weird edge cases
+    // where text would be visible outside of the curve.
+    border-radius: $radius $radius 0 0;
+  }
+
+  .mdc-textfield__input {
+    // The input element is required to have 2 pixels shaved off
+    // of the radius of its parent. This prevents an ugly space of
+    // background between the two borders in each corner when the
+    // textarea is focused. This also means we need to guard against
+    // invalid output.
+    border-radius: max($radius - 2, 0);
+  }
+}
+
 @mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY) {
   @keyframes invalid-shake-float-above-#{$modifier} {
     0% {