material_components_web-sass 0.1.1

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

@@ -0,0 +1,196 @@
+/**
+ * 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/variables";
+@import "./keyframes";
+@import "./variables";
+
+@function mdc-ripple-default-config_() {
+  @return (
+    pseudo: null,
+    radius: 100%,
+    base-color: black,
+    opacity: .06,
+    theme-style: null
+  );
+}
+
+@mixin mdc-ripple-base() {
+  --mdc-ripple-left: 0;
+  --mdc-ripple-top: 0;
+  --mdc-ripple-fg-size: 0;
+  --mdc-ripple-surface-height: 0;
+  --mdc-ripple-surface-width: 0;
+  --mdc-ripple-fg-unbounded-transform-duration: 0ms;
+  --mdc-ripple-xfo-x: center;
+  --mdc-ripple-xfo-y: center;
+  --mdc-ripple-fg-unbounded-opacity-duration: 0ms;
+  --mdc-ripple-fg-unbounded-transform-duration: 0ms;
+  --mdc-ripple-fg-approx-xf: 0;
+
+  will-change: transition, opacity;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+@mixin mdc-ripple-color_($config) {
+  /* stylelint-disable scss/dollar-variable-pattern */
+  $base-color: map-get($config, base-color);
+  $opacity: map-get($config, opacity);
+  $theme-style: map-get($config, theme-style);
+
+  /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
+  @if ($theme-style) {
+    $theme-value: map-get($mdc-theme-property-values, $theme-style);
+    $css-var: var(--mdc-theme-#{$theme-style}, $theme-value);
+    /* stylelint-enable scss/dollar-variable-pattern */
+
+    background-color: rgba($theme-value, $opacity);
+
+    // See: https://drafts.csswg.org/css-color/#modifying-colors
+    // While this is currently unsupported as of now, it will begin to work by default as browsers
+    // begin to implement the CSS 4 color spec.
+    @supports (background-color: color(green a(10%))) {
+      background-color: color(#{$css-var} a(#{percentage($opacity)}));
+    }
+  } @else {
+    background-color: rgba($base-color, $opacity);
+  }
+  /* stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after */
+}
+
+@mixin mdc-ripple-bg-base_($config) {
+  /* stylelint-disable scss/dollar-variable-pattern */
+  $radius: map-get($config, radius);
+  /* stylelint-enable scss/dollar-variable-pattern */
+
+  @include mdc-ripple-color_($config);
+
+  position: absolute;
+  top: calc(50% - #{$radius});
+  left: calc(50% - #{$radius});
+  width: $radius * 2;
+  height: $radius * 2;
+  transform: scale(1);
+  transition: opacity 200ms linear;
+  border-radius: 50%;
+  opacity: 0;
+  pointer-events: none;
+}
+
+@mixin mdc-ripple-bg($config: ()) {
+  /* stylelint-disable scss/dollar-variable-pattern */
+  $config: map-merge(mdc-ripple-default-config_(), $config);
+  $pseudo: map-get($config, pseudo);
+  /* stylelint-enable scss/dollar-variable-pattern */
+
+  /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
+  @if ($pseudo) {
+    &#{$pseudo} {
+      @include mdc-ripple-bg-base_($config);
+
+      content: "";
+    }
+  } @else {
+    @include mdc-ripple-bg-base_($config);
+  }
+  /* stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after */
+
+  &.mdc-ripple-upgraded--background-active#{$pseudo} {
+    opacity: .99999;
+  }
+
+  // When an element goes active, a foreground ripple will be triggered.
+  // Therefore, we adjust the transition duration for the correct "wind-
+  // up" animation.
+  &.mdc-ripple-upgraded--background-active:active#{$pseudo} {
+    transition-duration: 600ms;
+  }
+
+  &.mdc-ripple-upgraded--background-bounded-active-fill#{$pseudo} {
+    transition-duration: 120ms;
+    opacity: 1;
+  }
+
+  &.mdc-ripple-upgraded--unbounded#{$pseudo} {
+    top: var(--mdc-ripple-top);
+    left: var(--mdc-ripple-left);
+    width: var(--mdc-ripple-fg-size);
+    height: var(--mdc-ripple-fg-size);
+  }
+}
+
+@mixin mdc-ripple-fg-base_($config) {
+  @include mdc-ripple-color_($config);
+
+  position: absolute;
+  width: var(--mdc-ripple-fg-size);
+  height: var(--mdc-ripple-fg-size);
+  transform: scale(0);
+  transform-origin: center center;
+  border-radius: 50%;
+  opacity: 0;
+  pointer-events: none;
+}
+
+@mixin mdc-ripple-fg($config: ()) {
+  /* stylelint-disable scss/dollar-variable-pattern */
+  $config: map-merge(mdc-ripple-default-config_(), $config);
+  $pseudo: map-get($config, pseudo);
+  /* stylelint-enable scss/dollar-variable-pattern */
+
+  /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
+  @if ($pseudo) {
+    &#{$pseudo} {
+      @include mdc-ripple-fg-base_($config);
+
+      content: "";
+    }
+  } @else {
+    @include mdc-ripple-fg-base_($config);
+  }
+  /* stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after */
+
+  &:not(.mdc-ripple-upgraded--unbounded)#{$pseudo} {
+    top: calc(var(--mdc-ripple-top) - var(--mdc-ripple-fg-size) / 2);
+    left: calc(var(--mdc-ripple-left) - var(--mdc-ripple-fg-size) / 2);
+    transform-origin: center center;
+  }
+
+  &.mdc-ripple-upgraded--unbounded#{$pseudo} {
+    top: var(--mdc-ripple-top);
+    left: var(--mdc-ripple-left);
+    transform-origin: var(--mdc-ripple-xfo-x) var(--mdc-ripple-xfo-y);
+  }
+
+  &.mdc-ripple-upgraded--foreground-bounded-active-fill#{$pseudo} {
+    animation-fill-mode: forwards;
+    animation: 800ms mdc-ripple-fg-radius-in, 400ms mdc-ripple-fg-opacity-out;
+  }
+
+  &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-activation#{$pseudo} {
+    transform: scale(1);
+    transition:
+      opacity 110ms linear,
+      transform var(--mdc-ripple-fg-unbounded-transform-duration) linear 80ms;
+    opacity: 1;
+  }
+
+  &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-deactivation#{$pseudo} {
+    animation:
+      mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration) linear,
+      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration) $mdc-ripple-easing-fn;
+  }
+}

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

