Skip to content

Commit

Permalink
Add comment and use checked instead of "on" and "off"
Browse files Browse the repository at this point in the history
  • Loading branch information
devversion committed Oct 26, 2016
1 parent a8c7920 commit c0ef774
Showing 1 changed file with 19 additions and 15 deletions.
34 changes: 19 additions & 15 deletions src/lib/slide-toggle/_slide-toggle-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@
@import '../core/theming/theming';


@mixin _md-slide-toggle-checked($palette, $thumb-on-hue) {
@mixin _md-slide-toggle-checked($palette, $thumb-checked-hue) {
// Do not apply the checked colors if the toggle is disabled, because the specificity would be to high for
// the disabled styles.
&.md-checked:not(.md-disabled) {
.md-slide-toggle-thumb {
background-color: md-color($palette, $thumb-on-hue);
background-color: md-color($palette, $thumb-checked-hue);
}

.md-slide-toggle-bar {
background-color: md-color($palette, $thumb-on-hue, 0.5);
background-color: md-color($palette, $thumb-checked-hue, 0.5);
}
}
}

// TODO(jelbourn): remove this when the real ripple has been applied to slide-toggle.
@mixin _md-slide-toggle-ripple($palette, $foreground, $thumb-on-hue) {
@mixin _md-slide-toggle-ripple($palette, $foreground, $thumb-checked-hue) {

&.md-slide-toggle-focused {
&:not(.md-checked) .md-ink-ripple {
Expand All @@ -27,7 +27,7 @@
}

.md-ink-ripple {
background-color: md-color($palette, $thumb-on-hue, 0.26);
background-color: md-color($palette, $thumb-checked-hue, 0.26);
}
}

Expand All @@ -41,24 +41,28 @@
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);

$thumb-on-hue: if($is-dark, 200, 500);
$thumb-off-hue: if($is-dark, 400, 50);
// Color hues based on the specs, which prescribe different hues for dark and light themes
// https://material.google.com/components/selection-controls.html#selection-controls-switch
$thumb-normal-hue: if($is-dark, 400, 50);
$thumb-checked-hue: if($is-dark, 200, 500);
$thumb-disabled-hue: if($is-dark, 800, 400);

$bar-normal-color: md-color($foreground, disabled);
$bar-disabled-color: if($is-dark, rgba(white, 0.12), rgba(black, 0.1));

md-slide-toggle {
@include _md-slide-toggle-checked($accent, $thumb-on-hue);
@include _md-slide-toggle-ripple($accent, $foreground, $thumb-on-hue);
@include _md-slide-toggle-checked($accent, $thumb-checked-hue);
@include _md-slide-toggle-ripple($accent, $foreground, $thumb-checked-hue);


&.md-primary {
@include _md-slide-toggle-checked($primary, $thumb-on-hue);
@include _md-slide-toggle-ripple($primary, $foreground, $thumb-on-hue);
@include _md-slide-toggle-checked($primary, $thumb-checked-hue);
@include _md-slide-toggle-ripple($primary, $foreground, $thumb-checked-hue);
}

&.md-warn {
@include _md-slide-toggle-checked($warn, $thumb-on-hue);
@include _md-slide-toggle-ripple($warn, $foreground, $thumb-on-hue);
@include _md-slide-toggle-checked($warn, $thumb-checked-hue);
@include _md-slide-toggle-ripple($warn, $foreground, $thumb-checked-hue);
}

}
Expand All @@ -76,10 +80,10 @@
}

.md-slide-toggle-thumb {
background-color: md-color($md-grey, $thumb-off-hue);
background-color: md-color($md-grey, $thumb-normal-hue);
}

.md-slide-toggle-bar {
background-color: md-color($foreground, disabled);
background-color: $bar-normal-color;
}
}

0 comments on commit c0ef774

Please sign in to comment.