Răsfoiți Sursa

Merge pull request #194 from ckeditor/t/ckeditor5-ui/433

Fix: The switch button should be animated properly in Edge. Closes ckeditor/ckeditor5-ui#433.
Aleksander Nowodzinski 7 ani în urmă
părinte
comite
794f4cde5c

+ 13 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css

@@ -59,8 +59,19 @@ of the component, floating–point numbers have been used which, for the default
 		background: var(--ck-color-switch-button-on-background);
 		background: var(--ck-color-switch-button-on-background);
 
 
 		& .ck-button__toggle__inner {
 		& .ck-button__toggle__inner {
-			/* Move the toggle switch to the right. It will be animated. */
-			transform: translateX(calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2*var(--ck-switch-button-toggle-spacing)));
+			/*
+			 * Move the toggle switch to the right. It will be animated.
+			 *
+			 * Edge is not supporting calc() in the transitions and animations, we need to hardcode this value (see ckeditor5-ui#433).
+			 * It boils down to:
+			 *
+			 * 	calc(
+			 * 		var(--ck-switch-button-toggle-width) -
+			 * 		var(--ck-switch-button-toggle-inner-size) -
+			 * 		2*var(--ck-switch-button-toggle-spacing) )
+			 * 	)
+			 */
+			transform: translateX( 1.3846153847em );
 		}
 		}
 	}
 	}
 }
 }