From 972b5f2aab9c491ccc64f4d59fe23c2cf9eadc1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Mon, 20 Apr 2020 16:07:23 +0200 Subject: [PATCH] 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 --- .../components/button/switchbutton.css | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css index ff3511114fd..baf3abc15d2 100644 --- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css +++ b/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 ) );