| @import '../core/style/private'; |
| @import '../core/theming/palette'; |
| @import '../core/theming/theming'; |
| @import '../core/typography/typography-utils'; |
| |
| @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) { |
| &.mat-checked { |
| .mat-slide-toggle-thumb { |
| background-color: mat-color($palette, $thumb-checked-hue); |
| } |
| |
| .mat-slide-toggle-bar { |
| // 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); |
| } |
| |
| .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); |
| } |
| } |
| } |
| |
| @mixin mat-slide-toggle-color($config-or-theme) { |
| $config: mat-get-color-config($config-or-theme); |
| $is-dark: map-get($config, is-dark); |
| $primary: map-get($config, primary); |
| $accent: map-get($config, accent); |
| $warn: map-get($config, warn); |
| $background: map-get($config, background); |
| $foreground: map-get($config, foreground); |
| |
| // 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 partially keep the old behavior that is based on |
| // the previous specifications. For the checked color we always use the `default` hue because |
| // that follows MDC and also makes it easier for people to create a custom theme without needing |
| // to specify each hue individually. |
| $thumb-unchecked-hue: if($is-dark, 400, 50); |
| $thumb-checked-hue: default; |
| |
| $bar-unchecked-color: mat-color($foreground, disabled); |
| $ripple-unchecked-color: mat-color($foreground, base); |
| |
| .mat-slide-toggle { |
| @include _mat-slide-toggle-checked($accent, $thumb-checked-hue); |
| |
| &.mat-primary { |
| @include _mat-slide-toggle-checked($primary, $thumb-checked-hue); |
| } |
| |
| &.mat-warn { |
| @include _mat-slide-toggle-checked($warn, $thumb-checked-hue); |
| } |
| |
| &: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-slide-toggle-thumb { |
| @include mat-private-theme-elevation(1, $config); |
| background-color: mat-color($mat-grey, $thumb-unchecked-hue); |
| } |
| |
| .mat-slide-toggle-bar { |
| background-color: $bar-unchecked-color; |
| } |
| } |
| |
| @mixin mat-slide-toggle-typography($config-or-theme) { |
| $config: mat-get-typography-config($config-or-theme); |
| .mat-slide-toggle-content { |
| font-family: mat-font-family($config); |
| } |
| } |
| |
| @mixin _mat-slide-toggle-density($config-or-theme) {} |
| |
| @mixin mat-slide-toggle-theme($theme-or-color-config) { |
| $theme: mat-private-legacy-get-theme($theme-or-color-config); |
| @include mat-private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') { |
| $color: mat-get-color-config($theme); |
| $density: mat-get-density-config($theme); |
| $typography: mat-get-typography-config($theme); |
| |
| @if $color != null { |
| @include mat-slide-toggle-color($color); |
| } |
| @if $density != null { |
| @include _mat-slide-toggle-density($density); |
| } |
| @if $typography != null { |
| @include mat-slide-toggle-typography($typography); |
| } |
| } |
| } |
| |