Merge pull request #2875 from mervekaraman/master

RTL for Tips: Align text to left and revert image

public/css/app.css

@@ -55345,6 +55345,14 @@ body{
   left: -2rem;
 }
 
+[dir="ltr"] .ltr\:float-right{
+  float: right;
+}
+
+[dir="ltr"] .ltr\:float-left{
+  float: left;
+}
+
 [dir="ltr"] .ltr\:m-0{
   margin: 0px;
 }
@@ -55589,6 +55597,12 @@ body{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+[dir="ltr"] .ltr\:scale-x-0{
+  --tw-scale-x: 0;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 [dir="ltr"] .ltr\:items-start{
   -webkit-box-align: start;
       -ms-flex-align: start;
@@ -56346,6 +56360,14 @@ body{
   right: -2rem;
 }
 
+[dir="rtl"] .rtl\:float-right{
+  float: right;
+}
+
+[dir="rtl"] .rtl\:float-left{
+  float: left;
+}
+
 [dir="rtl"] .rtl\:m-0{
   margin: 0px;
 }
@@ -57629,10 +57651,6 @@ body{
     border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
   }
 
-    .lg\:overflow-visible{
-    overflow: visible;
-  }
-
     .lg\:overflow-x-hidden{
     overflow-x: hidden;
   }
@@ -57752,10 +57770,6 @@ body{
     right: 0px;
   }
 
-    [dir="ltr"] .lg\:ltr\:right-0{
-    right: 0px;
-  }
-
     [dir="ltr"] .lg\:ltr\:ml-72{
     margin-left: 18rem;
   }
@@ -57780,10 +57794,6 @@ body{
     left: 0px;
   }
 
-    [dir="rtl"] .lg\:rtl\:left-0{
-    left: 0px;
-  }
-
     [dir="rtl"] .lg\:rtl\:mr-72{
     margin-right: 18rem;
   }

resources/views/components/tips/fixed.blade.php

@@ -12,8 +12,8 @@
 
             <div
                 @class([
-                    'float-right' => $item->align == 'right',
+                    'ltr:float-right rtl:float-left' => $item->align == 'right',
-                    'float-left' => $item->align == 'left',
+                    'ltr:float-left rtl:float-right' => $item->align == 'left',
                 ])
 
                 style="width: 200px;"
@@ -32,7 +32,7 @@
         </div>
 
         <div class="absolute ltr:right-0 rtl:left-0">
-            <img src="{{ $item->thumb }}" alt="{{ $item->title }}" />
+            <img src="{{ $item->thumb }}" alt="{{ $item->title }}" class="rtl:-scale-x-100 ltr:scale-x-100" />
         </div>
     </div>
 @endforeach

resources/views/components/tips/relative.blade.php

@@ -1,5 +1,5 @@
 @foreach ($tips as $item)
-    <div class="relative hidden lg:block w-4/12 mt-12 xl:mt-9.5 lg:pl-12">
+    <div class="relative hidden lg:block w-4/12 mt-12 xl:mt-9.5 ltr:pl-12 rtl:pl-0">
         <div @class([
                 'relative leading-4 z-10',
                 'ltr:text-right rtl:text-left' => $item->align == 'right',
@@ -12,8 +12,8 @@
 
             <div
                 @class([
-                    'float-right' => $item->align == 'right',
+                    'ltr:float-right rtl:float-left' => $item->align == 'right',
-                    'float-left' => $item->align == 'left',
+                    'ltr:float-left rtl:float-right' => $item->align == 'left',
                 ])
 
                 style="width: 200px;"
@@ -31,7 +31,7 @@
         </div>
 
         <div class="absolute ltr:right-0 rtl:left-0">
-            <img src="{{ $item->thumb }}" alt="{{ $item->title }}" />
+            <img src="{{ $item->thumb }}" alt="{{ $item->title }}" class="rtl:-scale-x-100 ltr:scale-x-100" />
         </div>
     </div>
 @endforeach

safelist.txt

@@ -86,3 +86,7 @@ rtl:-left-1.5
 rtl:-scale-x-100
 ltr:border-l-8
 rtl:border-r-8
+ltr:float-right
+ltr:float-left
+rtl:float-right
+rtl:float-left