_ripple.scss

//
// Copyright 2016 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

// stylelint-disable selector-class-pattern --
// Selector '.mdc-*' should only be used in this project.

@use 'sass:math';
@use 'sass:color';
@use 'sass:map';
@use '@material/animation/functions' as functions2;
@use '@material/animation/variables' as variables2;
@use '@material/base/mixins' as base-mixins;
@use '@material/theme/custom-properties';
@use '@material/feature-targeting/feature-targeting';
@use '@material/rtl/rtl';
@use '@material/theme/theme';
@use './ripple-theme';

@mixin core-styles($query: feature-targeting.all()) {
  @include static-styles($query: $query);

  .mdc-ripple-surface {
    @include ripple-theme.states($query: $query);
  }
}

@mixin static-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-ripple-surface {
    @include surface($query: $query);
    @include radius-bounded($query: $query);
    @include surface-styles($query: $query);
  }

  .mdc-ripple-surface[data-mdc-ripple-is-unbounded],
  .mdc-ripple-upgraded--unbounded {
    @include radius-unbounded($query: $query);
    @include unbounded-styles($query: $query);
  }
}

/// Sets all states (including hover, focus, press, activated and selected) with
/// given color as base color.
///
/// This mixin is for internal use only. Use `ripple-theme.states($color)` mixin
/// to set interactive states (hover, focus & press) color.
///
/// @param {Color|String} $color - Target base color. Can be valid CSS color or
///     a color string literal (i.e., `primary`, `secondary`, etc).
@mixin states-for-color($color, $query: feature-targeting.all()) {
  @include ripple-theme.states($color, $query: $query);
  @include ripple-theme.states-activated($color, $query: $query);
  @include ripple-theme.states-selected($color, $query: $query);
}

@mixin surface-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  @include feature-targeting.targets($feat-structure) {
    position: relative;
    outline: none;
    overflow: hidden;
  }
}

@mixin unbounded-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);
  @include feature-targeting.targets($feat-structure) {
    overflow: visible;
  }
}

@mixin common($query: feature-targeting.all()) {
  $feat-animation: feature-targeting.create-target($query, animation);

  // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.
  // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import
  // mdc-ripple.scss.)
  @include feature-targeting.targets($feat-animation) {
    @include base-mixins.emit-once('mdc-ripple/common/animation') {
      @include keyframes_;
    }
  }
}

@mixin surface(
  $query: feature-targeting.all(),
  $ripple-target: '&',
  $include-will-change: true // TODO(b/151931961): Remove once resolved
) {
  $feat-animation: feature-targeting.create-target($query, animation);
  $feat-structure: feature-targeting.create-target($query, structure);

  @include feature-targeting.targets($feat-structure) {
    --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);
    // TODO(b/151931961): Remove the following block once resolved
    @if $include-will-change {
      will-change: transform, opacity;
    }
  }

  #{$ripple-target}::before,
  #{$ripple-target}::after {
    @include feature-targeting.targets($feat-structure) {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      content: '';
    }
  }

  #{$ripple-target}::before {
    @include feature-targeting.targets($feat-animation) {
      // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state
      transition: opacity ripple-theme.$states-wash-duration linear,
        background-color ripple-theme.$states-wash-duration linear;
    }

    @include feature-targeting.targets($feat-structure) {
      // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements
      @include theme.property(
        z-index,
        custom-properties.create(--mdc-ripple-z-index, 1)
      );
    }
  }

  #{$ripple-target}::after {
    @include feature-targeting.targets($feat-structure) {
      @include theme.property(
        z-index,
        custom-properties.create(--mdc-ripple-z-index, 0)
      );
    }
  }

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

  &.mdc-ripple-upgraded {
    #{$ripple-target}::before {
      @include feature-targeting.targets($feat-structure) {
        transform: scale(var(--mdc-ripple-fg-scale, 1));
      }
    }

    #{$ripple-target}::after {
      @include feature-targeting.targets($feat-structure) {
        top: 0;
        @include rtl.ignore-next-line();
        left: 0;
        transform: scale(0);
        transform-origin: center center;
      }
    }
  }

  &.mdc-ripple-upgraded--unbounded {
    #{$ripple-target}::after {
      @include feature-targeting.targets($feat-structure) {
        top: var(--mdc-ripple-top, 0);
        @include rtl.ignore-next-line();
        left: var(--mdc-ripple-left, 0);
      }
    }
  }

  &.mdc-ripple-upgraded--foreground-activation {
    #{$ripple-target}::after {
      @include feature-targeting.targets($feat-animation) {
        animation: mdc-ripple-fg-radius-in ripple-theme.$translate-duration
            forwards,
          mdc-ripple-fg-opacity-in ripple-theme.$fade-in-duration forwards;
      }
    }
  }

  &.mdc-ripple-upgraded--foreground-deactivation {
    #{$ripple-target}::after {
      @include feature-targeting.targets($feat-animation) {
        animation: mdc-ripple-fg-opacity-out ripple-theme.$fade-out-duration;
      }

      @include feature-targeting.targets($feat-structure) {
        // Retain transform from mdc-ripple-fg-radius-in activation
        @include rtl.ignore-next-line();
        transform: translate(var(--mdc-ripple-fg-translate-end, 0))
          scale(var(--mdc-ripple-fg-scale, 1));
      }
    }
  }
}

