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(switch): add feature targeting for styles #4275

Merged
merged 7 commits into from
Feb 1, 2019
Merged

feat(switch): add feature targeting for styles #4275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b8d79f3
feat(switch): add feature targeting for styles
crisbeto Jan 19, 2019
b937c42
refactor: address feedback
crisbeto Jan 29, 2019
5f6ad5f
refactor: apply latest style API changes
crisbeto Jan 31, 2019
92d05f9
WIP Fix lint
kfranqueiro Feb 1, 2019
ef39443
WIP Add baseline switch mixin to test
kfranqueiro Feb 1, 2019
ebb33ba
WIP Move radius-unbounded above states
kfranqueiro Feb 1, 2019
acdb82b
Merge branch 'master' into switch-targeting
kfranqueiro Feb 1, 2019
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
277 changes: 253 additions & 24 deletions packages/mdc-switch/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,56 +23,285 @@
@import "@material/theme/mixins";
@import "@material/ripple/mixins";
@import "@material/rtl/mixins";
@import "@material/elevation/mixins";
@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";
@import "./functions";
@import "./variables";

@mixin mdc-switch-toggled-on-color($color) {
@include mdc-switch-toggled-on-track-color($color);
@include mdc-switch-toggled-on-thumb-color($color);
@include mdc-switch-toggled-on-ripple-color($color);
//
// Public
//

@mixin mdc-switch($query: mdc-feature-all()) {
// postcss-bem-linter: define switch

$feat-animation: mdc-feature-create-target($query, animation);
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-ripple-common($query);

.mdc-switch {
@include mdc-feature-targets($feat-structure) {
@include mdc-switch-base_;
}

@include mdc-switch-toggled-on-track-color($mdc-switch-baseline-theme-color, $query);
@include mdc-switch-toggled-on-thumb-color($mdc-switch-baseline-theme-color, $query);
@include mdc-switch-toggled-off-track-color($mdc-switch-toggled-off-track-color, $query);
@include mdc-switch-toggled-off-thumb-color($mdc-switch-toggled-off-thumb-color, $query);
@include mdc-switch-toggled-off-ripple-color($mdc-switch-toggled-off-ripple-color, $query);
}

.mdc-switch__native-control {
@include mdc-feature-targets($feat-structure) {
@include mdc-switch__native-control_;
}
}

.mdc-switch__track {
@include mdc-switch__track_($query);
}

.mdc-switch__thumb-underlay {
@include mdc-switch__thumb-underlay_($query);
}

.mdc-switch__thumb {
@include mdc-switch__thumb_($query);
}

.mdc-switch--checked {
@include mdc-feature-targets($feat-structure) {
.mdc-switch__track {
@include mdc-switch__track-checked_;
}

.mdc-switch__thumb-underlay {
@include mdc-switch__thumb-underlay-checked_;
}

.mdc-switch__native-control {
@include mdc-switch__native-control-checked_;
}
}
}

.mdc-switch--disabled {
@include mdc-feature-targets($feat-structure) {
@include mdc-switch--disabled-base_;

.mdc-switch__thumb {
@include mdc-switch__thumb-disabled_;
}

.mdc-switch__native-control {
@include mdc-switch__native-control-disabled_;
}
}
}

// postcss-bem-linter: end
}

@mixin mdc-switch-toggled-on-color($color, $query: mdc-feature-all()) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kfranqueiro should we add feature targeting to only the main public mixin, or these ones too? (If we are adding it here too, we should add these mixins to the test that verifies nothing is emitted for empty query, I think it would fail currently)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good point, this mixin is not invoked by the base styles, so we don't necessarily need to cover it, if the goal is specifically to add feature targeting to the base emitted styles. If you're fine with that, then I think we can omit $query from mdc-switch-toggled-on-color and mdc-switch-toggled-off-color.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could also see doing it, just for the sake of consistency on public mixins. If we always do it then people don't have to think about whether this is one of the ones that supports it.

Also for things like disabling animations, you probably do want to have the ability to exclude the animation feature from all mixins, not just the base one.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're parameterizing $query here, then I think we need to enclose the first 2 mixin invocations within a color feature-targets block (same for mdc-switch-toggled-off-color), and invoke these in test/scss/feature-targeting.scss as Miles suggested.

@include mdc-switch-toggled-on-track-color($color, $query);
@include mdc-switch-toggled-on-thumb-color($color, $query);
@include mdc-switch-toggled-on-ripple-color($color, $query);
}

@mixin mdc-switch-toggled-off-color($color) {
@include mdc-switch-toggled-off-track-color($color);
@include mdc-switch-toggled-off-thumb-color($color);
@include mdc-switch-toggled-off-ripple-color($color);
@mixin mdc-switch-toggled-off-color($color, $query: mdc-feature-all()) {
@include mdc-switch-toggled-off-track-color($color, $query);
@include mdc-switch-toggled-off-thumb-color($color, $query);
@include mdc-switch-toggled-off-ripple-color($color, $query);
}

@mixin mdc-switch-toggled-on-track-color($color) {
@mixin mdc-switch-toggled-on-track-color($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);

&.mdc-switch--checked .mdc-switch__track {
@include mdc-theme-prop(background-color, $color);
@include mdc-theme-prop(border-color, $color);
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(background-color, $color);
@include mdc-theme-prop(border-color, $color);
}
}
}

