Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

fix(ripple): Provide fallbacks for all custom properties #367

Merged
merged 2 commits into from
Mar 1, 2017
Merged

fix(ripple): Provide fallbacks for all custom properties #367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e6e5aff
fix(ripple): Provide fallbacks for all custom properties
BBosman Feb 28, 2017
796e4c0
Merge branch 'master' into var
traviskaufman Mar 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions packages/mdc-ripple/_keyframes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,14 @@

@keyframes mdc-ripple-fg-radius-in {
from {
transform: translate(var(--mdc-ripple-fg-translate-start)) scale(1);
transform: translate(0) scale(1);
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
animation-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
}

to {
transform: translate(var(--mdc-ripple-fg-translate-end)) scale(var(--mdc-ripple-fg-scale));
transform: translate(0) scale(0);
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 0));
}
}

Expand All @@ -52,10 +54,12 @@

@keyframes mdc-ripple-fg-unbounded-transform-deactivate {
from {
transform: var(--mdc-ripple-fg-approx-xf);
transform: 0;
transform: var(--mdc-ripple-fg-approx-xf, 0);
}

to {
transform: scale(var(--mdc-ripple-fg-scale));
transform: scale(0);
transform: scale(var(--mdc-ripple-fg-scale, 0));
}
}
20 changes: 20 additions & 0 deletions packages/mdc-ripple/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
// 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: $theme-value;
$css-var: var(--mdc-theme-#{$theme-style}, $theme-value);

background-color: rgba($theme-value, $opacity);
Expand Down Expand Up @@ -116,6 +117,7 @@
left: calc(50% - #{$radius});
width: $radius * 2;
height: $radius * 2;
transform: scale(0);
transform: scale(var(--mdc-ripple-fg-scale, 0));
}

Expand All @@ -136,10 +138,15 @@
}

&.mdc-ripple-upgraded--unbounded#{$pseudo} {
top: calc(50% - #{$radius / 2});
top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));
left: calc(50% - #{$radius / 2});
left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
width: $radius;
width: var(--mdc-ripple-fg-size, $radius);
height: $radius;
height: var(--mdc-ripple-fg-size, $radius);
transform: scale(0);
transform: scale(var(--mdc-ripple-fg-scale, 0));
}
}
Expand Down Expand Up @@ -181,7 +188,9 @@
&#{$pseudo} {
top: 0;
left: 0;
width: $radius;
width: var(--mdc-ripple-fg-size, $radius);
height: $radius;
height: var(--mdc-ripple-fg-size, $radius);
transform: scale(0);
transform-origin: center center;
Expand All @@ -194,9 +203,13 @@
}

&.mdc-ripple-upgraded--unbounded#{$pseudo} {
top: 0;
top: var(--mdc-ripple-top, 0);
left: 0;
left: var(--mdc-ripple-left, 0);
width: $radius;
width: var(--mdc-ripple-fg-size, $radius);
height: $radius;
height: var(--mdc-ripple-fg-size, $radius);
transform: scale(0);
transform-origin: center center;
Expand All @@ -208,14 +221,21 @@
}

&.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-activation#{$pseudo} {
transform: scale(0);
transform: scale(var(--mdc-ripple-fg-scale, 0));
transition:
opacity 110ms linear,
transform 0 linear 80ms;
transition:
opacity 110ms linear,
transform var(--mdc-ripple-fg-unbounded-transform-duration, 0) linear 80ms;
opacity: 1;
}

&.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-deactivation#{$pseudo} {
animation:
mdc-ripple-fg-unbounded-opacity-deactivate 0 linear,
mdc-ripple-fg-unbounded-transform-deactivate 0 $mdc-animation-fast-out-slow-in-timing-function;
animation:
mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration, 0) linear,
mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration, 0) $mdc-animation-fast-out-slow-in-timing-function;
Expand Down