@@ -67,20 +67,14 @@ $ripple-radius: 20px;
6767
6868// The inner circle for the radio, shown when checked.
6969.mat-radio-inner-circle {
70- $transition-duration : 280ms ;
71- $base-transition : transform ease $transition-duration , background-color ease $transition-duration ;
7270 border-radius : 50% ;
7371 box-sizing : border-box ;
7472 display : block ;
7573 height : $size ;
7674 left : 0 ;
7775 position : absolute ;
7876 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 ;
8478 width : $size ;
8579
8680 // Note: This starts from 0.001 instead of 0, because transitioning from 0 to 0.5 causes
@@ -90,21 +84,19 @@ $ripple-radius: 20px;
9084 // force browser to show background-color when using the print function
9185 @include vendor-prefixes .private-color-adjust (exact );
9286
87+ ._mat-animation-noopable & {
88+ transition : none ;
89+ }
90+
9391 .mat-radio-checked & {
9492 transform : scale (0.5 );
95- opacity : 1 ;
96- transition : $base-transition ;
9793
9894 @include a11y .high-contrast (active , off) {
9995 // Since we use a background color to render the circle, it won't be
10096 // displayed in high contrast mode. Use a border as a fallback.
10197 border : solid private .private-div ($size , 2 );
10298 }
10399 }
104-
105- ._mat-animation-noopable & {
106- transition : none ;
107- }
108100}
109101
110102// Text label next to radio.
0 commit comments