@mixin mdc-switch-toggled-on-thumb-color($color) {
@mixin mdc-switch-toggled-on-thumb-color($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);

&.mdc-switch--checked .mdc-switch__thumb {
@include mdc-theme-prop(background-color, $color);
@include mdc-theme-prop(border-color, $color);
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(background-color, $color);
@include mdc-theme-prop(border-color, $color);
}
}
}

@mixin mdc-switch-toggled-on-ripple-color($color) {
@mixin mdc-switch-toggled-on-ripple-color($color, $query: mdc-feature-all()) {
&.mdc-switch--checked .mdc-switch__thumb-underlay {
@include mdc-states($color);
@include mdc-states($color, false, $query);
}
}

@mixin mdc-switch-toggled-off-track-color($color) {
@mixin mdc-switch-toggled-off-track-color($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);

&:not(.mdc-switch--checked) .mdc-switch__track {
@include mdc-theme-prop(background-color, $color);
@include mdc-theme-prop(border-color, $color);
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(background-color, $color);
@include mdc-theme-prop(border-color, $color);
}
}
}

@mixin mdc-switch-toggled-off-thumb-color($color) {
@mixin mdc-switch-toggled-off-thumb-color($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);

&:not(.mdc-switch--checked) .mdc-switch__thumb {
@include mdc-theme-prop(background-color, $color);
@include mdc-theme-prop(border-color, $color);
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(background-color, $color);
@include mdc-theme-prop(border-color, $color);
}
}
}

@mixin mdc-switch-toggled-off-ripple-color($color) {
@mixin mdc-switch-toggled-off-ripple-color($color, $query: mdc-feature-all()) {
&:not(.mdc-switch--checked) .mdc-switch__thumb-underlay {
@include mdc-states($color);
@include mdc-states($color, false, $query);
}
}

//
// Private
//

// Structure
@mixin mdc-switch-base_ {
display: inline-block;
position: relative;
outline: none;
user-select: none;
}

@mixin mdc-switch__track_($query: mdc-feature-all()) {
$feat-animation: mdc-feature-create-target($query, animation);
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-feature-targets($feat-structure) {
box-sizing: border-box;
width: $mdc-switch-track-width;
height: $mdc-switch-track-height;
border: 1px solid;
border-radius: $mdc-switch-track-height / 2;
opacity: .38;
}

@include mdc-feature-targets($feat-animation) {
transition:
mdc-switch-transition(opacity),
mdc-switch-transition(background-color),
mdc-switch-transition(border-color);
}
}

@mixin mdc-switch__thumb-underlay_($query: mdc-feature-all()) {
$feat-animation: mdc-feature-create-target($query, animation);
$feat-color: mdc-feature-create-target($query, color);
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-ripple-surface($query);
@include mdc-ripple-radius-unbounded(100%, $query);
kfranqueiro marked this conversation as resolved.
Show resolved Hide resolved
@include mdc-states($mdc-switch-baseline-theme-color, false, $query);

@include mdc-feature-targets($feat-structure) {
@include mdc-rtl-reflexive-position(left, $mdc-switch-tap-target-initial-position);

display: flex;
position: absolute;
// Ensures the knob is centered on the track.
top: -(($mdc-switch-tap-target-size - $mdc-switch-track-height) / 2);
align-items: center;
justify-content: center;
width: $mdc-switch-tap-target-size;
height: $mdc-switch-tap-target-size;
transform: translateX(0);
}

@include mdc-feature-targets($feat-animation) {
transition:
mdc-switch-transition(transform),
mdc-switch-transition(background-color),
mdc-switch-transition(border-color);
}
}

@mixin mdc-switch__native-control_ {
@include mdc-rtl-reflexive-position(left, 0);

position: absolute;
top: 0;
width: $mdc-switch-native-control-width;
height: $mdc-switch-tap-target-size;
margin: 0;
opacity: 0;
cursor: pointer;
pointer-events: auto;
}

@mixin mdc-switch__thumb_($query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
$feat-color: mdc-feature-create-target($query, color);

@include mdc-elevation($z-value: 2, $query: $query);

@include mdc-feature-targets($feat-structure) {
box-sizing: border-box;
width: $mdc-switch-thumb-diameter;
height: $mdc-switch-thumb-diameter;
border: $mdc-switch-thumb-diameter / 2 solid;
border-radius: 50%;
// Allow events to go through to the native control, necessary for IE and Edge.
pointer-events: none;
z-index: 1;
}
}

// Checked state

@mixin mdc-switch__track-checked_ {
opacity: .54;
}

@mixin mdc-switch__thumb-underlay-checked_ {
transform: translateX($mdc-switch-thumb-active-margin);

@include mdc-rtl {
transform: translateX(-($mdc-switch-thumb-active-margin));
}
}

@mixin mdc-switch__native-control-checked_ {
// Translate the native control the opposite direction so that the tap target stays the same.
transform: translateX(-($mdc-switch-thumb-active-margin));

@include mdc-rtl {
transform: translateX($mdc-switch-thumb-active-margin);
}
}

// Disabled state

@mixin mdc-switch--disabled-base_ {
opacity: .38;
pointer-events: none;
}

@mixin mdc-switch__thumb-disabled_ {
border-width: 1px; // In high contrast mode, only show outline of knob.
}

@mixin mdc-switch__native-control-disabled_ {
cursor: default;
pointer-events: none;
}
Loading