343 lines
11 KiB
SCSS
343 lines
11 KiB
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
|
||
|
|
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.
|
||
|
|
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|