forked from angular/components
/
checkbox.scss
101 lines (85 loc) · 3.43 KB
/
checkbox.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
@use '@material/checkbox' as mdc-checkbox;
@use '@material/form-field' as mdc-form-field;
@use '@material/ripple' as mdc-ripple;
@use '@material/touch-target' as mdc-touch-target;
@use 'sass:map';
@use '../../cdk/a11y';
@use '../mdc-helpers/mdc-helpers';
@use '../../material/core/style/layout-common';
@use '../../material/core/style/vendor-prefixes';
@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-base-styles-query);
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
// Apply base styles to the MDC ripple to adjust appearance for state changes (hover, focus, press)
@mixin _ripple-base-styles() {
.mdc-checkbox__ripple {
opacity: 0;
}
}
.mat-mdc-checkbox {
// The host node defaults to `diplay: inline` so
// we have to change it in order for margins to work.
display: inline-block;
// The MDC checkbox 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.
.mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__ripple {
opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
transform: scale(1);
transition: mdc-checkbox-transition-enter(opacity, 0, 80ms),
mdc-checkbox-transition-enter(transform, 0, 80ms);
}
// Note that the :not([disabled]) here isn't necessary, but we need it for the
// extra specificity so that the hover styles don't override the focus styles.
.mdc-checkbox .mdc-checkbox__native-control:not([disabled]):focus ~ .mdc-checkbox__ripple {
opacity: map.get(mdc-ripple.$dark-ink-opacities, hover) +
map.get(mdc-ripple.$dark-ink-opacities, focus);
@include a11y.high-contrast(active, off) {
outline: solid 3px;
opacity: 1;
}
}
.mdc-checkbox__background {
// force browser to show background-color when using the print function
@include vendor-prefixes.private-color-adjust(exact);
}
// 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 {
*,
*::before {
transition: none !important;
animation: none !important;
}
}
// The MDC styles result in extra padding if the label is present but empty. To fix this we hide
// the label when it is empty.
label:empty {
display: none;
}
@include _ripple-base-styles();
}
.mat-mdc-checkbox-ripple, .mdc-checkbox__ripple {
@include layout-common.fill();
// Usually the ripple radius would be specified through the MatRipple input, but
// since we dynamically adjust the size of the ripple container, we cannot use a
// fixed ripple radius.
border-radius: 50%;
pointer-events: none;
// Fixes the ripples not clipping to the border radius on Safari. Uses `:not(:empty)`
// in order to avoid creating extra layers when there aren't any ripples.
&:not(:empty) {
transform: translateZ(0);
}
}
// Element used to provide a larger tap target for users on touch devices.
.mat-mdc-checkbox-touch-target {
@include mdc-touch-target.touch-target(
$set-width: true,
$query: mdc-helpers.$mat-base-styles-query);
[dir='rtl'] & {
left: 0;
right: 50%;
transform: translate(50%, -50%);
}
}