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

feat(checkbox): Use new ripple mixins, and remove unnecessary mixin #1472

Merged
merged 2 commits into from
Oct 26, 2017
Merged

feat(checkbox): Use new ripple mixins, and remove unnecessary mixin #1472

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
db2e82e
feat(checkbox): Use new ripple mixins, and remove unnecessary mdc-che…
Oct 20, 2017
9e165f0
Merge branch 'master' into feat/ripple-new-mixins-checkbox
kfranqueiro Oct 26, 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
3 changes: 2 additions & 1 deletion demos/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
@import "../packages/mdc-button/mdc-button";
@import "../packages/mdc-checkbox/mdc-checkbox";
@import "../packages/mdc-form-field/mdc-form-field";
@import "../packages/mdc-ripple/mixins";
@import "../packages/mdc-theme/color-palette";
@import "../packages/mdc-theme/mixins";
@import "../packages/mdc-typography/mdc-typography";
Expand All @@ -26,7 +27,7 @@
$color: $material-color-red-500;

@include mdc-checkbox-focus-indicator-color($color);
@include mdc-checkbox-ripple((base-color: $color, opacity: $mdc-checkbox-ripple-opacity));
@include mdc-ripple-color($color, $mdc-checkbox-ripple-opacity);
@include mdc-checkbox-container-colors(
$unmarked-stroke-color: $color,
$unmarked-fill-color: rgba($color, .25),
Expand Down
3 changes: 1 addition & 2 deletions packages/mdc-checkbox/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,9 +266,8 @@ Mixin | Description
`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox
`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons
`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator
`mdc-checkbox-ripple($ripple-config)` | Sets the ripple to the given [ripple configuration][ripple-readme]

[ripple-readme]: https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/README.md
The ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.

#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)`

Expand Down
8 changes: 0 additions & 8 deletions packages/mdc-checkbox/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
//

@import "@material/animation/functions";
@import "@material/ripple/mixins";
@import "@material/rtl/mixins";
@import "./functions";
@import "./keyframes";
Expand Down Expand Up @@ -87,13 +86,6 @@
}
}

@mixin mdc-checkbox-ripple($ripple-config) {
$ripple-config: map-merge((opacity: $mdc-checkbox-ripple-opacity, radius: 50%), $ripple-config);

@include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
@include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
}

//
// Private
//
Expand Down
1 change: 1 addition & 0 deletions packages/mdc-checkbox/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ $mdc-checkbox-border-width: 2px;
$mdc-checkbox-transition-duration: 90ms;
$mdc-checkbox-item-spacing: 4px;
$mdc-checkbox-ripple-opacity: .14;
$mdc-checkbox-ripple-radius: 50%;
$mdc-checkbox-focus-indicator-opacity: .26;

// Manual calculation done on SVG
Expand Down
6 changes: 4 additions & 2 deletions packages/mdc-checkbox/mdc-checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
// limitations under the License.
//

@import "@material/ripple/mixins";
@import "@material/theme/mixins";
@import "./mixins";
@import "./variables";
Expand All @@ -22,10 +23,11 @@

.mdc-checkbox {
@include mdc-checkbox-base_;
@include mdc-ripple-base;
@include mdc-checkbox-ink-color($mdc-checkbox-mark-color);
@include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color);
@include mdc-checkbox-ripple((theme-style: $mdc-checkbox-baseline-theme-color, opacity: $mdc-checkbox-ripple-opacity));
@include mdc-ripple-surface;
@include mdc-ripple-color($mdc-checkbox-baseline-theme-color, $mdc-checkbox-ripple-opacity);
@include mdc-ripple-radius($mdc-checkbox-ripple-radius);
@include mdc-checkbox-container-colors();

@include mdc-theme-dark {
Expand Down