@@ -0,0 +1,17 @@
+/**
+ * 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-ripple-easing-fn: cubic-bezier(.157, .72, .386, .987);

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

@@ -0,0 +1,80 @@
+/**
+ * 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/theme/mixins";
+@import "./mixins";
+
+/* postcss-bem-linter: define ripple-surface */
+
+.mdc-ripple-surface {
+  position: relative;
+  outline: none;
+  overflow: hidden;
+
+  &[data-mdc-ripple-is-unbounded] {
+    overflow: visible;
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transition: mdc-animation-exit(opacity, 120ms);
+    border-radius: inherit;
+    background: currentColor;
+    content: "";
+    opacity: 0;
+  }
+
+  &:focus::before {
+    opacity: .12;
+  }
+
+  &:active::before {
+    opacity: .18;
+  }
+
+  &.mdc-ripple-upgraded {
+    @include mdc-ripple-base;
+    @include mdc-ripple-bg((pseudo: "::before"));
+    @include mdc-ripple-fg((pseudo: "::after"));
+  }
+
+  &--primary.mdc-ripple-upgraded {
+    &::before,
+    &::after {
+      @include mdc-theme-prop(background-color, primary);
+    }
+
+    @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+    @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+  }
+
+  &--accent.mdc-ripple-upgraded {
+    &::before,
+    &::after {
+      @include mdc-theme-prop(background-color, primary);
+    }
+
+    @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .14));
+    @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .14));
+  }
+}
+
+/* postcss-bem-linter: end */

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