@mixin radius-bounded(
  $radius: 100%,
  $query: feature-targeting.all(),
  $ripple-target: '&'
) {
  $feat-struture: feature-targeting.create-target($query, structure);

  #{$ripple-target}::before,
  #{$ripple-target}::after {
    @include feature-targeting.targets($feat-struture) {
      top: calc(50% - #{$radius});
      @include rtl.ignore-next-line();
      left: calc(50% - #{$radius});
      width: $radius * 2;
      height: $radius * 2;
    }
  }

  &.mdc-ripple-upgraded {
    #{$ripple-target}::after {
      @include feature-targeting.targets($feat-struture) {
        width: var(--mdc-ripple-fg-size, $radius);
        height: var(--mdc-ripple-fg-size, $radius);
      }
    }
  }
}

@mixin radius-unbounded(
  $radius: 100%,
  $query: feature-targeting.all(),
  $ripple-target: '&'
) {
  $feat-struture: feature-targeting.create-target($query, structure);

  #{$ripple-target}::before,
  #{$ripple-target}::after {
    @include feature-targeting.targets($feat-struture) {
      top: calc(50% - #{math.div($radius, 2)});
      @include rtl.ignore-next-line();
      left: calc(50% - #{math.div($radius, 2)});
      width: $radius;
      height: $radius;
    }
  }

  &.mdc-ripple-upgraded {
    #{$ripple-target}::before,
    #{$ripple-target}::after {
      @include feature-targeting.targets($feat-struture) {
        top: var(--mdc-ripple-top, calc(50% - #{math.div($radius, 2)}));
        @include rtl.ignore-next-line();
        left: var(--mdc-ripple-left, calc(50% - #{math.div($radius, 2)}));
        width: var(--mdc-ripple-fg-size, $radius);
        height: var(--mdc-ripple-fg-size, $radius);
      }
    }

    #{$ripple-target}::after {
      @include feature-targeting.targets($feat-struture) {
        width: var(--mdc-ripple-fg-size, $radius);
        height: var(--mdc-ripple-fg-size, $radius);
      }
    }
  }
}

// Common styles for a ripple target element.
// Used for components which have an inner ripple target element.
@mixin target-common($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  @include feature-targeting.targets($feat-structure) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // Necessary for clicks on other inner elements (e.g. close icon in chip)
    // to go through.
    pointer-events: none;
  }
}

@mixin keyframes_ {
  @keyframes mdc-ripple-fg-radius-in {
    from {
      animation-timing-function: variables2.$standard-curve-timing-function;
      // NOTE: For these keyframes, we do not need custom property fallbacks because they are only
      // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
      // that custom properties are supported within the browser before adding this class, we can
      // safely use them without a fallback.
      @include rtl.ignore-next-line();
      transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
    }

    to {
      @include rtl.ignore-next-line();
      transform: translate(var(--mdc-ripple-fg-translate-end, 0))
        scale(var(--mdc-ripple-fg-scale, 1));
    }
  }

  @keyframes mdc-ripple-fg-opacity-in {
    from {
      animation-timing-function: linear;
      opacity: 0;
    }

    to {
      opacity: var(--mdc-ripple-fg-opacity, 0);
    }
  }

  @keyframes mdc-ripple-fg-opacity-out {
    from {
      animation-timing-function: linear;
      opacity: var(--mdc-ripple-fg-opacity, 0);
    }

    to {
      opacity: 0;
    }
  }
}