material_components_web-sass 0.22.0 → 0.23.0

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

@@ -19,6 +19,7 @@ $mdc-checkbox-border-color: rgba(black, .54) !default;
 $mdc-checkbox-border-color-dark: white !default;
 $mdc-checkbox-disabled-color: rgba(black, .26) !default;
 $mdc-checkbox-disabled-color-dark: rgba(white, .3) !default;
+$mdc-checkbox-baseline-theme-color: secondary !default;
 
 $mdc-checkbox-touch-area: 40px;
 $mdc-checkbox-size: 18px;
@@ -27,7 +28,9 @@ $mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size;
 $mdc-checkbox-border-width: 2px;
 $mdc-checkbox-transition-duration: 90ms;
 $mdc-checkbox-item-spacing: 4px;
+$mdc-checkbox-ripple-opacity: .14;
+$mdc-checkbox-focus-indicator-opacity: .26;
 
-/* Manual calculation done on SVG */
-$_mdc-checkbox-mark-path-length: 29.7833385;
-$_mdc-checkbox-indeterminate-checked-easing-function: cubic-bezier(.14, 0, 0, 1);
+// Manual calculation done on SVG
+$mdc-checkbox-mark-path-length_: 29.7833385;
+$mdc-checkbox-indeterminate-checked-easing-function_: cubic-bezier(.14, 0, 0, 1);

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

@@ -14,334 +14,105 @@
 // limitations under the License.
 //
 
-@import "@material/animation/functions";
-@import "@material/ripple/mixins";
-@import "@material/rtl/mixins";
+@import "@material/theme/mixins";
+@import "./mixins";
 @import "./variables";
-@import "./keyframes";
-
-@function mdc-checkbox-transition-enter($property, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
-  @return mdc-animation-enter($property, $duration, $delay);
-}
-
-@function mdc-checkbox-transition-exit($property, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
-  @return mdc-animation-exit-temporary($property, $duration, $delay);
-}
-
-@mixin mdc-checkbox-cover-element {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
 
 // postcss-bem-linter: define checkbox
+
 .mdc-checkbox {
+  @include mdc-checkbox-base_;
   @include mdc-ripple-base;
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
-
-  display: inline-block;
-  position: relative;
-  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;
-  line-height: 0;
-  white-space: nowrap;
-  cursor: pointer;
-  vertical-align: bottom;
-
-  &::before,
-  &::after {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  // stylelint-disable plugin/selector-bem-pattern
-  &.mdc-ripple-upgraded--unbounded {
-    .mdc-checkbox__background::before {
-      content: none;
-    }
-  }
-  // stylelint-enable plugin/selector-bem-pattern
-
-  &__background {
-    @include mdc-checkbox-cover-element;
-    @include mdc-rtl-reflexive-position(
-      left, ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2, ".mdc-checkbox");
-
-    display: inline-flex;
-    top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: $mdc-checkbox-ui-pct;
-    height: $mdc-checkbox-ui-pct;
-    transition:
-      mdc-checkbox-transition-exit(background-color),
-      mdc-checkbox-transition-exit(border-color);
-    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") {
-      border-color: $mdc-checkbox-border-color-dark;
-    }
-
-    // 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, $edgeOptOut: true);
-
-      width: 100%;
-      height: 100%;
-      transform: scale(0, 0);
-      transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform);
-      border-radius: 50%;
-      opacity: 0;
-      pointer-events: none;
-      content: "";
-      will-change: opacity, transform;
-    }
-  }
-
-  &__native-control {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    cursor: inherit;
-  }
-
-  &__checkmark {
-    @include mdc-checkbox-cover-element;
-
-    width: 100%;
-    transition: mdc-checkbox-transition-exit(opacity, 0ms, $mdc-checkbox-transition-duration * 2);
-    fill: $mdc-checkbox-mark-color;
-    opacity: 0;
-
-    &__path {
-      transition:
-        mdc-checkbox-transition-exit(
-          stroke-dashoffset,
-          0ms,
-          $mdc-checkbox-transition-duration * 2
-        );
-      // !important is needed here because a stroke must be set as an attribute on the SVG in order
-      // for line animation to work properly.
-      stroke: $mdc-checkbox-mark-color !important;
-      stroke-width: $mdc-checkbox-mark-stroke-size * 1.3;
-      stroke-dashoffset: $_mdc-checkbox-mark-path-length;
-      stroke-dasharray: $_mdc-checkbox-mark-path-length;
-    }
-  }
-
-  &__mixedmark {
-    width: 100%;
-    height: floor($mdc-checkbox-mark-stroke-size);
-    transform: scaleX(0) rotate(0deg);
-    transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform);
-    background-color: $mdc-checkbox-mark-color;
-    opacity: 0;
-  }
-}
-
-.mdc-checkbox__native-control:focus {
-  ~ .mdc-checkbox__background::before {
-    transform: scale(2.75, 2.75);
-    transition:
-      mdc-checkbox-transition-enter(opacity, 0ms, 80ms),
-      mdc-checkbox-transition-enter(transform, 0ms, 80ms);
-    opacity: .26;
-  }
-}
-
-.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);
-
-    .mdc-checkbox__checkmark {
-      transition:
-        mdc-checkbox-transition-enter(opacity, 0ms, $mdc-checkbox-transition-duration * 2),
-        mdc-checkbox-transition-enter(transform, 0ms, $mdc-checkbox-transition-duration * 2);
-      opacity: 1;
+  @include mdc-checkbox-ink-color($mdc-checkbox-mark-color);
+  @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color);
+  @include mdc-checkbox-ripple((theme-style: $mdc-checkbox-baseline-theme-color, opacity: $mdc-checkbox-ripple-opacity));
+  @include mdc-checkbox-container-colors();
 
