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

Commit 756d8a6

Browse files
authored
fix(ripple): Avoid duplicating common styles (#1463)
1 parent 231109e commit 756d8a6

File tree

2 files changed

+58
-44
lines changed

2 files changed

+58
-44
lines changed

packages/mdc-ripple/_keyframes.scss

+31-29
Original file line numberDiff line numberDiff line change
@@ -14,43 +14,45 @@
1414
// limitations under the License.
1515
//
1616

17-
/** MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them. */
17+
// MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them.
1818

1919
@import "@material/animation/variables";
2020

21-
@keyframes mdc-ripple-fg-radius-in {
22-
from {
23-
animation-timing-function: $mdc-animation-standard-curve-timing-function;
24-
// NOTE: For these keyframes, we do not need custom property fallbacks because they are only
25-
// used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
26-
// that custom properties are supported within the browser before adding this class, we can
27-
// safely use them without a fallback.
28-
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
21+
@mixin mdc-ripple-keyframes_ {
22+
@keyframes mdc-ripple-fg-radius-in {
23+
from {
24+
animation-timing-function: $mdc-animation-standard-curve-timing-function;
25+
// NOTE: For these keyframes, we do not need custom property fallbacks because they are only
26+
// used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
27+
// that custom properties are supported within the browser before adding this class, we can
28+
// safely use them without a fallback.
29+
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
30+
}
31+
32+
to {
33+
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
34+
}
2935
}
3036

31-
to {
32-
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
33-
}
34-
}
35-
36-
@keyframes mdc-ripple-fg-opacity-in {
37-
from {
38-
animation-timing-function: linear;
39-
opacity: 0;
40-
}
37+
@keyframes mdc-ripple-fg-opacity-in {
38+
from {
39+
animation-timing-function: linear;
40+
opacity: 0;
41+
}
4142

42-
to {
43-
opacity: 1;
43+
to {
44+
opacity: 1;
45+
}
4446
}
45-
}
4647

47-
@keyframes mdc-ripple-fg-opacity-out {
48-
from {
49-
animation-timing-function: linear;
50-
opacity: 1;
51-
}
48+
@keyframes mdc-ripple-fg-opacity-out {
49+
from {
50+
animation-timing-function: linear;
51+
opacity: 1;
52+
}
5253

53-
to {
54-
opacity: 0;
54+
to {
55+
opacity: 0;
56+
}
5557
}
5658
}

packages/mdc-ripple/_mixins.scss

+27-15
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,33 @@
1818
@import "@material/theme/variables";
1919
@import "./keyframes";
2020

21+
// Ensure that styles needed by any component using MDC Ripple are emitted, but only once.
22+
// (Every component using MDC Ripple imports these mixins, but doesn't necessarily import mdc-ripple.scss.)
23+
24+
// This variable is not intended to be overridden externally; it uses !default to avoid being reset
25+
// every time this file is imported.
26+
$mdc-ripple-common-styles-emitted_: false !default;
27+
28+
@if not $mdc-ripple-common-styles-emitted_ {
29+
$mdc-ripple-common-styles-emitted_: true;
30+
31+
@include mdc-ripple-keyframes_;
32+
33+
// Styles used to detect buggy behavior of CSS custom properties in Edge.
34+
// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
35+
// This is included in _mixins.scss rather than mdc-ripple.scss so that it will be
36+
// present for other components which rely on ripple as well as mdc-ripple itself.
37+
.mdc-ripple-surface--test-edge-var-bug {
38+
--mdc-ripple-surface-test-edge-var: 1px solid #000;
39+
40+
visibility: hidden;
41+
42+
&::before {
43+
border: var(--mdc-ripple-surface-test-edge-var);
44+
}
45+
}
46+
}
47+
2148
//
2249
// Legacy mixin APIs, to be removed after converting all components to use new APIs
2350
//
@@ -378,18 +405,3 @@
378405
left: var(--mdc-ripple-left, 0);
379406
}
380407
}
381-
382-
// Styles used to detect buggy behavior of CSS custom properties in Edge.
383-
// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
384-
// This is included in _mixins.scss rather than mdc-ripple.scss so that it will be
385-
// present for other components which rely on ripple as well as mdc-ripple itself.
386-
387-
.mdc-ripple-surface--test-edge-var-bug {
388-
--mdc-ripple-surface-test-edge-var: 1px solid #000;
389-
390-
visibility: hidden;
391-
392-
&::before {
393-
border: var(--mdc-ripple-surface-test-edge-var);
394-
}
395-
}

0 commit comments

Comments
 (0)