skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(slide-toggle): respect primary palette of theme (#12698)

Browse Source 
* Instead of hard-coding the hue 500 for the checked color, the `default` hue for a palette should be used (falls back to 500 unless explicitly specified). This is similar to the MDC implementation and what the selection control specs show.
* Fixes a missing thing for the 2018 spec alignment: The thumb bar should have a `0.54` opacity of the checked thumb color
* Removes duplicate CSS for setting the unchecked ripple color.
* Updates spec comments to refer to the reworked Material Design guidelines webpage.

Fixes #11854
This commit is contained in:
Paul Gschwendtner
2018-08-22 16:35:06 +02:00
committed by Jeremy Elbourn
parent 4050002957
commit dad0ed0a6a
1 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/slide-toggle/_slide-toggle-theme.scss
+22 -25
View File
@@ -11,18 +11,16 @@
}
.mat-slide-toggle-bar {
background-color: mat-color($palette, $thumb-checked-hue, 0.5);
// Opacity is determined from the specs for the selection controls.
// See: https://material.io/design/components/selection-controls.html#specs
background-color: mat-color($palette, $thumb-checked-hue, 0.54);
}
}
}
// Applies the specified colors to the slide-toggle ripple elements.
@mixin _mat-slide-toggle-ripple($palette, $ripple-unchecked-color, $ripple-checked-color) {
&:not(.mat-checked) .mat-ripple-element {
background-color: $ripple-unchecked-color;
}
.mat-ripple-element {
background-color: $ripple-checked-color;
.mat-ripple-element {
// Set no opacity for the ripples because the ripple opacity will be adjusted dynamically
// based on the type of interaction with the slide-toggle (e.g. for hover, focus)
background-color: mat-color($palette, $thumb-checked-hue);
}
}
}
@@ -34,36 +32,35 @@
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
// 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);
// Color hues are based on the specs which briefly show the hues that are applied to a switch.
// The 2018 specs no longer describe how dark switches should look like. Due to the lack of
// information for dark themed switches, we keep the old behavior that is based on the previous
// specifications. See: https://material.io/design/components/selection-controls.html#specs
$thumb-unchecked-hue: if($is-dark, 400, 50);
$thumb-checked-hue: if($is-dark, 200, default);
$thumb-disabled-hue: if($is-dark, 800, 400);
$bar-normal-color: mat-color($foreground, disabled);
$bar-unchecked-color: mat-color($foreground, disabled);
$bar-disabled-color: if($is-dark, rgba(white, 0.12), rgba(black, 0.1));
// Ripple colors are based on the current palette and the state of the slide-toggle.
// See https://material.google.com/components/selection-controls.html#selection-controls-switch
$ripple-unchecked-color: mat-color($foreground, base);
$ripple-primary-color: mat-color($primary, $thumb-checked-hue);
$ripple-accent-color: mat-color($accent, $thumb-checked-hue);
$ripple-warn-color: mat-color($warn, $thumb-checked-hue);
.mat-slide-toggle {
@include _mat-slide-toggle-checked($accent, $thumb-checked-hue);
@include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-accent-color);
&.mat-primary {
@include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
@include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-primary-color);
}
&.mat-warn {
@include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
@include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-warn-color);
}
&:not(.mat-checked) .mat-ripple-element {
// Set no opacity for the ripples because the ripple opacity will be adjusted dynamically
// based on the type of interaction with the slide-toggle (e.g. for hover, focus)
background-color: $ripple-unchecked-color;
}
}
.mat-disabled {
@@ -79,11 +76,11 @@
}
.mat-slide-toggle-thumb {
background-color: mat-color($mat-grey, $thumb-normal-hue);
background-color: mat-color($mat-grey, $thumb-unchecked-hue);
}
.mat-slide-toggle-bar {
background-color: $bar-normal-color;
background-color: $bar-unchecked-color;
}
}