-      &__path {
-        stroke-dashoffset: 0;
-      }
-    }
-
-    .mdc-checkbox__mixedmark {
-      transform: scaleX(1) rotate(-45deg);
-    }
-  }
-}
-
-.mdc-checkbox__native-control:indeterminate {
-  ~ .mdc-checkbox__background {
-    @include mdc-theme-prop(border-color, primary);
-    @include mdc-theme-prop(background-color, primary);
-
-    .mdc-checkbox__checkmark {
-      transform: rotate(45deg);
-      transition:
-        mdc-checkbox-transition-exit(opacity, 0ms, $mdc-checkbox-transition-duration),
-        mdc-checkbox-transition-exit(transform, 0ms, $mdc-checkbox-transition-duration);
-      opacity: 0;
-
-      &__path {
-        stroke-dashoffset: 0;
-      }
-    }
-
-    .mdc-checkbox__mixedmark {
-      transform: scaleX(1) rotate(0deg);
-      opacity: 1;
-    }
-  }
-}
-
-.mdc-checkbox__native-control:disabled,
-fieldset:disabled .mdc-checkbox__native-control,
-[aria-disabled="true"] .mdc-checkbox__native-control {
-  cursor: default;
-
-  // postcss-bem-linter: ignore
-  ~ .mdc-checkbox__background {
-    border-color: $mdc-checkbox-disabled-color;
-
-    @include mdc-theme-dark(".mdc-checkbox") {
-      border-color: $mdc-checkbox-disabled-color-dark;
-    }
-  }
-
-  &:checked,
-  &:indeterminate {
-    ~ .mdc-checkbox__background {
-      border-color: transparent;
-      background-color: $mdc-checkbox-disabled-color;
-      // stylelint-disable selector-max-compound-selectors, selector-max-specificity
-      @include mdc-theme-dark(".mdc-checkbox") {
-        background-color: $mdc-checkbox-disabled-color-dark;
-      }
-      // stylelint-enable selector-max-compound-selectors, selector-max-specificity
-    }
+  @include mdc-theme-dark {
+    @include mdc-checkbox-container-colors($unmarked-stroke-color: $mdc-checkbox-border-color-dark);
   }
 }
 
+// Needed to disable hover effects on CSS-only (non-JS) checkboxes
 .mdc-checkbox--disabled {
-  cursor: default;
-  pointer-events: none;
+  @include mdc-checkbox--disabled_;
 }
 
+// JS checkbox
 .mdc-checkbox--upgraded {
   .mdc-checkbox__background,
   .mdc-checkbox__checkmark,
   .mdc-checkbox__checkmark__path,
   .mdc-checkbox__mixedmark {
-    // Due to the myriad of selector combos used to properly style a CSS-only checkbox, all of
-    // which have varying selector precedence and make use of transitions, it is cleaner and more
-    // efficient here to simply use !important, since the mdc-checkbox--anim-* classes will take
-    // over from here.
-    transition: none !important;
+    @include mdc-checkbox__child--upgraded_;
   }
 }
 
 .mdc-checkbox--anim {
-  $_mdc-checkbox-indeterminate-change-duration: 500ms;
+  @include mdc-checkbox--anim_;
+}
 
-  &-unchecked-checked,
-  &-unchecked-indeterminate {
-    .mdc-checkbox__background {
-      animation: mdc-checkbox-fade-in-background $mdc-checkbox-transition-duration * 2 linear;
+.mdc-checkbox__background {
+  @include mdc-checkbox__background_;
 
-      @include mdc-theme-dark(".mdc-checkbox") {
-        animation-name: mdc-checkbox-fade-in-background-dark;
-      }
-    }
+  .mdc-checkbox__native-control:enabled:checked ~ &,
+  .mdc-checkbox__native-control:enabled:indeterminate ~ & {
+    @include mdc-checkbox__background--marked_;
   }
+}
+
+// The frame's ::before element is used as a focus indicator for the checkbox
+.mdc-checkbox__background::before {
+  @include mdc-checkbox__focus-indicator_;
 
-  &-checked-unchecked,
-  &-indeterminate-unchecked {
-    .mdc-checkbox__background {
-      animation: mdc-checkbox-fade-out-background $mdc-checkbox-transition-duration * 2 linear;
+  .mdc-checkbox__native-control:focus ~ & {
+    @include mdc-checkbox__focus-indicator--focused_;
+  }
 
-      @include mdc-theme-dark(".mdc-checkbox") {
-        animation-name: mdc-checkbox-fade-out-background-dark;
-      }
-    }
+  .mdc-ripple-upgraded--unbounded & {
+    @include mdc-checkbox__focus-indicator--ripple-upgraded-unbounded_;
   }
+}
+
+.mdc-checkbox__native-control {
+  @include mdc-checkbox__native-control_;
 
-  &-unchecked-checked {
-    .mdc-checkbox__checkmark__path {
-      // Instead of delaying the animation, we simply multiply its length by 2 and begin the
-      // animation at 50% in order to prevent a flash of styles applied to a checked checkmark
-      // as the background is fading in before the animation begins.
-      animation: $mdc-checkbox-transition-duration * 2 linear 0s mdc-checkbox-unchecked-checked-checkmark-path;
-      transition: none;
-    }
+  &:disabled {
+    @include mdc-checkbox--disabled_;
   }
+}
+
+.mdc-checkbox__checkmark {
+  @include mdc-checkbox__checkmark_;
 
-  &-unchecked-indeterminate {
-    .mdc-checkbox__mixedmark {
-      animation: $mdc-checkbox-transition-duration linear 0s mdc-checkbox-unchecked-indeterminate-mixedmark;
-      transition: none;
-    }
+  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background & {
+    @include mdc-checkbox__checkmark--checked_;
   }
 
-  &-checked-unchecked {
-    .mdc-checkbox__checkmark__path {
-      animation: $mdc-checkbox-transition-duration linear 0s mdc-checkbox-checked-unchecked-checkmark-path;
-      transition: none;
-    }
+  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background & {
+    @include mdc-checkbox__checkmark--indeterminate_;
   }
+}
 
-  &-checked-indeterminate {
-    .mdc-checkbox__checkmark {
-      animation: $mdc-checkbox-transition-duration linear 0s mdc-checkbox-checked-indeterminate-checkmark;
-      transition: none;
-    }
+.mdc-checkbox__checkmark__path {
+  @include mdc-checkbox__checkmark__path_;
 
-    .mdc-checkbox__mixedmark {
-      animation: $mdc-checkbox-transition-duration linear 0s mdc-checkbox-checked-indeterminate-mixedmark;
-      transition: none;
-    }
+  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background &,
+  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background & {
+    @include mdc-checkbox__checkmark__path--marked_;
   }
+}
 
-  &-indeterminate-checked {
-    .mdc-checkbox__checkmark {
-      animation: $_mdc-checkbox-indeterminate-change-duration linear 0s mdc-checkbox-indeterminate-checked-checkmark;
-      transition: none;
-    }
+.mdc-checkbox__mixedmark {
+  @include mdc-checkbox__mixedmark_;
 
-    .mdc-checkbox__mixedmark {
-      animation: $_mdc-checkbox-indeterminate-change-duration linear 0s mdc-checkbox-indeterminate-checked-mixedmark;
-      transition: none;
-    }
+  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background & {
+    @include mdc-checkbox__mixedmark--checked_;
   }
 
-  &-indeterminate-unchecked {
-    .mdc-checkbox__mixedmark {
-      animation: $_mdc-checkbox-indeterminate-change-duration * .6 linear 0s mdc-checkbox-indeterminate-unchecked-mixedmark;
-      transition: none;
-    }
+  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background & {
+    @include mdc-checkbox__mixedmark--indeterminate_;
   }
 }
+
 // postcss-bem-linter: end

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

@@ -67,6 +67,8 @@ $mdc-list-side-padding: 16px;
 // postcss-bem-linter: define list-item
 
 .mdc-list-item {
+  @include mdc-typography-overflow-ellipsis;
+
   display: flex;
   align-items: center;
   justify-content: flex-start;

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

@@ -177,6 +177,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
     background: currentColor;
     content: "";
     opacity: 0;
+    pointer-events: none;
   }
 
   .mdc-list-item:focus::before {

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

@@ -176,7 +176,6 @@ $mdc-radio-transition-duration: 120ms;
 }
 
 .mdc-radio__native-control:disabled,
-fieldset:disabled .mdc-radio__native-control,
 [aria-disabled="true"] .mdc-radio__native-control {
   + .mdc-radio__background {
     cursor: default;

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

@@ -646,9 +646,11 @@
       border-bottom-style: dotted;
     }
 
+    // stylelint-disable selector-max-specificity
     &:invalid:not(:focus) {
       border-color: $mdc-textfield-error-on-light;
     }
+    // stylelint-enable selector-max-specificity
   }
 
   @include mdc-theme-dark {
@@ -664,9 +666,11 @@
         background-color: $mdc-textarea-disabled-background-on-dark;
       }
 
+      // stylelint-disable selector-max-specificity
       &:invalid:not(:focus) {
         border-color: $mdc-textfield-error-on-dark;
       }
+      // stylelint-enable selector-max-specificity
     }
   }
 }