Skip to content

Commit

Permalink
feat(ripple): Remove old complex mixins (#1496)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: The existing MDC Ripple Sass mixins mdc-ripple-base, mdc-ripple-fg, and mdc-ripple-bg have been removed, replaced by the new easier-to-use mixins mdc-ripple-surface, mdc-ripple-color, and mdc-ripple-radius.
  • Loading branch information
@kfranqueiro
kfranqueiro authored Oct 27, 2017
1 parent 253fba0 commit 47c6859
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 275 deletions.
25 changes: 0 additions & 25 deletions packages/mdc-ripple/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,31 +70,6 @@ Mixin | Description
`mdc-ripple-color($color, $opacity)` | Adds styles for the color and opacity of the ripple effect
`mdc-ripple-radius($radius)` | Adds styles for the radius of the ripple effect,<br>for both bounded and unbounded ripples

#### Legacy Sass API

> Note: This API is deprecated and will be removed soon. Please use the APIs above instead, which establish the same styles with a simpler API.
All three of the following mixins are mandatory in order to fully style the ripple effect.

Mixin | Description
--- | ---
`mdc-ripple-base` | Adds base styles for a ripple surface
`mdc-ripple-bg($config)` | Adds styles for the ripple's background (i.e. fade effects)
`mdc-ripple-fg($config)` | Adds styles for the ripple's foreground (i.e. the ink wash)

##### Ripple Configuration Map

Both `mdc-ripple-bg` and `mdc-ripple-fg` take a `$config` map as an optional
argument, with which you can specify the following parameters:

| Parameter | Description | Default |
| --- | --- | --- |
| `pseudo` | The name of the pseudo-element you want to use to style the ripple. Using pseudo-elements to style ripples obviates the need for any extra DOM and is recommended. However, if given `null` it will style the element directly, rather than attaching styles to the pseudo element. | `null` |
| `radius` | For _bounded_ ripples, specifies radii of the ripple circles. Can be any valid numeric CSS unit. | `100%` |
| `theme-style` | When provided, will use a style specified by `mdc-theme` to provide colors to the ripple. For example, passing `(theme-style: primary)` would make the ripples the color of the theme's primary color. Note that there are some current limitations here. See [below](#caveat-theme-custom-variables) | `null` |
| `base-color` | The RGB color (_without_ an alpha component) of the ripple. This will only be used if `theme-style` isn't specified. | `black` |
| `opacity` | A unitless number from `0-1` specifying the opacity that either the `base-color` or the `theme-style` color will take on. | `.06` |

### Adding Ripple JS

First import the ripple JS.
Expand Down
271 changes: 21 additions & 250 deletions packages/mdc-ripple/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,235 +45,6 @@ $mdc-ripple-common-styles-emitted_: false !default;
}
}

//
// Legacy mixin APIs, to be removed after converting all components to use new APIs
//

@function mdc-ripple-default-config_() {
@return (
pseudo: null,
radius: 100%,
base-color: black,
opacity: .06,
theme-style: null
);
}

@mixin mdc-ripple-base() {
--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;

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

&:not(.mdc-ripple-upgraded) {
&:hover::before,
&:focus::before,
&:active::after {
transition-duration: 85ms;
opacity: .6;
}
}
}

@mixin mdc-ripple-color-legacy_($config) {
$base-color: map-get($config, base-color);
$opacity: map-get($config, opacity);
$theme-style: map-get($config, theme-style);

// 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);

/* @alternate */
$css-var: $theme-value;
$css-var: var(--mdc-theme-#{$theme-style}, $theme-value);

background-color: rgba($theme-value, $opacity);

// See: https://drafts.csswg.org/css-color/#modifying-colors
// While this is currently unsupported as of now, it will begin to work by default as browsers
// begin to implement the CSS 4 color spec.
@supports (background-color: color(green a(10%))) {
background-color: color(#{$css-var} a(#{percentage($opacity)}));
}
} @else {
background-color: rgba($base-color, $opacity);
}

// stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
}

@mixin mdc-ripple-bg-base_($config) {
$radius: map-get($config, radius);

@include mdc-ripple-color-legacy_($config);

position: absolute;
top: calc(50% - #{$radius});
left: calc(50% - #{$radius});
width: $radius * 2;
height: $radius * 2;
transition: opacity 250ms linear;
border-radius: 50%;
opacity: 0;
pointer-events: none;
}

@mixin mdc-ripple-bg($config: ()) {
$config: map-merge(mdc-ripple-default-config_(), $config);
$pseudo: map-get($config, pseudo);
$radius: map-get($config, radius);

// stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
@if ($pseudo) {
&#{$pseudo} {
@include mdc-ripple-bg-base_($config);

content: "";
}
} @else {
@include mdc-ripple-bg-base_($config);
}
// stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after

&.mdc-ripple-upgraded#{$pseudo} {
top: calc(50% - #{$radius});
left: calc(50% - #{$radius});
width: $radius * 2;
height: $radius * 2;

/* @alternate */
transform: scale(0);
transform: scale(var(--mdc-ripple-fg-scale, 0));
}

&.mdc-ripple-upgraded--background-focused#{$pseudo} {
opacity: .99999;
}

&.mdc-ripple-upgraded--background-active-fill#{$pseudo} {
transition-duration: 120ms;
opacity: 1;
}

&.mdc-ripple-upgraded--unbounded#{$pseudo} {
/* @alternate */
top: calc(50% - #{$radius / 2});
top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));

/* @alternate */
left: calc(50% - #{$radius / 2});
left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));

