/
slide-toggle.scss
78 lines (66 loc) · 2.8 KB
/
slide-toggle.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
@import '@material/switch/functions.import';
@import '@material/switch/mixins.import';
@import '@material/switch/variables.import';
@import '@material/form-field/mixins.import';
@import '@material/ripple/variables.import';
@import '../mdc-helpers/mdc-helpers';
@import '../../material/core/style/layout-common';
@import '../../cdk/a11y/a11y';
@include mdc-switch-without-ripple($query: $mat-base-styles-query);
@include mdc-form-field-core-styles($query: $mat-base-styles-query);
.mat-mdc-slide-toggle {
display: inline-block;
// The ripple needs extra specificity so the base ripple styling doesn't override its `position`.
.mat-mdc-slide-toggle-ripple, .mdc-switch__thumb-underlay::after {
@include mat-fill;
// Disable pointer events for the ripple container so that it doesn't eat the mouse events meant
// for the input. Pointer events can be safely disabled because the ripple trigger element is
// the host element.
pointer-events: none;
}
// The MDC switch styles related to the hover state are intertwined with the MDC ripple styles.
// We currently don't use the MDC ripple due to size concerns, therefore we need to add some
// additional styles to restore the hover state.
// We use `::after`, rather than `::before`, because `::before` is used by the
// generic strong focus indication styles.
.mdc-switch__thumb-underlay::after {
border-radius: 50%;
content: '';
opacity: 0;
}
.mdc-switch:hover .mdc-switch__thumb-underlay::after {
opacity: map-get($mdc-ripple-dark-ink-opacities, hover);
transition: mdc-switch-transition-enter(opacity, 0, 75ms);
}
// Needs a little more specificity so the :hover styles don't override it.
&.mat-mdc-slide-toggle-focused .mdc-switch .mdc-switch__thumb-underlay::after {
opacity: map-get($mdc-ripple-dark-ink-opacities, focus);
}
// We use an Angular Material ripple rather than an MDC ripple due to size concerns, so we need to
// style it appropriately.
.mat-ripple-element {
opacity: map-get($mdc-ripple-dark-ink-opacities, press);
}
.mat-ripple {
border-radius: 50%;
}
// Angular Material supports disabling all animations when NoopAnimationsModule is imported.
// TODO(mmalerba): Look into using MDC's Sass queries to separate the animation styles and
// conditionally add them. Consider the size cost when deciding whether to switch.
&._mat-animation-noopable {
.mdc-switch__thumb-underlay,
.mdc-switch__thumb-underlay::after {
transition: none;
}
}
}
@include cdk-high-contrast(active, off) {
.mat-mdc-slide-toggle-focused {
.mdc-switch__track {
// Usually 1px would be enough, but MDC reduces the opacity on the
// element so we need to make this a bit more prominent.
outline: solid 2px;
outline-offset: $mdc-switch-track-height / 2;
}
}
}