@@ -0,0 +1,251 @@
+/**
+ * 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.
+ */
+
+/**
+ * Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout.
+ *
+ * Usage Example:
+ * ```scss
+ * .mdc-foo {
+ *   position: absolute;
+ *   left: 0;
+ *
+ *   @include mdc-rtl {
+ *     left: auto;
+ *     right: 0;
+ *   }
+ *
+ *   &__bar {
+ *     margin-left: 4px;
+ *     @include mdc-rtl(".mdc-foo") {
+ *       margin-left: auto;
+ *       margin-right: 4px;
+ *     }
+ *   }
+ * }
+ *
+ * .mdc-foo--mod {
+ *   padding-left: 4px;
+ *
+ *   @include mdc-rtl {
+ *     padding-left: auto;
+ *     padding-right: 4px;
+ *   }
+ * }
+ * ```
+ *
+ * Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work
+ * in most cases, it will in some cases lead to false negatives, e.g.
+ *
+ * ```html
+ * <html dir="rtl">
+ *   <!-- ... -->
+ *   <div dir="ltr">
+ *     <div class="mdc-foo">Styled incorrectly as RTL!</div>
+ *   </div>
+ * </html>
+ * ```
+ *
+ * In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this.
+ */
+@mixin mdc-rtl($root-selector: null) {
+  @if ($root-selector) {
+    @at-root {
+      [dir="rtl"] #{$root-selector} &,
+      #{$root-selector}[dir="rtl"] & {
+        @content;
+      }
+    }
+  }
+
+  @else {
+    [dir="rtl"] &,
+    &[dir="rtl"] {
+      @content;
+    }
+  }
+}
+
+/**
+ * Takes a base box-model property - e.g. margin / border / padding - along with a default
+ * direction and value, and emits rules which apply the value to the
+ * "<base-property>-<default-direction>" property by default, but flips the direction
+ * when within an RTL context.
+ *
+ * For example:
+ *
+ * ```scss
+ * .mdc-foo {
+ *   @include mdc-rtl-reflexive-box(margin, left, 8px);
+ * }
+ * ```
+ * is equivalent to:
+ *
+ * ```scss
+ * .mdc-foo {
+ *   margin-left: 8px;
+ *
+ *   @include mdc-rtl {
+ *     margin-right: 8px;
+ *     margin-left: 0;
+ *   }
+ * }
+ * ```
+ * whereas:
+ *
+ * ```scss
+ * .mdc-foo {
+ *   @include mdc-rtl-reflexive-box(margin, right, 8px);
+ * }
+ * ```
+ * is equivalent to:
+ *
+ * ```scss
+ * .mdc-foo {
+ *   margin-right: 8px;
+ *
+ *   @include mdc-rtl {
+ *     margin-right: 0;
+ *     margin-left: 8px;
+ *   }
+ * }
+ * ```
+ *
+ * You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`,
+ * e.g. `@include mdc-rtl-reflexive-box-property(margin, left, 8px, ".mdc-component")`.
+ *
+ * Note that this function will always zero out the original value in an RTL context. If you're
+ * trying to flip the values, use mdc-rtl-reflexive-property().
+ */
+@mixin mdc-rtl-reflexive-box($base-property, $default-direction, $value, $root-selector: null) {
+  /* stylelint-disable scss/dollar-variable-pattern */
+
+  @if (index((right, left), $default-direction) == null) {
+    @error "Invalid default direction #{default-direction}. Please specifiy either right or left";
+  }
+
+  $left-value: $value;
+  $right-value: 0;
+
+  @if ($default-direction == right) {
+    $left-value: 0;
+    $right-value: $value;
+  }
+
+  @include mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector);
+
+  /* stylelint-enable scss/dollar-variable-pattern */
+}
+
+/**
+ * Takes a base property and emits rules that assign <base-property>-left to <left-value> and
+ * <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.
+ * For example:
+ *
+ * ```scss
+ * .mdc-foo {
+ *   @include mdc-rtl-reflexive-property(margin, auto, 12px);
+ * }
+ * ```
+ * is equivalent to:
+ *
+ * ```scss
+ * .mdc-foo {
+ *   margin-left: auto;
+ *   margin-right: 12px;
+ *
+ *   @include mdc-rtl {
+ *     margin-left: 12px;
+ *     margin-right: auto;
+ *   }
+ * }
+ * ```
+ *
+ * A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`.
+ */
+@mixin mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector: null) {
+  /* stylelint-disable scss/dollar-variable-pattern */
+
+  $prop-left: #{$base-property}-left;
+  $prop-right: #{$base-property}-right;
+
+  @include mdc-rtl-reflexive_($prop-left, $left-value, $prop-right, $right-value, $root-selector);
+
+  /* stylelint-enable scss/dollar-variable-pattern */
+}
+
+/**
+ * Takes an argument specifying a horizontal position property (either "left" or "right") as well
+ * as a value, and applies that value to the specified position in a LTR context, and flips it in a
+ * RTL context. For example:
+ *
+ * ```scss
+ * .mdc-foo {
+ *   @include mdc-rtl-reflexive-position(left, 0);
+ *   position: absolute;
+ * }
+ * ```
+ * is equivalent to:
+ *
+ * ```scss
+ *  .mdc-foo {
+ *    position: absolute;
+ *    left: 0;
+ *    right: initial;
+ *
+ *    @include mdc-rtl {
+ *      right: 0;
+ *      left: initial;
+ *    }
+ *  }
+ * ```
+ * An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
+ */
+@mixin mdc-rtl-reflexive-position($pos, $value, $root-selector: null) {
+  /* stylelint-disable scss/dollar-variable-pattern */
+
+  @if (index((right, left), $pos) == null) {
+    @error "Invalid position #{pos}. Please specifiy either right or left";
+  }
+
+  $left-value: $value;
+  $right-value: initial;
+
+  @if ($pos == right) {
+    $right-value: $value;
+    $left-value: initial;
+  }
+
+  @include mdc-rtl-reflexive_(left, $left-value, right, $right-value, $root-selector);
+
+  /* stylelint-enable scss/dollar-variable-pattern */
+}
+
+@mixin mdc-rtl-reflexive_(
+  $left-property,
+  $left-value,
+  $right-property,
+  $right-value,
+  $root-selector: null
+) {
+  #{$left-property}: $left-value;
+  #{$right-property}: $right-value;
+
+  @include mdc-rtl($root-selector) {
+    #{$left-property}: $right-value;
+    #{$right-property}: $left-value;
+  }
+}