From ce97f918eab1947f62c8c4c66a55d87c0994d7fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Tue, 25 Apr 2023 13:39:21 +0200 Subject: [PATCH] Mini Cart block: fix slide in animation (https://github.com/woocommerce/woocommerce-blocks/pull/9195) --- .../js/base/components/drawer/style.scss | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss index 98221aef8b9..a3b5cd275a3 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss @@ -20,7 +20,17 @@ $drawer-animation-duration: 0.3s; } to { - transform: translateX(var(--neg-drawer-width)); + transform: translateX(max(-100%, var(--neg-drawer-width))); + } +} + +@keyframes rtlslidein { + from { + transform: translateX(0); + } + + to { + transform: translateX(min(100%, var(--drawer-width))); } } @@ -68,7 +78,7 @@ $drawer-animation-duration: 0.3s; } .rtl .wc-block-components-drawer { - transform: translateX(max(100%, var(--drawer-width))); + transform: translateX(min(100%, var(--drawer-width))); } .wc-block-components-drawer__screen-overlay--with-slide-out .wc-block-components-drawer { @@ -80,6 +90,10 @@ $drawer-animation-duration: 0.3s; animation-name: slidein; } +.rtl .wc-block-components-drawer__screen-overlay--with-slide-in .wc-block-components-drawer { + animation-name: rtlslidein; +} + .wc-block-components-drawer__screen-overlay--is-hidden .wc-block-components-drawer { transform: translateX(0); }