/* @alternate */
width: $radius;
width: var(--mdc-ripple-fg-size, $radius);

/* @alternate */
height: $radius;
height: var(--mdc-ripple-fg-size, $radius);

/* @alternate */
transform: scale(0);
transform: scale(var(--mdc-ripple-fg-scale, 0));
}
}

@mixin mdc-ripple-fg-base_($config) {
$radius: map-get($config, radius);

@include mdc-ripple-color-legacy_($config);

position: absolute;
top: calc(50% - #{$radius});
left: calc(50% - #{$radius});
width: $radius * 2;
height: $radius * 2;
transition: opacity 250ms linear;
border-radius: 50%;
opacity: 0;
pointer-events: none;
}

@mixin mdc-ripple-fg($config: ()) {
$config: map-merge(mdc-ripple-default-config_(), $config);
$pseudo: map-get($config, pseudo);
$radius: map-get($config, radius);

// stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
@if ($pseudo) {
&#{$pseudo} {
@include mdc-ripple-fg-base_($config);

content: "";
}
} @else {
@include mdc-ripple-fg-base_($config);
}
// stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after

&.mdc-ripple-upgraded {
&#{$pseudo} {
top: 0;
left: 0;

/* @alternate */
width: $radius;
width: var(--mdc-ripple-fg-size, $radius);

/* @alternate */
height: $radius;
height: var(--mdc-ripple-fg-size, $radius);
transform: scale(0);
transform-origin: center center;
opacity: 0;
}
}

&:not(.mdc-ripple-upgraded--unbounded)#{$pseudo} {
transform-origin: center center;
}

&.mdc-ripple-upgraded--unbounded#{$pseudo} {
/* @alternate */
top: 0;
top: var(--mdc-ripple-top, 0);

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

/* @alternate */
width: $radius;
width: var(--mdc-ripple-fg-size, $radius);

/* @alternate */
height: $radius;
height: var(--mdc-ripple-fg-size, $radius);
transform: scale(0);
transform-origin: center center;
}

&.mdc-ripple-upgraded--foreground-activation#{$pseudo} {
animation: 300ms mdc-ripple-fg-radius-in forwards, 83ms mdc-ripple-fg-opacity-in forwards;
}

&.mdc-ripple-upgraded--foreground-deactivation#{$pseudo} {
animation: 83ms 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));
}
}

//
// New mixin APIs
//

@mixin mdc-ripple-surface() {
--mdc-ripple-fg-size: 0;
--mdc-ripple-left: 0;
Expand All @@ -295,27 +66,6 @@ $mdc-ripple-common-styles-emitted_: false !default;
}
}

@mixin mdc-ripple-color_($color, $opacity) {
// stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
@if type-of($color) == "color" {
background-color: rgba($color, $opacity);
} @else {
// Assume $color is a theme property name
$theme-value: map-get($mdc-theme-property-values, $color);
$css-var: var(--mdc-theme-#{$color}, $theme-value);

background-color: rgba($theme-value, $opacity);

// See: https://drafts.csswg.org/css-color/#modifying-colors
// While this is currently unsupported as of now, it will begin to work by default as browsers
// begin to implement the CSS 4 color spec.
@supports (background-color: color(green a(10%))) {
background-color: color(#{$css-var} a(#{percentage($opacity)}));
}
}
// stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
}

@mixin mdc-ripple-color($color: black, $opacity: .06) {
// 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,
Expand Down Expand Up @@ -405,3 +155,24 @@ $mdc-ripple-common-styles-emitted_: false !default;
left: var(--mdc-ripple-left, 0);
}
}

@mixin mdc-ripple-color_($color, $opacity) {
// stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
@if type-of($color) == "color" {
background-color: rgba($color, $opacity);
} @else {
// Assume $color is a theme property name
$theme-value: map-get($mdc-theme-property-values, $color);
$css-var: var(--mdc-theme-#{$color}, $theme-value);

background-color: rgba($theme-value, $opacity);

// See: https://drafts.csswg.org/css-color/#modifying-colors
// While this is currently unsupported as of now, it will begin to work by default as browsers
// begin to implement the CSS 4 color spec.
@supports (background-color: color(green a(10%))) {
background-color: color(#{$css-var} a(#{percentage($opacity)}));
}
}
// stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
}

0 comments on commit 47c6859

Please sign in to comment.