material_components_web-sass 0.22.0 → 0.23.0

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

@@ -0,0 +1,33 @@
+//
+// 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/functions";
+
+$mdc-checkbox-container-keyframes-uid_: -1;
+
+@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);
+}
+
+@function mdc-checkbox-container-keyframes-uid_() {
+  $mdc-checkbox-container-keyframes-uid_: $mdc-checkbox-container-keyframes-uid_ + 1 !global;
+
+  @return $mdc-checkbox-container-keyframes-uid_;
+}

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

@@ -18,60 +18,42 @@
 @import "@material/theme/mixins";
 @import "./variables";
 
-@keyframes mdc-checkbox-fade-in-background {
-  0% {
-    border-color: $mdc-checkbox-border-color;
-    background-color: transparent;
-  }
-
-  50% {
-    @include mdc-theme-prop(border-color, primary);
-    @include mdc-theme-prop(background-color, primary);
-  }
-}
-
-@keyframes mdc-checkbox-fade-out-background {
-  0%,
-  80% {
-    @include mdc-theme-prop(border-color, primary);
-    @include mdc-theme-prop(background-color, primary);
-  }
-
-  100% {
-    border-color: $mdc-checkbox-border-color;
-    background-color: transparent;
-  }
-}
-
-@keyframes mdc-checkbox-fade-in-background-dark {
-  0% {
-    border-color: $mdc-checkbox-border-color-dark;
-    background-color: transparent;
-  }
-
-  50% {
-    @include mdc-theme-prop(border-color, primary);
-    @include mdc-theme-prop(background-color, primary);
-  }
-}
-
-@keyframes mdc-checkbox-fade-out-background-dark {
-  0%,
-  80% {
-    @include mdc-theme-prop(border-color, primary);
-    @include mdc-theme-prop(background-color, primary);
-  }
-
-  100% {
-    border-color: $mdc-checkbox-border-color-dark;
-    background-color: transparent;
+@mixin mdc-checkbox-container-keyframes_(
+  $from-stroke-color,
+  $to-stroke-color,
+  $from-fill-color,
+  $to-fill-color,
+  $uid) {
+  @keyframes mdc-checkbox-fade-in-background-#{$uid} {
+    0% {
+      @include mdc-theme-prop(border-color, $from-stroke-color);
+      @include mdc-theme-prop(background-color, $from-fill-color);
+    }
+
+    50% {
+      @include mdc-theme-prop(border-color, $to-stroke-color);
+      @include mdc-theme-prop(background-color, $to-fill-color);
+    }
+  }
+
+  @keyframes mdc-checkbox-fade-out-background-#{$uid} {
+    0%,
+    80% {
+      @include mdc-theme-prop(border-color, $to-stroke-color);
+      @include mdc-theme-prop(background-color, $to-fill-color);
+    }
+
+    100% {
+      @include mdc-theme-prop(border-color, $from-stroke-color);
+      @include mdc-theme-prop(background-color, $from-fill-color);
+    }
   }
 }
 
 @keyframes mdc-checkbox-unchecked-checked-checkmark-path {
   0%,
   50% {
-    stroke-dashoffset: $_mdc-checkbox-mark-path-length;
+    stroke-dashoffset: $mdc-checkbox-mark-path-length_;
   }
 
   50% {
@@ -107,7 +89,7 @@
 
   to {
     opacity: 0;
-    stroke-dashoffset: $_mdc-checkbox-mark-path-length * -1;
+    stroke-dashoffset: $mdc-checkbox-mark-path-length_ * -1;
   }
 }
 
@@ -126,7 +108,7 @@
 
 @keyframes mdc-checkbox-indeterminate-checked-checkmark {
   from {
-    animation-timing-function: $_mdc-checkbox-indeterminate-checked-easing-function;
+    animation-timing-function: $mdc-checkbox-indeterminate-checked-easing-function_;
     transform: rotate(45deg);
     opacity: 0;
   }
@@ -152,7 +134,7 @@
 
 @keyframes mdc-checkbox-indeterminate-checked-mixedmark {
   from {
-    animation-timing-function: $_mdc-checkbox-indeterminate-checked-easing-function;
+    animation-timing-function: $mdc-checkbox-indeterminate-checked-easing-function_;
     transform: rotate(0deg);
     opacity: 1;
   }

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

@@ -0,0 +1,395 @@
+//
+// 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/functions";
+@import "@material/ripple/mixins";
+@import "@material/rtl/mixins";
+@import "./functions";
+@import "./keyframes";
+@import "./variables";
+
+//
+// Public
+//
+
+@mixin mdc-checkbox-container-colors(
+  $unmarked-stroke-color: $mdc-checkbox-border-color,
+  $unmarked-fill-color: transparent,
+  $marked-fill-color: $mdc-checkbox-baseline-theme-color,
+  $generate-keyframes: true) {
+  @include mdc-checkbox-unmarked-background-selector-enabled_ {
+    @include mdc-theme-prop(border-color, $unmarked-stroke-color);
+    @include mdc-theme-prop(background-color, $unmarked-fill-color);
+  }
+
+  @include mdc-checkbox-marked-background-selector-enabled_ {
+    @include mdc-theme-prop(border-color, $marked-fill-color);
+    @include mdc-theme-prop(background-color, $marked-fill-color);
+  }
+
+  @if $generate-keyframes {
+    $uid: mdc-checkbox-container-keyframes-uid_();
+
+    @include mdc-checkbox-container-keyframes_(
+      $from-stroke-color: $unmarked-stroke-color,
+      $to-stroke-color: $marked-fill-color,
+      $from-fill-color: $unmarked-fill-color,
+      $to-fill-color: $marked-fill-color,
+      $uid: $uid);
+
+    &.mdc-checkbox--anim {
+      &-unchecked-checked,
+      &-unchecked-indeterminate {
+        .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
+          animation-name: mdc-checkbox-fade-in-background-#{$uid};
+        }
+      }
+
+      &-checked-unchecked,
+      &-indeterminate-unchecked {
+        .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
+          animation-name: mdc-checkbox-fade-out-background-#{$uid};
+        }
+      }
+    }
+  }
+}
+
+@mixin mdc-checkbox-ink-color($color) {
+  .mdc-checkbox__checkmark__path {
+    // !important is needed here because a stroke must be set as an attribute on the SVG in order
+    // for line animation to work properly.
+    @include mdc-theme-prop(stroke, $color, $important: true);
+  }
+
+  .mdc-checkbox__mixedmark {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-checkbox-focus-indicator-color($color) {
+  // The ::before element is used as a focus indicator for the checkbox
+  .mdc-checkbox__background::before {
+    @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
+  }
+}
+
+@mixin mdc-checkbox-ripple($ripple-config) {
+  $ripple-config: map-merge((opacity: $mdc-checkbox-ripple-opacity, radius: 50%), $ripple-config);
+
+  @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
+  @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
+}
+
+//
+// Private
+//
+
+@mixin mdc-checkbox-base_ {
+  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;
+
+  @include mdc-checkbox-unmarked-background-selector-disabled_ {
+    @include mdc-theme-prop(border-color, $mdc-checkbox-disabled-color);
+  }
+
+  @include mdc-checkbox-marked-background-selector-disabled_ {
+    @include mdc-theme-prop(border-color, transparent);
+    @include mdc-theme-prop(background-color, $mdc-checkbox-disabled-color);
+  }
+
+  @include mdc-theme-dark {
+    @include mdc-checkbox-unmarked-background-selector-disabled_ {
+      @include mdc-theme-prop(border-color, $mdc-checkbox-disabled-color-dark);
+    }
+
+    @include mdc-checkbox-marked-background-selector-disabled_ {
+      @include mdc-theme-prop(background-color, $mdc-checkbox-disabled-color-dark);
+    }
+  }
+}
+
+@mixin mdc-checkbox--disabled_ {
+  cursor: default;
+  pointer-events: none;
+}
+
+@mixin mdc-checkbox__child--cover-parent_ {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+@mixin mdc-checkbox__child--upgraded_ {
+  // 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;
+}
+
+// Animation
+
+@mixin mdc-checkbox--anim_ {
+  $mdc-checkbox-indeterminate-change-duration_: 500ms;
+
+  // stylelint-disable selector-max-type
+
+  &-unchecked-checked,
+  &-unchecked-indeterminate,
+  &-checked-unchecked,
+  &-indeterminate-unchecked {
+    .mdc-checkbox__background {
+      animation-duration: $mdc-checkbox-transition-duration * 2;
+      animation-timing-function: linear;
+    }
+  }
+
+  &-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;
+    }
+  }
+
+  &-unchecked-indeterminate {
+    .mdc-checkbox__mixedmark {
+      animation: $mdc-checkbox-transition-duration linear 0s mdc-checkbox-unchecked-indeterminate-mixedmark;
+      transition: none;
+    }
+  }
+
+  &-checked-unchecked {
+    .mdc-checkbox__checkmark__path {
+      animation: $mdc-checkbox-transition-duration linear 0s mdc-checkbox-checked-unchecked-checkmark-path;
+      transition: none;
+    }
+  }
+
+  &-checked-indeterminate {
+    .mdc-checkbox__checkmark {
+      animation: $mdc-checkbox-transition-duration linear 0s mdc-checkbox-checked-indeterminate-checkmark;
+      transition: none;
+    }
+
+    .mdc-checkbox__mixedmark {
+      animation: $mdc-checkbox-transition-duration linear 0s mdc-checkbox-checked-indeterminate-mixedmark;
+      transition: none;
+    }
+  }
+
+  &-indeterminate-checked {
+    .mdc-checkbox__checkmark {
+      animation: $mdc-checkbox-indeterminate-change-duration_ linear 0s mdc-checkbox-indeterminate-checked-checkmark;
+      transition: none;
+    }
+
+    .mdc-checkbox__mixedmark {
+      animation: $mdc-checkbox-indeterminate-change-duration_ linear 0s mdc-checkbox-indeterminate-checked-mixedmark;
+      transition: none;
+    }
+  }
+
+  &-indeterminate-unchecked {
+    .mdc-checkbox__mixedmark {
+      animation: $mdc-checkbox-indeterminate-change-duration_ * .6 linear 0s mdc-checkbox-indeterminate-unchecked-mixedmark;
+      transition: none;
+    }
+  }
+
+  // stylelint-enable selector-max-type
+}
+
+// Background
+
+@mixin mdc-checkbox-unmarked-background-selector-enabled_ {
+  // stylelint-disable-next-line selector-max-specificity
+  .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
+    @content;
+  }
+}
+
+@mixin mdc-checkbox-unmarked-background-selector-disabled_ {
+  // stylelint-disable-next-line selector-max-specificity
+  .mdc-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
+    @content;
+  }
+}
+
+@mixin mdc-checkbox-marked-background-selector-enabled_ {
+  .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
+  .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
+    @content;
+  }
+}
+
+@mixin mdc-checkbox-marked-background-selector-disabled_ {
+  .mdc-checkbox__native-control:disabled:checked ~ .mdc-checkbox__background,
+  .mdc-checkbox__native-control:disabled:indeterminate ~ .mdc-checkbox__background {
+    @content;
+  }
+}
+
+@mixin mdc-checkbox__background_ {
+  @include mdc-checkbox__child--cover-parent_;
+  @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-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin
+  border: $mdc-checkbox-border-width solid currentColor;
+  border-radius: 2px;
+  background-color: transparent;
+  pointer-events: none;
+  will-change: background-color, border-color;
+}
+
+@mixin mdc-checkbox__background--marked_ {
+  transition:
+    mdc-checkbox-transition-enter(border-color),
+    mdc-checkbox-transition-enter(background-color);
+}
+
+// Focus indicator
+
+@mixin mdc-checkbox__focus-indicator_ {
+  @include mdc-checkbox__child--cover-parent_;
+
+  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;
+}
+
+@mixin mdc-checkbox__focus-indicator--focused_ {
+  transform: scale(2.75, 2.75);
+  transition:
+    mdc-checkbox-transition-enter(opacity, 0ms, 80ms),
+    mdc-checkbox-transition-enter(transform, 0ms, 80ms);
+  opacity: $mdc-checkbox-focus-indicator-opacity;
+}
+
+@mixin mdc-checkbox__focus-indicator--ripple-upgraded-unbounded_ {
+  content: none;
+}
+
+// Native input
+
+@mixin mdc-checkbox__native-control_ {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+// Check mark
+
+@mixin mdc-checkbox__checkmark_ {
+  @include mdc-checkbox__child--cover-parent_;
+
+  width: 100%;
+  transition: mdc-checkbox-transition-exit(opacity, 0ms, $mdc-checkbox-transition-duration * 2);
+  opacity: 0;
+
+  .mdc-checkbox--upgraded & {
+    opacity: 1;
+  }
+}
+
+@mixin mdc-checkbox__checkmark--checked_ {
+  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;
+}
+
+@mixin mdc-checkbox__checkmark--indeterminate_ {
+  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;
+}
+
+// Check mark path
+
+@mixin mdc-checkbox__checkmark__path_ {
+  transition:
+    mdc-checkbox-transition-exit(
+      stroke-dashoffset,
+      0ms,
+      $mdc-checkbox-transition-duration * 2
+    );
+  stroke-width: $mdc-checkbox-mark-stroke-size * 1.3;
+  stroke-dashoffset: $mdc-checkbox-mark-path-length_;
+  stroke-dasharray: $mdc-checkbox-mark-path-length_;
+}
+
+@mixin mdc-checkbox__checkmark__path--marked_ {
+  stroke-dashoffset: 0;
+}
+
+// Mixed mark
+
+@mixin mdc-checkbox__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);
+  opacity: 0;
+}
+
+@mixin mdc-checkbox__mixedmark--checked_ {
+  transform: scaleX(1) rotate(-45deg);
+}
+
+@mixin mdc-checkbox__mixedmark--indeterminate_ {
+  transform: scaleX(1) rotate(0deg);
+  opacity: 1;
+}