Browse Source

Other: Use CSS calc() for --ck-switch-button-translation as it works in latest Edge. ckeditor/ckeditor5#6202.

Agreed at https://github.com/ckeditor/ckeditor5-utils/pull/333#issuecomment-615275702
Tomek Wytrębowicz 5 years ago
parent
commit
972b5f2aab

+ 5 - 10
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css

@@ -16,7 +16,11 @@ of the component, floating–point numbers have been used which, for the default
 	/* 14px at 13px font-size */
 	--ck-switch-button-toggle-inner-size: 1.0769230769em;
 	--ck-switch-button-toggle-spacing: 1px;
-	--ck-switch-button-translation: 1.3846153847em;
+	--ck-switch-button-translation: calc(
+		var(--ck-switch-button-toggle-width) -
+		var(--ck-switch-button-toggle-inner-size) -
+		2 * var(--ck-switch-button-toggle-spacing)
+	);
 }
 
 .ck.ck-button.ck-switchbutton {
@@ -89,15 +93,6 @@ of the component, floating–point numbers have been used which, for the default
 		& .ck-button__toggle__inner {
 			/*
 			 * 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) )
-			 * 	)
 			 */
 			@mixin ck-dir ltr {
 				transform: translateX( var( --ck-switch-button-translation ) );