fix(actionsheet): incorrect positioning in rtl mode

telerik · Apr 24, 2023 · 1d5987a · 1d5987a
1 parent 2141bff
commit 1d5987a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/packages/default/scss/action-sheet/_layout.scss b/packages/default/scss/action-sheet/_layout.scss
@@ -189,15 +189,15 @@
         border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
         border-top-width: if( $kendo-actionsheet-border-width, 0, null );
         top: 0;
-        left: 50%;
+        inset-inline-start: 50%;
         transform: translateX( -50% );
     }
     .k-actionsheet-bottom {
         @include border-top-radius( $kendo-actionsheet-border-radius );
         border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
         border-bottom-width: if( $kendo-actionsheet-border-width, 0, null );
         bottom: 0;
-        left: 50%;
+        inset-inline-start: 50%;
         transform: translateX( -50% );
     }
     .k-actionsheet-left {
@@ -356,6 +356,15 @@
         }
     }
 
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+        .k-actionsheet-top,
+        .k-actionsheet-bottom {
+            transform: translateX( 50% );
+        }
+    }
+
 }
 
 

diff --git a/packages/fluent/scss/action-sheet/_layout.scss b/packages/fluent/scss/action-sheet/_layout.scss
@@ -218,7 +218,7 @@
         border-width: var( --kendo-actionsheet-border-width, #{$kendo-actionsheet-border-width} );
         border-top-width: 0;
         top: 0;
-        left: 50%;
+        inset-inline-start: 50%;
         transform: translateX( -50% );
     }
 
@@ -227,7 +227,7 @@
         border-width: var( --kendo-actionsheet-border-width, #{$kendo-actionsheet-border-width} );
         border-bottom-width: 0;
         bottom: 0;
-        left: 50%;
+        inset-inline-start: 50%;
         transform: translateX( -50% );
     }
 
@@ -363,6 +363,15 @@
             flex-flow: column nowrap;
         }
     }
+
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+        .k-actionsheet-top,
+        .k-actionsheet-bottom {
+            transform: translateX( 50% );
+        }
+    }
 }
 
 @mixin kendo-action-sheet--layout-jq() {