@@ -67,20 +67,14 @@ $ripple-radius: 20px;
67
67
68
68
// The inner circle for the radio, shown when checked.
69
69
.mat-radio-inner-circle {
70
- $transition-duration : 280ms ;
71
- $base-transition : transform ease $transition-duration , background-color ease $transition-duration ;
72
70
border-radius : 50% ;
73
71
box-sizing : border-box ;
74
72
display : block ;
75
73
height : $size ;
76
74
left : 0 ;
77
75
position : absolute ;
78
76
top : 0 ;
79
- // On some zoom levels the `scale(0.001)` from below can cause the circle to be shown as a 1x1
80
- // dot (see #22036). Ensure that it's hidden using `opacity`. There's a slight transition with
81
- // a long delay so that switching the opacity only applies after the `transform` is done.
82
- opacity : 0 ;
83
- transition : $base-transition , opacity linear 1ms $transition-duration ;
77
+ transition : transform ease 280ms , background-color ease 280ms ;
84
78
width : $size ;
85
79
86
80
// Note: This starts from 0.001 instead of 0, because transitioning from 0 to 0.5 causes
@@ -90,21 +84,19 @@ $ripple-radius: 20px;
90
84
// force browser to show background-color when using the print function
91
85
@include vendor-prefixes .private-color-adjust (exact );
92
86
87
+ ._mat-animation-noopable & {
88
+ transition : none ;
89
+ }
90
+
93
91
.mat-radio-checked & {
94
92
transform : scale (0.5 );
95
- opacity : 1 ;
96
- transition : $base-transition ;
97
93
98
94
@include a11y .high-contrast (active , off) {
99
95
// Since we use a background color to render the circle, it won't be
100
96
// displayed in high contrast mode. Use a border as a fallback.
101
97
border : solid private .private-div ($size , 2 );
102
98
}
103
99
}
104
-
105
- ._mat-animation-noopable & {
106
- transition : none ;
107
- }
108
100
}
109
101
110
102
// Text label next to radio.
0 commit comments