_mixins.scss

//
// 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";
@import "@material/theme/mixins";
@import "./functions";
@import "./variables";

@mixin mdc-ripple-surface() {
  --mdc-ripple-fg-size: 0;
  --mdc-ripple-left: 0;
  --mdc-ripple-top: 0;
  --mdc-ripple-fg-scale: 1;
  --mdc-ripple-fg-translate-end: 0;
  --mdc-ripple-fg-translate-start: 0;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  will-change: transform, opacity;

  &::before,
  &::after {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: "";
  }

  &::before {
    transition: opacity $mdc-states-wash-duration linear;
    z-index: 1; // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements
  }

  // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)

  &.mdc-ripple-upgraded::before {
    transform: scale(var(--mdc-ripple-fg-scale, 1));
  }

  &.mdc-ripple-upgraded::after {
    top: 0;

    /* @noflip */
    left: 0;
    transform: scale(0);
    transform-origin: center center;
  }

  &.mdc-ripple-upgraded--unbounded::after {
    top: var(--mdc-ripple-top, 0);

    /* @noflip */
    left: var(--mdc-ripple-left, 0);
  }

  &.mdc-ripple-upgraded--foreground-activation::after {
    animation:
      $mdc-ripple-translate-duration mdc-ripple-fg-radius-in forwards,
      $mdc-ripple-fade-in-duration mdc-ripple-fg-opacity-in forwards;
  }

  &.mdc-ripple-upgraded--foreground-deactivation::after {
    animation: $mdc-ripple-fade-out-duration mdc-ripple-fg-opacity-out;
    // Retain transform from mdc-ripple-fg-radius-in activation
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  }
}

@mixin mdc-states-base-color($color) {
  // Opacity styles are here (rather than in mdc-ripple-surface) to ensure that opacity is re-initialized for
  // cases where this mixin is used to override another inherited use of itself,
  // without needing to re-include mdc-ripple-surface.
  &::before,
  &::after {
    @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
  }
}

@mixin mdc-states-hover-opacity($opacity) {
  // Background wash styles, for both CSS-only and upgraded stateful surfaces
  &:hover::before {
    opacity: $opacity;
  }
}

@mixin mdc-states-focus-opacity($opacity, $has-nested-focusable-element: false) {
  // Focus overrides hover by reusing the ::before pseudo-element.
  // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.
  // It is useful for cases where a component has a focusable element within the root node, e.g. text field,
  // but undesirable in general in case of nested stateful components.
  // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.
  $cssOnlyFocusSelector: if(
    $has-nested-focusable-element,
    "&:not(.mdc-ripple-upgraded):focus::before, &:not(.mdc-ripple-upgraded):focus-within::before",
    "&:not(.mdc-ripple-upgraded):focus::before"
  );

  #{$cssOnlyFocusSelector},
  &.mdc-ripple-upgraded--background-focused::before {
    // Note that this duration is only effective on focus, not blur
    transition-duration: 75ms;
    opacity: $opacity;
  }
}

@mixin mdc-states-press-opacity($opacity) {
  // Styles for non-upgraded (CSS-only) stateful surfaces

  &:not(.mdc-ripple-upgraded) {
    // Apply press additively by using the ::after pseudo-element
    &::after {
      transition: opacity $mdc-ripple-fade-out-duration linear;
    }

    &:active::after {
      transition-duration: $mdc-ripple-fade-in-duration;
      opacity: $opacity;
    }
  }

  &.mdc-ripple-upgraded {
    --mdc-ripple-fg-opacity: #{$opacity};
  }
}

// Simple mixin for base states which automatically selects opacity values based on whether the ink color is
// light or dark.
@mixin mdc-states($color: black, $has-nested-focusable-element: false) {
  @include mdc-states-interactions_($color, $has-nested-focusable-element);
}

// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is
// light or dark.
@mixin mdc-states-activated($color, $has-nested-focusable-element: false) {
  $activated-opacity: mdc-states-opacity($color, activated);

  &--activated {
    // Stylelint seems to think that '&' qualifies as a type selector here?
    // stylelint-disable-next-line selector-max-type
    &::before {
      opacity: $activated-opacity;
    }

    @include mdc-states-interactions_($color, $has-nested-focusable-element, $activated-opacity);
  }
}

// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is
// light or dark.
@mixin mdc-states-selected($color, $has-nested-focusable-element: false) {
  $selected-opacity: mdc-states-opacity($color, selected);

  &--selected {
    // stylelint-disable-next-line selector-max-type
    &::before {
      opacity: $selected-opacity;
    }

    @include mdc-states-interactions_($color, $has-nested-focusable-element, $selected-opacity);
  }
}

@mixin mdc-ripple-radius-bounded($radius: 100%) {
  &::before,
  &::after {
    top: calc(50% - #{$radius});

    /* @noflip */
    left: calc(50% - #{$radius});
    width: $radius * 2;
    height: $radius * 2;
  }

  &.mdc-ripple-upgraded::after {
    width: var(--mdc-ripple-fg-size, $radius);
    height: var(--mdc-ripple-fg-size, $radius);
  }
}

@mixin mdc-ripple-radius-unbounded($radius: 100%) {
  &::before,
  &::after {
    top: calc(50% - #{$radius / 2});

    /* @noflip */
    left: calc(50% - #{$radius / 2});
    width: $radius;
    height: $radius;
  }

  &.mdc-ripple-upgraded::before,
  &.mdc-ripple-upgraded::after {
    top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));

    /* @noflip */
    left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
    width: var(--mdc-ripple-fg-size, $radius);
    height: var(--mdc-ripple-fg-size, $radius);
  }

  &.mdc-ripple-upgraded::after {
    width: var(--mdc-ripple-fg-size, $radius);
    height: var(--mdc-ripple-fg-size, $radius);
  }
}

@mixin mdc-states-interactions_($color, $has-nested-focusable-element, $opacity-modifier: 0) {
  @include mdc-states-base-color($color);
  @include mdc-states-hover-opacity(mdc-states-opacity($color, hover) + $opacity-modifier);
  @include mdc-states-focus-opacity(
    mdc-states-opacity($color, focus) + $opacity-modifier,
    $has-nested-focusable-element
  );
  @include mdc-states-press-opacity(mdc-states-opacity($color, press) + $opacity-modifier);
}