From 7fe735c9ea66dd58f30b487ca684fd0edeeb608e 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 (#9195) --- assets/js/base/components/drawer/style.scss | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/assets/js/base/components/drawer/style.scss b/assets/js/base/components/drawer/style.scss index 98221aef8b9..a3b5cd275a3 100644 --- a/assets/js/base/components/drawer/style.scss +++ b/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); }