-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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.
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): Add support for activated and selected states #1696
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -61,6 +61,7 @@ $mdc-ripple-common-styles-emitted_: false !default; | |
&::after { | ||
position: absolute; | ||
border-radius: 50%; | ||
opacity: 0; | ||
pointer-events: none; | ||
content: ""; | ||
will-change: transform, opacity; | ||
|
@@ -104,8 +105,6 @@ $mdc-ripple-common-styles-emitted_: false !default; | |
&::before, | ||
&::after { | ||
@include mdc-theme-prop(background-color, $color, $edgeOptOut: true); | ||
|
||
opacity: 0; | ||
} | ||
} | ||
|
||
|
@@ -157,7 +156,7 @@ $mdc-ripple-common-styles-emitted_: false !default; | |
} | ||
|
||
// Simple mixin which automatically selects opacity values based on whether the ink color is light or dark. | ||
@mixin mdc-states($color: black, $has-nested-focusable-element: false) { | ||
@mixin mdc-states($color: black, $activated-color: null, $selected-color: null, $has-nested-focusable-element: false) { | ||
$color-value: mdc-theme-prop-value($color); | ||
$opacity-map: if( | ||
mdc-theme-tone($color-value) == "light", | ||
|
@@ -169,6 +168,41 @@ $mdc-ripple-common-styles-emitted_: false !default; | |
@include mdc-states-hover-opacity(map-get($opacity-map, "hover")); | ||
@include mdc-states-focus-opacity(map-get($opacity-map, "focus"), $has-nested-focusable-element); | ||
@include mdc-states-press-opacity(map-get($opacity-map, "press")); | ||
|
||
@if $activated-color { | ||
&--activated { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. does --activated work with all existing components? Or will this be a new modifier for some components? |
||
// Stylelint seems to think that '&' qualifies as a type selector here? | ||
// stylelint-disable-next-line selector-max-type | ||
&::before { | ||
opacity: map-get($opacity-map, "activated"); | ||
} | ||
|
||
@include mdc-states-base-color($activated-color); | ||
@include mdc-states-hover-opacity(map-get($opacity-map, "activated") + map-get($opacity-map, "hover")); | ||
@include mdc-states-focus-opacity( | ||
map-get($opacity-map, "activated") + map-get($opacity-map, "focus"), | ||
$has-nested-focusable-element | ||
); | ||
@include mdc-states-press-opacity(map-get($opacity-map, "activated") + map-get($opacity-map, "press")); | ||
} | ||
} | ||
|
||
@if $selected-color { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you create a mdc-selected-state($color, $has-nested-focusable-element) mixin which just handles selected state? It seems like its isolated logic |
||
&--selected { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. does --selected work with all existing components? Or will this be a new modifier for some components? |
||
// stylelint-disable-next-line selector-max-type | ||
&::before { | ||
opacity: map-get($opacity-map, "selected"); | ||
} | ||
|
||
@include mdc-states-base-color($selected-color); | ||
@include mdc-states-hover-opacity(map-get($opacity-map, "selected") + map-get($opacity-map, "hover")); | ||
@include mdc-states-focus-opacity( | ||
map-get($opacity-map, "selected") + map-get($opacity-map, "focus"), | ||
$has-nested-focusable-element | ||
); | ||
@include mdc-states-press-opacity(map-get($opacity-map, "selected") + map-get($opacity-map, "press")); | ||
} | ||
} | ||
} | ||
|
||
@mixin mdc-ripple-radius($radius: 100%) { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you create a
mdc-activated-state($color, $has-nested-focusable-element)
mixin which just handles activated state? It seems like its isolated logic