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); }