Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ripple): Remove old complex mixins #1496

Merged
merged 1 commit into from
Oct 27, 2017
Merged

feat(ripple): Remove old complex mixins #1496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 0 additions & 25 deletions packages/mdc-ripple/README.md
View file
Open in desktop
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
Open in desktop
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
}