/
radio.scss
54 lines (46 loc) · 1.75 KB
/
radio.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
@use '@material/radio/radio' as mdc-radio;
@use '@material/radio/radio-theme' as mdc-radio-theme;
@use '@material/form-field' as mdc-form-field;
@use '@material/touch-target' as mdc-touch-target;
@use '../mdc-helpers/mdc-helpers';
@use '../../cdk/a11y';
@use '../../material/core/style/layout-common';
@include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query);
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
// This is necessary because we do not depend on MDC's ripple, but have our own that should be
// positioned correctly. This can be removed once we start using MDC's ripple implementation.
.mat-mdc-radio-button .mat-radio-ripple {
@include layout-common.fill;
pointer-events: none;
border-radius: 50%;
.mat-ripple-element:not(.mat-radio-persistent-ripple) {
opacity: mdc-radio-theme.$ripple-opacity;
}
}
.mat-mdc-radio-button:not(._mat-animation-noopable) {
@include mdc-radio.without-ripple($query: animation);
}
// Element used to provide a larger tap target for users on touch devices.
.mat-mdc-radio-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%);
}
}
// Note that this creates a square box around the circle, however it's consistent with
// how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border
// into a dotted one, because it's too thick which causes the circles to look off.
@include a11y.high-contrast {
.mat-mdc-radio-button:not(.mat-radio-disabled) {
&.cdk-keyboard-focused,
&.cdk-program-focused {
.mat-radio-ripple {
outline: solid 3px;
}
}
}
}