RTL support

usernotnull · May 19, 2022 · 3fa7faa · 3fa7faa
1 parent 942f730
commit 3fa7faa
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/resources/views/includes/content.blade.php b/resources/views/includes/content.blade.php
@@ -1,18 +1,18 @@
 <div
-    class="overflow-hidden z-50 p-5 bg-white rounded-md border-l-8 shadow cursor-pointer pointer-events-auto select-none hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800"
+    class="overflow-hidden z-50 p-5 bg-white rounded-md shadow cursor-pointer pointer-events-auto select-none ltr:border-l-8 rtl:border-r-8 hover:bg-gray-50 dark:bg-black"
     x-bind:class="{
                     'border-blue-700': toast.type === 'info',
                     'border-green-700': toast.type === 'success',
                     'border-yellow-700': toast.type === 'warning',
                     'border-red-700': toast.type === 'danger'
                   }"
 >
-    <div class="flex justify-between items-center space-x-5">
-        <div class="flex-1 mr-2">
+    <div class="flex justify-between items-center space-x-5 rtl:space-x-reverse">
+        <div class="flex-1 ltr:mr-2 rtl:ml-2">
             <div
                 class="mb-1 text-lg font-black tracking-widest text-gray-900 uppercase font-large dark:text-gray-100"
-                x-show="toast.title !== undefined"
                 x-html="toast.title"
+                x-show="toast.title !== undefined"
             ></div>
 
             <div

diff --git a/resources/views/livewire/toasts.blade.php b/resources/views/livewire/toasts.blade.php
@@ -1,19 +1,20 @@
 <div
-    class="fixed right-0 bottom-0 z-50 p-4 space-y-3 w-full max-w-sm pointer-events-none toasts-container sm:p-6"
+    class="fixed bottom-0 z-50 p-4 space-y-3 w-full max-w-sm pointer-events-none ltr:right-0 rtl:left-0 toasts-container sm:p-6"
     x-data='ToastComponent($wire)'
     @mouseleave="scheduleRemovalWithOlder()"
 >
     <template
-        x-for="toast in toasts.filter((a)=>a)" :key="toast.index"
+        x-for="toast in toasts.filter((a)=>a)"
+        :key="toast.index"
     >
         <div
             @mouseenter="cancelRemovalWithNewer(toast.index)"
             @mouseleave="scheduleRemovalWithOlder(toast.index)"
             @click="remove(toast.index)"
             x-show="toast.show===1"
-            x-transition:enter="transform ease-out duration-500 transition"
-            x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-10"
-            x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
+            x-transition:enter="ease-out duration-500 transition"
+            x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 ltr:sm:translate-x-10 rtl:sm:-translate-x-10"
+            x-transition:enter-end="translate-y-0 opacity-100 ltr:sm:translate-x-0"
             x-transition:leave="transition ease-in duration-500"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"